Public Service Design
NHS Digital DSC
Data Security Centre — Cyber Security Platform
Overview
A government-standard data security platform for NHS Digital, built to WCAG 2.1 AA accessibility and GDS design principles.
A redesign grounded in accessibility, research and GDS standards, serving four personas across NHS trusts.
Role
Lead UX/UI Designer
Platform
Web Application
Client
NHS Digital
Tools
Figma, FigJam, User Research, GDS Toolkit, HTML, SASS, JS, Git
Team
PM, 2 Engineers, UX Researcher, Accessibility Specialist, Designer
Impact
WCAG 2.1 AA
Accessibility Standard
GDS Compliant
Government Standards
4
User Personas Tested
95%
Task Success Rate
01 — Discovery Research
DSC Customer Experience Future Map
A discovery-phase experience map of urgent, reactive and proactive needs across touchpoints.
02 — Accessible Data Security Pathways
Clear, accessible routing for data security incidents
GDS-aligned interaction patterns
Incident, enquiry and training flows follow Government Design Standards.
WCAG 2.1 AA compliance
Keyboard navigation, colour-independent information and accessible forms.
Usability-tested pathways
Every path validated with NHS staff, usable under stress.
03 — DSC Hub Platform
A unified hub for cyber security intelligence and support
Real-time threat intelligence
Alerts with severity levels and guidance, for rapid response.
Service discovery and metrics
Support, training and assessments with NHS-wide impact metrics.
Case studies and peer learning
NHS organisations share their journeys, peer to peer.
04 — GDS Prototype Toolkit
Rapid prototyping in code using the GOV.UK Prototype Kit
Key journeys were prototyped in the GOV.UK Prototype Kit, giving production-faithful prototypes for research with NHS staff.
Built with GOV.UK Frontend — real govuk- CSS classes, not mockups
Nunjucks macros for govukTaskList, govukRadios, govukButton components
Multi-journey routing for A/B prototype variants across user personas
Session data defaults for realistic pre-populated staff flows
Deployed locally for unmoderated testing without engineering resource
05 — Accessibility Audit
WAVE audit — 9.9/10 AIM Score, zero errors
WAVE testing confirmed zero errors and zero contrast errors, an AIM score of 9.9/10 and 18 accessibility features.
0
Errors
0
Contrast Errors
9.9
AIM Score
18 accessibility features — alt text, form labels, skip links, and landmark regions
28 structural elements — correct heading hierarchy throughout
37 ARIA attributes — roles, labels, and controls properly implemented
3 minor alerts (skipped heading level, noscript) — no blocking issues
Manual testing conducted alongside automated audit per WCAG guidance
Summary
Overview
A GDS-compliant, WCAG 2.1 AA data security platform for NHS incident reporting.
Challenge
Unclear pathways, poor accessibility and jargon delayed critical incident response.
Solution
Accessible pathways, plain language and keyboard navigation — 95% task success, 40% faster.
Key Results
06 — User Testing
Research-led validation with NHS staff across multiple trusts
Trust staff in operational, clinical and strategic roles, recorded in Lookback.
Lookback session recording
Replays turned hesitation points into evidence stakeholders could see.
Structured task questionnaire
Scenario tasks paired success rates with confidence ratings.
A/B prototype variants
Variant B's service grouping beat A across all four personas.
Key Outcomes
95%
completed reporting unaided
Variant B
navigation adopted across all four personas
4 critical
blockers fixed before any production code
Jargon
the top barrier — plain language cut errors
All 4
personas completed their journeys
Methodology
Design System
Built on the Government Design System
Every component was grounded in GDS principles — accessibility, consistency and trust.
Colour Palette
NHS Blue
#005EB8
Primary brand, CTAs, links, navigation elements
NHS Dark Blue
#003087
Headers, hover states, high-contrast text
NHS Mid Grey
#425563
Body text, secondary labels, icons
NHS Light Grey
#F0F4F5
Page backgrounds, card surfaces, dividers
NHS Green
#007F3B
Success states, confirmation messages, positive alerts
NHS Red
#DA291C
Error states, critical alerts, destructive actions
NHS Yellow
#FFB81C
Warning states, caution banners, advisory notices
White
#FFFFFF
Content backgrounds, form fields, modal surfaces
Typography Scale
48px / 700w
Display Heading
Page titles, hero headings — desktop
32px / 700w
Heading 1
Section titles, major content headings
24px / 700w
Heading 2
Sub-section headers, card titles
20px / 700w
Heading 3
Panel titles, grouped content labels
18px / 400w
Body (Lead)
Introductory text, key information paragraphs
16px / 400w
Body
Standard body copy, form labels, descriptions
14px / 400w
Caption / Small
Helper text, metadata, timestamp labels
Core GDS Components
Error Summary
Top-of-page container linking to each invalid field.
Radios & Checkboxes
Large targets (44×44px min) with labels always visible.
Warning Callout
High-contrast yellow banner with an ARIA role.
Summary List
Key-value review pairs with inline edit links.
Tag / Status Badge
Colour-coded status indicators with text labels — never colour alone — meeting WCAG 1.4.1.
Step-by-step Nav
Left-rail numbered list showing progress.
"Chris transformed how NHS organisations access cyber support — engagement is up and support workload down."
James Mitchell
Project Manager, NHS Digital Data Security Centre