Back to All Work
Government · Healthcare UX Architecture Design Systems WCAG 2.1 AA

Maryland Department of Health —
Healthcare UX System

Client
State of Maryland, Dept. of Health
Role
UI/UX Architect
Duration
August 2023 – March 2024
Platform
Web · Desktop · Tablet · Mobile

Impact at a Glance

AA WCAG 2.1 AA compliance across all healthcare applications
3 Devices, consistent UX across desktop, tablet & mobile
1 Scalable design system for reuse across MDH platforms

The Challenge

Maryland's Department of Health operates web applications serving a highly diverse public, including elderly users, users with disabilities, and non-English speakers. Applications lacked a consistent design language, had significant accessibility gaps, and were not optimised for mobile or tablet access.

"Healthcare platforms carry a higher accessibility obligation than most, failing a user who needs to access medical information is not an acceptable outcome."

UX Architecture

Defined a scalable UI system aligned to component-based architecture, from design tokens through to responsive layout patterns and accessibility standards.

Maryland DOH UX architecture diagram
UX architecture overview, design tokens, component hierarchy, and responsive system for Maryland DOH applications

My Role

Design System

Built and maintained scalable UI components supporting reusable patterns across all MDH applications.

Mobile-First Architecture

Established responsive layouts, CSS utility approach ensuring consistency from mobile to large desktop.

Accessibility Audits

WCAG 2.1 AA audits using JAWS, NVDA, Axe, AInspector, WAVE. Iterative remediation with dev teams.

Developer Collaboration

Translated UX into modular UI using HTML5, CSS3, JavaScript, and Tailwind CSS conventions.

User Research

Qualitative feedback synthesis from diverse healthcare user groups, informing design improvements continuously.

Team Mentorship

Knowledge sharing on design systems, accessibility, and UX tools with cross-functional team members.

Design Process

01
Audit

Full accessibility and design consistency audit across existing MDH applications

02
System

Built component library, mobile-first, WCAG-compliant, Tailwind-aligned

03
Test

Multi-device usability testing: desktop, tablet, mobile with diverse user groups

04
Iterate

Continuous improvement loop, research findings → design updates → developer handoff

Production screens are protected under a state government confidentiality agreement. Architecture diagrams represent the UX system approach.

Tools & Environment

FigmaAxure RPTailwind CSSHTML5 / CSS3 / SassJavaScriptBootstrapJAWSNVDAAxeAInspectorWAVE