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.
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.
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.
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.
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.
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.
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.