This platform collects and presents key healthcare data for patients to make informed decisions; collaborating with private providers, NHS Digital, and experts to enable and measure better patient outcomes and improved service performance.
This abridged article gives an overview of a wider case study. Its Private Section (linked below) covers other in-depth topics under NDA. Contact me for confidential access if you haven't already.
Password-protected section - request access
UX Performance Impact
- Proposed UX improvements of search functionality contributed to maintaining 20,000+ monthly visitors and nearly 500K annual users.
- Redesigned fee and practitioner profile presentation to better serve the 97-98% patient user base.
- Improved portal data submission workflows, enhancing data quality and addressing user feedback about profile gaps.
- Both patient-facing interfaces and provider data collection processes benefited from this process.
Handover
While this project followed our typical iterative process of Discovery, Research, Ideation, Design, and Validation, delivering under UK's CMA deadlines and regulatory mandates required a less 'agile', more waterfall approach.
Throughout these cycles, my purview was:
- Expert UX+UI audit, competitor / marketing analysis of healthcare information platforms, identifying UX benchmarks and WCAG accessibility compliance gaps, with a focused study on web-based search interfaces.
- Fast-paced Discovery, Ideation, wire-framing with stakeholders and internal clients.
- Assisted all three Engagement Teams in User Research, focusing on coordinating effective research strategies and interpreting findings.
- Provider-facing Portal updates: The data-gathering service needed immediate attention to comply with CMA mandates.
- Website redesign, spread through a whole year, requiring coordination with various stakeholders and staged implementation.
- Design System Overhaul from Sketch to Figma while bringing UI consistency across multiple products and versions.
To make inherited UI libraries more structured and scalable, I implemented a fully integrated Atomic Design System. This methodology, a standard for creating modular and reusable UI libraries, ensured alignment with branding guidelines and accessibility standards.
To illustrate, let's look at colour, a seemingly minor detail but with a widespread impact. — Below, I documented the process of integrating the legacy palette of 1 primary colour and 3 secondary with a 60-30-10 rule and running it through a Swatches algorithm like Google Material's.
Discovery phase
The data-gathering side of this service consisted in complex roles each with different user permissions (Practitioners, Medical Secretaries, Hospital Administrators, and Anaesthetists).
- User Permission matrix showing relationships (e.g., MedSecs administering multiple Practitioner profiles)
- Practitioner Onboarding with regulatory verification requirements
- Multi-stage publishing workflows for data validation and release
This analysis highlighted user needs and friction points across both platforms. The Portal in particular demanded a lot from users of varying tech literacy, while patients needed a smoother search experience.
Design Stage
Prototyping a simpler search
Analysis of the current search mechanics
PHIN's website search functionality warranted an UX audit of the current feature and a redesign to reduce complexity. To better illustrate this solution, I coded a a prototype on Cursor, which I analyse in more dept here.
The search bar is positioned for at the bottom optimal ergonomic access, while location detection utilised IP-based geolocation by default, with optional refinement via postcode or map pin drop. This aimed to reduce cognitive load for patients while simplifying the path to relevant information.
Data standardisation and form improvements
For a more consistent column ordering and information hierarchy across the Portal, I proposed and iterated with medical advisors a structure inspired by the journalistic 5Ws: First when, then who, what, and how. This established documentation for best practices in table design, reducing cognitive load across tables.
For practitioner's data submission, I designed a stepped "wizard" form with progressive disclosure. This received praise both from stakeholders and end users who found it dramatically improved their task completion time.
Visual design
With Management's support, I migrated from Sketch to Figma, which enabled a unified Master Library serving two existing products: The patient-facing website and a provider-oriented portal.
I also introduced a new type scale inspired by GOV.UK design standards, enhancing visual hierarchy and laying groundwork for future WCAG-compliant accessibility improvements. The challenge was creating a design system that catered to two different frontend frameworks (React/MUI and Svelte) while gradually bringing their visual languages closer together.
