Improving UX for the public sector

Responsive UI design, information architecture and UX improvements for public sector healthcare body.

Client

The National Institute for Health and Care Excellence/Department of Health

Scope

User experience design, user interface design, wireframing, prototyping, responsive web design, design patterns

Background

NICE provides a wealth of advice and guidance to the NHS and people using public health and care services. Collaborating with users, stakeholders and agile teams, I took a steer on user experience, site structure and UI design to help deliver a responsive, mobile-friendly product.

Challenges

The existing NICE guidance website had dated, offered no support for mobile devices, and needed to reflect its new role and responsibilities for social care and associated guidelines. Additionally, user and stakeholder feedback highlighted several key areas for improvement:

  • Serve relevant guidance to multiple audiences, including doctors, healthcare professionals, commissioners and anyone involved in care provision
  • Improve the information architecture and site structure to make finding guidance an easier, helpful experience
  • Establish meaningful signposting for content buried in deep hierarchies
  • Create a responsive UI to deliver a consistent product that works for all audiences and devices

Ultimately, guidance is there to inform the decision-making process for its users. Presenting that information in a clear, helpful and discoverable way – regardless of device or platform – is key to helping them find the guidance they need.

Approach

Analytics provided useful insights into how users navigate and interact with guidance, their journey, and subsequent dropoffs against the existing solution. To underpin why, stakeholder workshops and user interviews were carried out – establishing key journeys, requirements and pain points.

Along with field team data, enquiry handling data and stakeholder feedback, several personas were developed to help define and promote audience types across product teams.

Highlighting user needs, goals and frustrations, personas provided a constant focal point

Using these findings, card-sorting exercises were carried out to restructure journeys and establish meaningful groupings of information, with the goal of helping to guide users to their specific area of interest.

Process

Ideation

Based on the discovery phase, I starting out with rapid iterations of lo-fi sketches, and later moving to wireframes and hi-fi interactive prototypes for user testing and validation.

Initial lo-fi sketches establishing key journeys
Initial lo-fi sketches establishing key journeys
Wireflows communicating interaction between screens
Wireflows communicating primary user journeys and interaction between screens

Testing

On the basis of finding guidance to drive this exercise — be that via search, status, topic, date, grouping, or exploring the content hierarchy — tasks were carried out by users, designed to capture feedback and inform decisions.

Design

Following iterations of wireframes and prototypes with users and stakeholders, I moved into UI and visual design, refining and making considerations for mobile to desktop form factors.

There’s an old adage that web design is 95% typography. That is very much the case for NICE – aside from using iconography to add affordance, text is the user interface. With that in mind, using vertical rhythm and baseline grids to drive a consistent UI was vital.

To move away from the ‘desktop’ UI, a responsive pattern library was created. Taking a cue from the likes of Bootstrap, this encouraged designers and developers to quickly build ‘predictable’ and reusable components.