Medical Portal


In the proposal for this project, I set out an objective to design a piece of software, intended for use in NHS hospitals by patients, their families and professionals. The aim of this software is to shorten and improve hospital stays for elderly patients by helping NHS professionals, such as doctors and adult services, carry out their jobs quicker and more efficiently. To achieve the aims and objectives, I would need to meet certain milestones:

Identify and research my target audience and their needs,
- Design wireframes for the software that meets those needs,
- Add colour and typography to meet the NHS branding guidelines,
- Use Adobe XD to create a Hi-Fi Prototype, showing an example of the software,
- Test the software on potential users, and “non-users”.

Design Research

Target Audience

User Centered Design Process

A User-Centred Design (UCD) Approach defines the need and target audience, forming a deeper understanding of who will be using the software and why (, 2018). The first step of a User-Centred approach is to identify your target audience, including why they will be using the software and under what conditions.
The target audience for this project is:
- The Elderly and their family,
-Professionals, including Doctors, Nurses and Adult Services.

The software will need to meet several requirements, particularly because it is being used by different target audiences. Firstly, for elderly patients and their families, the software needs to display information on the patient’s hospital stay in a way that is easy to digest without too many words. The software would enable elderly patients and their families to access a timeline of notes, indicating when they have been visited by doctors and specialists. It will also inform them on what medication they have taken and when.

User Profile 1 User Profile 2

For professionals, the software needs to allow them to add notes to the patient’s records but also review past notes. This is particularly important for the adult services team, so that they can review doctor’s notes whilst writing out their assessment. Adult services will be able to take notes and carry out their assessments of patients quicker, without having to write notes twice on two different systems.

When researching further into adult services and the systems they use for my case study, I found that the process is not efficient. In an interview with my mum, who is the Senior Practitioner in adult services at Basingstoke Hospital, she said that accessing notes means looking through all the paper notes on the ward (Seabrook, 2018). Because they are in paper form, it can take a while to go through all of them; however, some other hospitals have digital records instead and therefore this isn’t as much of an issue (Seabrook, 2018). Each visit to a patient also involves recording their visit in the paper notes on the ward and again on their own computer system, so the whole process is time consuming and difficult (Seabrook, 2018). Below you can see an overview of the work process for adult services.

Adult Services Work Flow

NHS Branding Guidelines

As this is software that I have designed for the NHS, I thought it was important that I follow their branding guidelines, including colour and typography. I researched into what colours they use and the typography and came across their own website that goes through all the information about applying their guidelines.

Colour is very important to the NHS, as their ‘research shows that patients and the public strongly associate the NHS with the colours blue and white’ (NHS, 2018a).

NHS Blue and White

There are also other colours associated with the NHS brand, which is useful for minimal highlighting. Overall, the dominant colours must always be the NHS blue and white, ‘supported by tints of the other colours in the NHS colour palette’ (NHS, 2018a).

NHS Colour Palette

When it comes to typography, the NHS uses the font ‘Frutiger’ in many different styles. When this isn’t available, ‘Arial’ is used (NHS, 2018b). I had looked at getting the Frutiger font style for my work, however I wasn’t willing to spend roughly £40 per style. In a way, this prevents the same font being used by everyone else as it is not as easily accessible – something they make clear in the guidelines (NHS, 2018b).

Key points from the branding guidelines on font include the use of italics. The NHS states that ‘we suggest avoiding using italics [online] because it is less accessible’, but also that Frutiger should be used when possible as ‘Arial doesn’t have the same level of character… nor… the same associations with the NHS (NHS, 2018b).

NHS Font

"You’d expect the same Font throughout." – Public Research, 2015

Design Ideas - Pinterest

Pinterest Board

For this project I started a Pinterest board to keep all of my design ideas and research together. It includes medical icons specific for this software, but also a couple of examples of medical apps and websites that I drew inspiration from.

The first interface that I really liked was for an app that wasn't for medical purposes, but I liked the vertical-scrolling screen with circle icons. This is what influenced the design for my own project.

Interface Inspiration

Another visual guide that I followed when designing this software was an infographic on the most important design principles, which outlined the importance of areas such as colour, contrast, negative space and framing.

Design Principles

Colour and negative space are important design principles for this project because of the NHS branding guidelines, which advised to use lots of white and NHS blue. I also took on board framing certain pages on the software, particularly with viewing notes.

Airbnb Design System

Airbnb Notes

Airbnb has taken an alternative approach to wireframing and testing their ideas. ‘The time required to test an idea should be zero’, which led to them to build a prototype of a system that can detect “blocks” in a sketch and automatically write the code to build it (Wilkins, 2018).

Airbnb System Quote

Airbnb design their site in “ready-made” blocks, using the same layout with slightly different designs which emphasises consistency of brand. Benjamin Wilkins (2018) uses Dan Eden’s definition of Design vocabulary, which is ‘a collection of metaphorical nouns and verbs that allows designers, engineers and beyond to express their intent in building a product’. For example, a “button” is composed of background, border, text, spacing, cursor and composes form. Form is composed of buttons, inputs, labels and composes a login page or search form for example. By designing the site in this way, they are designing for all platforms without having to focus on each one independently. I would like to use this concept in my own design.

Airbnb Design System

Development of Ideas

Initial Concept

User Needs

The first step in the design process after understanding my target audience was to start designing the interfaces. I started with just drawing some quick, rough sketches of the design before moving on to create a site map for the software to visualise its entirety. I wanted to design the interface around the previous design research I had done, which had a vertical scrolling page with circular icons. I started with this main interface as it was something that would be used by all target audiences.

First Wireframes

I then refined this design down into something a bit neater so I could understand exactly what each screen would look like. I also started looking at the first menus on the first interface.

Refined Wireframes

Another process that I did was write out all the front-end and back-end requirements so that I could understand the software and what it is going to be able to do better. This is a process that would be crucial for a live project as you would need to know whether something of this scale is doable and practical.

Back-End and Front-End

User Goals & Journeys

Before designing my wireframes in more detail, I drew out a site map of the software so that I could see it’s layout. This led to me realising that I had a menu that I didn’t need, which had the discharge and referrals in it. This would shorten the number of pages someone has to go through to complete a task and make the system more efficient, thus following the laws of UX (Yablonski, 2018).

Site Map

The discharge function was also not an idea from the start, so I looked at that in more detail and researched the discharge process in NHS hospitals. This helped me design this part of the software around the actual process allowing professionals to do their job more efficiently when it comes to discharging patients. It also meant that the patient and their family would be able to see why their discharge has been delayed and what it is they are waiting for, for example a prescription or hospital transport.

User Journeys of Medical Portal

Adobe XD

I chose Adobe XD to create a prototype for this project because it is easy to use and allows you to send a link to participants so that they can explore the software themselves without having any restrictions. This meant they could participate in their own time. It allows you to copy the code to insert it into html documents like my portfolio, which allows others to view the software without having to follow a link. The only negative about using Adobe XD is that the animations are limited when changing screens and to add menus or save buttons that have an effect you must create a new screen. This meant that in total I have 225+ different screens and it took a lot longer than I thought it would. This meant I couldn’t make everything work on the prototype, such as the filter function. However, I tried to show how each feature works by creating one example within the software, such as the split screen function for creating a note as adult services. It also meant I had less time to test the software, so I got less responses than I would have liked.

The first wireframes I created on Adobe XD were basic and I just wanted to get the foundations of the software in place so that I could play around with colour and positioning. I pretty much made a digital copy of the wireframes that I drew on paper, but also went on to design the second interface on Adobe XD. I thought about using the same layout for the second menu but decided to recreate the interface but with a landscape scrolling screen instead – reflecting from the Airbnb design system. This meant that the design was consistent, but you could also tell the difference between the first interface and the second, which is intended for professionals only.

To view to XD Wireframes, click on the tablet below:

First Wireframes

I then added icons from iconmonstr, which is a free service that offers vector images in a range of different areas from hospital to sport (iconmonstr, 2018). I started off placing them in black, but when adding colour, I downloaded new icons in the NHS blue and white. If I had more time, I would have designed the icons myself and created them on Adobe Illustrator but given the time frame and the size of the software I needed to prototype I could not find time to spend on doing the icons. Using iconmonstr meant that I could have high-quality icons without having to use images.


To view to XD Wireframes, click on the tablet below:

As I couldn’t get hold of the Frutiger font, I used Arial instead. I then added colour to the software, which was an easy process. I stuck to mainly white space with blue buttons and icons, with the text in the NHS black shade.

Coloured Interface

Applying the NHS Branding Guidelines

Although I was following the NHS branding guidelines for colour and font, I still needed to decide what to do with those colours to make the software accurately reflect the NHS brand. The first Adobe XD wireframes were in black and white with no image to start with and moving on to adding icons and information after. When it came to adding colour, I made sure I used lots of white and contrasted with the NHS blue. The first interface that I completed looked strange, so I altered the design slightly until it looked better. One of the main issues I had was the outline of each icon, which I decided to make the same thickness as the icon itself as this looked more unified.

First Interface Current Interface

For items such as ‘saved’ or ‘sent’ I used a shade of green from the NHS palette.

Green Highlight

I also used red for errors but made sure it was not emergency red that should only be used for A&E and emergency departments (NHS, 2018a).

Red Highlight

For the tutorial, I started with a turquoise colour, but realised it wasn’t really showing users what to do and not drawing their eyes to the buttons they need to press. I therefore changed the colour multiple times to purple and other opposite colours to blue. I decided on orange as I felt that this colour draws your eyes to the buttons a lot better than the other colours on the palette.

Changes to Tutorial Colours Changes to Tutorial Colours

Overall, I feel that I accurately represented the NHS colours in this software, and the questionnaire that I sent out to professionals received very good feedback on whether the software was identifiable to the NHS and that I made good use of colour.

Colour Question in Questionnaire


Adult Services at Basingstoke Hospital

To test the software I wrote out a task for participants to complete and created a questionnaire on google forms. I wanted to see if adult services would be able to use the software and whether they found it easy to use. I received helpful, critical feedback, which allowed me to change the design slightly to meet the user needs better.


Reflecting on what users said could be improved, I made some changes to the software to meet those requirements. Firstly, 'Let professionals know that you can open notes - there is nothing to indicate that you can open anything' was something very imporant that I had not considered until the software was tested. To improve on this area, I added some text to indicate to users that you can open up a note by clicking on the icon or text.

View Note Before View Note After

I also wanted to change back the filter icon to text to solve the issue of people not understanding what the icons are, however I did not have enough time. The first wireframes I did shows my initial plan of using text, but I wanted to use an icon to simplify the design. I didn't realise that I had simplified it too much.

I also wanted to make the filter function work on everything, however I did not have enough time to finish the prototype.

The best feedback I received from this questionnaire was that the participants would use the software, with one participant noting that it would 'be very useful to have everything typed and easily accessible without having to search through written notes.'

End of Year Show

At the End of Year Show, I displayed my software and spoke to fellow students and professionals about it. Although no one officially tested the software, I noticed that when people were looking at it and interacting with it, that they were getting stuck and confused on the tutorial. This was because I had set it so that the user pressed to remove the message and then they are able to press the highlighted button. I therefore removed that step and allowed users to click directly on the button. This stopped the confusion, and improved the software considerably.

End of Year Show

Collaboration Project Meeting

At the end of semester, I was invited to meet Phil Thwaites to talk about a potential project I could work on. Arriving early, I was invited to then join the HEIF workshop that was still in progress with the Collaboration project with the NHS hospital in Winchester. I presented my ideas and my software to the group of professionals, and received some positive feedback. This included a comment about my software taking an alternative approach and that the IT deparment hadn't thought about linking adult services to the main software and system used by doctors. They emphasised that speeding up discharge for elderly patients is a key issue they are currently trying to solve.


The final outcome is a Hi-Fi prototype of the software created on Adobe XD, showing an example of the types of interfaces users would see and use.

Software Overview

To view to XD Wireframes, click on the tablet below:


NHS. (2018a) Colours. [Online] Available at: (Accessed 18/04/2018)

NHS. (2018b) Fonts. [Online] Available at: (Accessed 18/04/2018)

Seabrook, M. (2018) Facebook Message to Charlotte Seabrook, 13 April. (2018) User-Centered Design Basics. [Online] Available at: (Accessed 19/02/2018)

Wilkins, B. (n.d.) ‘Sketching Interfaces: Generating code from low fidelity wireframes’, Air BnB Design. [Online] Available at: (Accessed 22/04/2018)

Yablonski, J. (2018) Laws of UX. [Online] Available at: (Accessed 19/02/2018)