Case Study · UX Design
A clinical platform revamp — unifying and structuring electronic health records, redesigning both Admin and Client interfaces, and achieving WCAG 2.2 accessibility compliance across the entire system.
01 — Objectives
The eight focus areas that structure this case study — from project context through to final accessibility outcomes.
02 — Overview
This application supports clinical diagnoses and improved care pathways, unifying health and care across clinical settings through effective information sharing.
It is a business-critical solution for an organisation that powers a real-time, single view of each patient — unifying and structuring clinical data into customisable virtual electronic health records.
The work covered a complete revamp of both the Admin Side (used by clinical staff to manage records, organisational units, and external system registrations) and the Client Side (patient-facing portal for searching and viewing records).
03 — Challenges & Solution
⚠ Challenge
The application was running as a self-service product for clients, but the existing build had become outdated and difficult to maintain. Navigation through the modules was complex and inconsistent — clinical users struggled to complete tasks, and the system failed multiple accessibility requirements.
✓ Solution
We set out to rebuild the platform by unifying and structuring the clinical data into a highly responsive system — with care pathways designed for operational effectiveness, simplified navigation, and WCAG 2.2 accessibility compliance baked in from the first wireframe.
04 — Roles & Responsibilities
Figma
Used for high-fidelity designs and interactive prototyping. Final UI, component library, and developer handoff specifications.
Axure RP
Used for all low-fidelity wireframing — rapid layout exploration and user flow logic before committing to visual direction.
05 — Pain Points
Research and heuristic evaluation of the existing platform surfaced four critical pain points — each one mapped directly to a redesign priority.
Complex Navigation System
Not Accessible
Lacks Breadcrumbs
Poor UX / UI
06 — Ideas to Overcome
Each pain point was met with a specific design idea — applied consistently across both the Admin and Client interfaces.
Dynamic Search
Accessible
User-centred Design
Improved Navigation
07 — High-fidelity Design Screens
Five core Admin screens were redesigned end-to-end. Each one shown below with a before-and-after comparison.
The original home page was a dense, dark-theme dashboard with redundant labels. The revamp introduces a clean light theme, removes redundancy, reorganises columns logically, and updates the header navigation.
Before — Dark · Dense
After — Light · Organised
Organisational Unit selection was buried in a flat dropdown with no search. The redesigned OU Selection adds inline notes for context and surfaces notifications to ease selection.
Before — Flat Dropdown
After — Searchable + Contextual
The Options screen previously required heavy scrolling. The redesign reorganises margins, displays data vertically to reduce scroll, and replaces the dark logo with an accessible header.
Before — Horizontal Scroll
After — Vertical
External registration was multi-step without progress or recovery. The redesigned flow groups branch functionality clearly and reduces client-server interactions.
Before — No Recovery
After — Stepped + Auditable
Role management lacked clear hierarchy and consistent search. The redesigned Roles screen brings consistent UX across role management actions and adds improved search hierarchy.
Before — Inconsistent
After — Hierarchical
08 — Client Side
Two core patient-facing screens were rebuilt with plain language, large touch targets, and full keyboard accessibility.
The patient home was previously a generic dashboard with clinical jargon. The redesigned home surfaces upcoming appointments immediately, uses plain language throughout, and meets WCAG 2.2 touch target requirements.
Before — Generic
After — Patient-first
The original search was a static field. The redesigned Patient Search uses dynamic typeahead, surfaces recent searches, and provides keyboard navigation throughout.
Before — Static
After — Dynamic
09 — Accessibility Audit
A full WCAG 2.2 accessibility audit was conducted on the legacy system. Four critical categories of failure were identified.
Orientation
Content locked to specific orientations and did not adapt for users requiring landscape or portrait modes.
Colour Contrast
Multiple text-on-background combinations fell below the 4.5:1 contrast ratio required for WCAG 2.2 Level AA.
Keyboard
Several core workflows could not be completed with keyboard alone. Focus traps blocked assistive tech users.
Multiple Ways to Navigate
No alternative navigation paths provided. Users could not reach pages through search, site map, or related links.
10 — Product Administration
The colour palette and typographic system established for the revamped product — every combination tested for WCAG 2.2 AA contrast compliance.
#1565C0
Primary Blue
#003580
Deep Navy
#0F6E56
Success Green
#C0392B
Error Red
#1C1C1C
Near Black
11 — Conclusion
Project Outcome
The project established a path to increase the product's efficiency by interacting closely with clients and using the UX/UI team to gather better feedback at every iteration.
The client site is large and complex — so rather than attempting a complete rebuild in one phase, we structured the work to revamp modules according to priority, driven by the user stories given to us. This staged approach keeps the platform stable for clinical users while accessibility, navigation, and IA improvements roll out module by module.