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

NYC Department of Education
Enterprise UX Architecture

Client
State of New York, Dept. of Education
Role
UI/UX Architect
Duration
April 2024 – April 2026
Stack
Figma · Angular · Tailwind CSS · Azure DevOps

Impact at a Glance

1 Unified design system across all platform applications
100K+ Educators & administrators served statewide
AA WCAG 2.1 AA compliance across all components

The Challenge

New York State's education platform had grown independently across multiple teams, resulting in fragmented design patterns, accessibility failures, and no shared component framework. Engineering teams were rebuilding the same UI components in every sprint.

"Multiple applications, each built independently, educators encountered a completely different interface depending on which module they opened."

My Role

Design System Leadership

Built component library, variants, states, and accessibility specs, aligned to Angular architecture.

Accessibility Governance

WCAG 2.1 AA audits using JAWS, NVDA, Axe, WAVE. Remediation roadmaps embedded in Agile delivery.

UI Architecture Standards

CSS conventions using Tailwind utility principles, consistent spacing, layout, and responsive behaviour.

Team Mentorship

Mentored engineers and designers on design system adoption, Tailwind patterns, and accessibility practices.

Mobile-First Architecture

Responsive UI framework ensuring consistent experience across desktop, tablet, and mobile breakpoints.

Architecture Reviews

Conducted UI reviews across each release, catching performance, usability, and accessibility issues pre-launch.

Design System, Component Architecture

The system was built as a single source of truth, from design tokens to Angular components, ensuring every team built from the same foundation.

Design System, Component Library
Design Tokens
Color Typography Spacing Shadow Border Radius
Atoms
Molecules
Organisms
AA
WCAG 2.1 AA compliance built into every component from day one

How I Approached It

01
Audit

Full UI pattern audit across all applications, cataloguing inconsistencies and accessibility gaps

02
Architect

Defined design tokens, component hierarchy, and Angular-aligned CSS conventions

03
Govern

Established UI review checkpoints in Agile sprints, preventing drift before it reaches production

04
Enable

Mentored teams on adoption, building institutional capability, not just deliverables

Production screens are protected under a state government confidentiality agreement. Design system artefacts and architecture documentation available upon request under NDA.

Tools & Environment

FigmaAxure RPTailwind CSSAngularJAWSNVDAAxeWAVEAzure DevOpsMicrosoft 365