This is a platform that collects and presents key healthcare data for patients and providers to make informed decisions. It collaborates with private operators, NHS Digital, and experts to ensure 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
Handover
While this project followed our typical iterative process of Discovery, Research, Ideation, Design, and Validation, we had to deliver under UK's CMA deadlines and regulatory mandates.
This often required a less 'agile' waterfall sequential approach, keeping the spinning plates of two or more design cycles, — separated yet interdependent. Keeping a consistent product vision across parallel work streams relied heavily on an intersection between skill and experience.
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 (blog post).
- 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
Wire-framing a simpler search functionality
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. This search redesign has a dedicated article covering my approach in more depth.
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 modified 5Ws approach: 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
Management supported my migration 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 AAA 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.
Validation
User testing
Practitioners, medical secretaries, and administrators tested the redesigned Portal. Their feedback confirmed that stepped forms reduced errors and cognitive load.
Iterations and Refinements
Feedback led to refinements and component updates via the shared Main Library. I also advocated for future search enhancements on the Website to improve usability while ensuring privacy and data security.
