NHS COVID-19 Portal

NHS COVID-19 Portal

NHS COVID-19 Portal

Achieved a 40%+ reduction in operational costs and a 16% increase in customer satisfaction through our service redesign.

Achieved a 40%+ reduction in operational costs and a 16% increase in customer satisfaction through our service redesign.

Achieved a 40%+ reduction in operational costs and a 16% increase in customer satisfaction through our service redesign.

ROle

ROle

ROle

Product Management

Product Management

Product Mgmt

UX design

UX design

UX design

Research

Research

Research

Prototype

Prototype

Prototype

TIME

TIME

TIME

8 months 2022 - 2023

8 months 2022 - 2023

8 months 2022 - 2023

Platform

Platform

Platform

Figma

Figma

Figma

UserTesting

UserTesting

UserTesting

JIRA / Confluence

JIRA / Confluence

JIRA / Confluence

impact

impact

impact

4M+ website visits

4M+ website visits

4M+ website visits

40% cost reduction

40% cost reduction

40% cost reduction

Test success rate increased from 86.6% to 98.9%

Test success rate increased from 86.6% to 98.9%

Test success rate increased from 86.6% to 98.9%

01 BACKGROUND

Going from pandemic to endemic

In 2022, as the UK transitioned from pandemic to endemic management of COVID-19, the NHS Test and Trace programme needed to adapt to government's 'Living with COVID-19' strategy.

This shift required a reduction in testing service costs, while continuing to protect vulnerable individuals.

Graph source: https://stock.adobe.com/uk/search?filters%5Bcontent_type

02 BUSINESS GOAL

Reduce expenses and retain agility

With the end of free mass testing for all citizens and in alignment with the policy at the time, there was a need to reduce service running costs while ensuring they could be swiftly reactivated in the event of future outbreaks or pandemics.

03 USER RESEARCH

Design for All

Unlike my previous commercial projects with defined audiences, this NHS project required designing for a broad, diverse user base. The service needed to be accessible to everyone, aligning with WCAG standards. I conducted extensive user research to ensure accessibility across all user needs.

How to make sure we understand our users?

Step 1

I crafted a focused design brief and discussion guide to support a junior user researcher in the team. I shared it with the product manager and key stakeholders early on, ensuring it aligned with their understanding and priorities.

Step 1

I crafted a focused design brief and discussion guide to support a junior user researcher in the team. I shared it with the product manager and key stakeholders early on, ensuring it aligned with their understanding and priorities.

Step 1

I crafted a focused design brief and discussion guide to support a junior user researcher in the team. I shared it with the product manager and key stakeholders early on, ensuring it aligned with their understanding and priorities.

Step 2

I collaborated closely with our recruitment agency to ensure diverse user perspectives were represented. We conducted 20 user interviews (10 each) and engaged with individuals with health conditions and autism, ensuring a more inclusive approach to our research.

Step 2

I collaborated closely with our recruitment agency to ensure diverse user perspectives were represented. We conducted 20 user interviews (10 each) and engaged with individuals with health conditions and autism, ensuring a more inclusive approach to our research.

Step 2

I collaborated closely with our recruitment agency to ensure diverse user perspectives were represented. We conducted 20 user interviews (10 each) and engaged with individuals with health conditions and autism, ensuring a more inclusive approach to our research.

Who are our users?

We leveraged affinity mapping to distill key insights from all user interviews. I then translated these insights into these personas, forming the foundation of our design approach.

I also presented our findings to the wider team, ensure alignment on user needs and design direction.

User Personas

What are the user needs?

We identified and summarised our key findings into four user needs, which, along with the personas, served as anchor points for our design activities.

Clarity, Simplicity

Users need clear, easy-to-follow instructions with minimal steps.

Reassurance and Trust

Users expect secure handling of personal data, authoritative information.

Support for Vulnerable Users

Such as the elderly, less tech-savvy individuals, and people with visual disabilities.

Speed and Efficiency

The service should be fast and responsive, providing latest pandemic updates.

Key User Research Findings on Needs

04 PROBLEM SPACE

How might we reduce costs while still advocating for the best user experience in COVID-19 testing?

How might we reduce costs while still advocating for the best user experience in COVID-19 testing?

05 MY KEY CONTRIBUTION

Admin costs reduced by 40% and test upload success rate increased to 98.9%

1. What is the design about?

The NHS Test and Trace portal asks users to upload a photo of their test results, as the AI-powered digital reader can detect positive results that may be missed by the human eye.

This provides users with more accurate outcomes than relying solely on human interpretation, easing the burden on users who may be uncertain about reading their test results correctly.

Mockup of the Original Instruction Page

  1. What problem am I solving?

In the performance report I noticed that over 20% of test result images are not correctly interpreted by the system due to poor photo quality. This increases the administrative workload and leads to user frustration.

How might we reduce user errors when taking photos of test results?

How might we reduce user errors when taking photos of test results?

How might we reduce user errors when taking photos of test results?

  1. What isn't working in the current design?

Working on the NHS website required strict adherence to design systems and standards, so I conducted a heuristic evaluation of the existing page design. I also drew valuable insights from previous usability testing conducted for the entire user journey.

Hover over the design below to see issues identified.

Tap the icons below to see issues I identified.

Mockup of the Original Instruction Page

  1. How my design solution took shape

To shape my design solution, I joined the weekly tech team call where they reviewed void test upload images to identify common user mistakes.

Hover over to see how I translated these insights into the initial 'Dos' and 'Don'ts' list for my first design iteration.

Tap the icons below to see how I translated these insights into the initial 'Dos' and 'Don'ts' list for my first design iteration.

Original vs. First Iteration

First Iteration Limitations

  1. Time Constraints

  1. Content Team Availability

  1. Base for Early Feedback

I developed the first iteration quickly to meet a tight project timeline, prioritising functionality and usability over extensive refinement.

Due to limited capacity in the content team, this iteration relied heavily on text and lacked supporting visuals that could improve clarity.

I prioritised having a workable version to gather internal feedback before the formal usability testing phase, so I can have targeted improvements in the next iteration.

Before conducting full-scale testing, I carried out a small internal usability test to gather timely feedback. Below are my key takeaways that directly influenced my second interation.

Testing Feedback to Iteration

Too Text-Heavy

While the design met WCAG compliance, the amount of text should be reduced.

Lacking Visuals

After the review, the content team recognised the importance and committed to creating them.

Header Updated Needed

User now have the option to submit results without a photo so a revised header should reflect this alternative option.

Internal Usability Testing Insights

The internal usability testing allowed me to make informed design adjustments and secure buy-in from the content team on creating visuals to help users understand how to take an accurate photo. I also referenced the ‘Take a Photo’ design pattern from the UK passport service as inspiration, ensuring adherence to GOV.UK design standards.

Hover over the image below to explore the updates made in the second iteration and the rationale behind each change.

The internal usability testing allowed me to make informed design adjustments and secure buy-in from the content team on creating visuals to help users understand how to take an accurate photo. I also referenced the ‘Take a Photo’ design pattern from the UK passport service as inspiration, ensuring adherence to GOV.UK design standards.

Tap the icons below to explore the updates made in the second iteration and the rationale behind each change.

Crafting the 2nd iteration

Design evolution (original vs. iterations)

  1. How my final design hit the mark

A Clear Win! We started with A/B testing for the new design and, after seeing strong results, proceeded with a full rollout.

This iteration achieved a significant 12.1% increase in success rate. By reducing incorrect submissions, this design not only improved user experience but also decreased backend system burden, freeing up resources and lowering NHS administrative costs.

06 IMPACTS

What we delivered

We formed a multidisciplinary team—including service designers, product designers, content designers, and user researchers and collaborated closely with the NHS design team, bringing together diverse expertise to strengthen the overall effort.

Mapped Out E2E Current Services

I supported service design by mapping the end-to-end user experience into flows and service blueprints, creating a single source of truth for guiding design and decision-making.

End-to-end Service Blueprint (blurred for confidentiality)

Conducted Continuous User Research

I voluntarily supported our user research team by drafting discussion guides, taking notes during remote interviews, and coding HTML prototypes for usability testing.

Note taking board for user research and synthesis (blurred for confidentiality)

Created accessible design and prototypes

We translated user and business requirements into accessible, user-friendly journeys, following NHS Service Standards. I used my front-end development skills to build prototypes for discovery research, usability testing, and pre-delivery handoff.

Figma design workspace for team collaboration

Results

Over our 12-month engagement, we reduced costs and prioritized high-impact activities with a strong return on investment. While specific details are protected due to privacy and disclosure requirements, our efforts notably enhanced services for vulnerable user groups and those at high risk of severe illness from COVID-19.

Screen recording of part of the Test & Trace Services

07 REFLECTION

My Learnings

This project has been one of the most inspiring experiences of my career. Initially, I saw the GOV.UK website’s design as straightforward, even ‘boring.’ But as I dove into sessions observing users with accessibility needs—especially one participant with a visual impairment navigating with a digital reader—I came to understand the depth and importance behind each design choice. Witnessing how even small elements, like an input box, could lead to frustration, I gained a new perspective on accessibility and simplicity. This project taught me the true value of design’s role in empowering all users, a lesson I will carry forward.

© 2025 Yile Wang

© 2025 Yile Wang

© 2025 Yile Wang