Angel Health is a new starter company under the umbrella of Angel Solutions, an innovative technology company based in Merseyside. I was asked to work with certain stakeholders and create a new brand and website for Angel Health. 🎉
Healthlead was the chosen name from a poll we performed in-house. The main goal of Healthlead was to be an interactive data driven web tool to help explore and understand performance levels across the NHS.
NHS England measures performance through an annual assessment of every CCG (Clinical Commissioning Group) in order to see where improvements need to be made.
Healthlead has been created to give an easy-to-access, interactive toolset to explore and analyse the results from these CCGs. All of the data shown on Healthlead is exactly the same as the data which NHS England hold.
I was tasked and briefed by Angel Health’s newly appointed Creative Director and Head of Design to design the branding and website for Healthlead.
I knew I needed to perform some sound competitor analysis and collate mood boards to present to the stakeholders. I also knew that a good style kit for the website would be key for consistency and the longevity of this project.
To begin with, the site would be a simple four page website consisting of:
I knew that creating an easy to use, attractive and modern site was just as important as the user experience. We’d discussed about including micro-interactions on the homepage map as well as the dashboard pages.
Problem Statements (user, need, goal)
Creating the following problem statements for this project helped keep focus on the goals:
Mike, a Doctor of a hospital in Kent, would like to be able to find out where his hospital ranked out of all the 200 CCGs in NHS England with ‘falls in adults over the age of 65’. He would like to know if this figure has improved or worsened incase he needs to invest further training in this area to work colleagues.
Jenny, a mother of three, is researching on NHS Fylde and Wyre CCG for work and would like to simply find out what the overall rating is of this CCG as well as previous ratings and population breakdowns compared to her neighbouring CCGs.
Using lean UX research methodology, I created ‘assumption’ based personas to validate at a later date. We had researched and discussed the users of this website while compiling our problem statements. We knew that not only NHS, and care professionals would use this site to see how well their own CCG is ranking against certain metrics but we also hoped that members of the public would potentially use the site to research their own CCGs and create some comparisons.
Conclusion
Even from these quick persona mock-ups, it’s interesting to gain knowledge from our assumptions. Some of the main points raised were:
I knew that creating an easy to use, attractive and modern site was just as important as the user experience. We’d discussed including micro-interactions on the homepage map as well as the dashboard pages.
Discover the users needs
This task analysis exercise is one of a few which I produced for various scenarios from the problem statements above. In this scenario the goal was for a user to find a specific CCG region, then via the profile page choose a specific metric to see the performance on how that CCG ranked within that metric.
Conclusion
This exercise made me realise that an improvement to this goal would be to allow the user to then link directly to the league table page with these values pre-entered so that the user could compare this performance with other CCG regions. This feature will be monitored when the site is live and we can gather further user feedback.
Creating a wireflow for this project seemed like the appropriate route due to the amount of unique pages required.
I created a low fidelity wireflow to begin with so I that I could view the user journey and start working out the most appropriate interactions.
The main purpose of a wireflow is to show the journey which a typical user would experience through the product. Knowing that the homepage would house a large interactive map 🗺 with various filters like heat maps etc, I wanted to make sure that the user would be drawn to the CCG profile and league table pages just as much. These pages are more insightful and data rich for the user, the map is just a way to access these pages. Knowing this, I decided to include a pop up card when the user selects a CCG region via the map with a link to the relevant CCG page. I wanted to create two linked descriptive cards that would be placed underneath the map both detailing the functionality of these other pages.
Once the user was on the profile or league table pages I wanted them to be able change the CCG region directly on that page so that they didn’t have to travel back to the map page, that just wouldn't work. This meant that the homepage would include links to these pages but not necessarily the other way around. The burger menu or browser back link would be the main route back to the homepage.
The ‘About’ page was further down the list so that could again remain accessible via the main menu. I wanted the tutorial steps to be accessible from every page to allow users to understand the sites purpose - this will be reviewed, as the site is intuitive enough to interact with without the help for the tutorial.
Example logo variations
Typeface
Roboto
Colours
Using the data from the discover stage of the project, I created piles of sketches and drawn prototypes. Now that we had a chosen logo, I utilised these colours in the overall design of the site. Just to note, the colours on the pie chart segment of the logo represented the main branding colours from the NHS corporate branding.
Based on the ‘how might we’ points above, I knew that people would be using this site either for work or personal research purposes. Knowing this, I wanted to include a simple summary of each CCG on the homepage.
I decided to create simple stat cards that would be clickable via the interactive map (example below). The idea being that users didn’t necessarily have to click through to the profile page to view their chosen CCG profile in detail.
My aim was to keep the site vibrant and warming, so I drew some simple UI illustrations for each page. They really helped bring to life what is ultimately a data driven site, adding a touch of personality.
One of the ‘How might we’ points we developed earlier in the research stage was how we can make the site understandable to none NHS professionals. I thought as well as including tool tips next to some of the NHS language, for example ‘CCG’ or ‘Metrics’ we could include a simple tutorial that was more about why this site exists, rather than how to use it.
I felt it made sense to mention how the NHS measures performance in each CCG (Clinical Commissioning Group), and how everything is grouped into themes. I kept the design very illustrative for these tutorials so they didn’t seem overwhelming. I was keen to not make this site become complex, so designing these steps correctly was important.
The CCG profile page was an important page to design correctly. I felt that jumping straight into the charts wasn’t necessarily a good idea, so I created three summary cards that gave some basic data on the chosen CCG as a lead in. These summary cards are the ones I used on the pop up map profile cards, for the users that maybe didn’t want to see a full break down.
Each segment of the chart was clickable, with the example pop up being displayed that would show each individual metric that made up the overall percentage / count of the parent theme.
I always feel that many similar ‘about us’ pages become a little neglected. I didn’t want that to be the case here. Although the information we where displaying was typically traditional for an about us page, I still tried to create some interesting UI illustrations and icons to help keep the page looking fresh and inviting.
I really wanted to draw an illustration that gave a bit of an over-view on the website as a whole. I knew that good graphics and branding would be used via Angel Healths marketing team on social media, email campaigns etc, so it was paramount to invest the time in drawing these illustrations. ✍🏻
For the homepage map I wanted to keep it as consistent to the desktop designs as possible but to save vertical space I knew I needed to re-think a few components. 🤔
For example, I kept the heat map toggle and dropdown hidden via the chevron at the end of the search bar.
Again, for the CCG profile page I knew that to make this usable on mobile I would have to re-think the layout of some of the content. I decided to use a horizontal scroll for the card elements
I kept the bar charts the same, utilising a full page draw to display the metric info. The result definitely helped shorten the overall length of the page.
I knew it would be a little bit more tricky to have the league table working correctly on mobile. The main reason was the fact there are around 200 CCG and I was aware that this page could scroll forever!
I decided to limit the table to the main three stats:
I had the remaining stats visible via a chevron. I also decided to create an alternative, more traditional card layout that suited mobile a little better. This just allowed the user more options to really control how they view the stats.
Designing this brand and website very much reminded me of the Ticket Quarter re-design project I put together a few years ago. To gather intel via listening to the needs and goals of a project is a great responsibility for any designer. I loved every minute of this project and working so closely with the stakeholders, front and back end developers and users was a brilliant and rewarding experience.
Once launched, we will be reviewing what CCGs and metrics users are interested in as well as reviewing Hot Jar recordings. We’ve got further plans for phase 2 already. 👌
