The NHS App
The NHS App is the leading healthcare app in the UK, with over 20 million users. With such a large user base, the app has a variety of different user needs it must meet to ensure that everyone can navigate through the app to the services that they need.
To meet this high standard, the app requires a strong and well-documented design system so that each screen can be designed optimally, both for the designers and the end users. To make this happen, I was asked to be part of the team re-designing the current design system, with the aim of producing a usable, detailed design system that enhances the current app experience and accelerates design and development effort.
Project length: 8 weeks - ongoing
Role: Visual Designer
With thanks to Katy Oldfield, George Rowe, Max Rickards & Lauren Ball
Our design requirements:
-
Design the styles, components, and patterns needed to fulfil the information architecture changes
-
Optimise the information organisation and visual design across all components
-
Enhance the user experience, referring to WCAG Accessibility guidelines throughout
The NHS App is technically not an app - it’s web-based code that is compressed into a mobile wrapper. As a result the codebase has limitations in functionality, where the lack of NHS funding paired with the rush to integrate COVID-19 services in the app in 2020 contributed to the design system being broken and the NHS App feeling out-of-touch with modern medicine. The ask of our team was to re-work this design system specifically for mobile, on a separate document from the live design system, building accessibility into the core of our designs and following best practise to document our work.
To ensure my understanding of such a technical project, I undertook extensive research into the architecture of the app and the impact this had on the both design and functionality. This involved conducting User Research sessions from both our user groups - the designers using the Design system and the users of the NHS App.I drew out the relevant pain points from previous User Research to collate assumptions to be used in our own, Visual Design focussed, UR sessions for NHS App users. Meanwhile, the team also conducted UR sessions for each design team within the NHS to identify their pain points from using the current design system.
Findings from these sessions, as seen above, informed the foundations and shaped the team’s designs, fuelling us to create a better app experience that’s inclusive to all.
Ways of working
To underpin the UX and UI, I also took ownership of the Service Design flow, creating a user journey map highlighting the touch points for both local and international fans. This was vital for communicating with our stakeholders the various features we intended to offer with our app and how they would benefit LCFC fans globally.
Inclusivity was at the heart of this app. The ‘Virtual Viewing’ feature was created specifically to allow all fans to access the experience of being in the stadium. Users can watch the game live on their phones, minimise the view to chat with fans anywhere in the world, or interact with the gamification feature, all without leaving the LCFC app.
Accessibility
Starting with the LCFC blue, I generated a darker shade to add depth, allowing for a sleek and sophisticated dark mode app. Designing in dark mode allowed us to use the LCFC brand colours in a way that is in-line with competitor apps, while also meeting colour contrast guidelines. The darker shade of blue I created contrasts the primary blue, helping to create a clear hierarchy and sense of depth, while also allowing the app to integrate the LCFC brand at every level.
According to colour theory, yellow or gold is associated with success or winning. To utilise this association and add depth to the experience, I added a gradient on top of the primary LCFC yellow to give this 'golden' feeling to the app's buttons and in-app notifications
Component Design
To create a meaningful, user-centred experience, I designed a personal progress tracker as part of the LCFC Academy. This enables anyone anywhere in the world to view their tailored stats and goals within their own personal profile. The skills profile is tailored to the end user, displaying trend-led tutorials and elements of gamification to engage and inspire their fan base, while visually illustrating their progress through the LCFC Academy.
On a similar note, I designed a seat locator for the in-stadium journey that directs users to their seats, contributing to a seamless and personalised experience.
The Response
I knew that the most immersive way to present my concepts and allow the client to visualise the end result, would be by creating a fully clickable prototype that they could interact with on their own phones. This was time consuming, but I am delighted that I took that initiative as it really allowed the client to understand the depth of the designs and to depict their intention clearly.
Leicester City Football Club were thrilled with the end result, and the depth of research and understanding of their needs that the team and I undertook. Collectively, we will be moving forward with the contract due to sign in 2023.
On a personal level, I loved being able to explore design from Service to UX and UI, from problem solving and generating concepts to implementing my visuals was a huge learning opportunity. I hugely enjoyed being able to follow a design through, bringing the ideas to life and re-affirming my interest in visual design as a career path I want to continue to follow.
Reflections
I completed this project just 3 months into my internship at IBM iX, and I am exceptionally proud of what I was able to achieve. Since then I have massively improved my design skills. As always there are now many areas I would have approached differently, with the subsequent 10 months of experience.
One example is that I wouldn't use a blue or yellow background on cards, as it made it hard to separate the information from the background.
Since this project, I have gained knowledge on the importance of designing accessibly and testing colour contrasts, along with the value of introducing brand authentically - bringing in elements that enhance the experience rather than dominating it.
