California DHCS

Vision 2025: Enterprise Design System & Cloud Migration

Role
Senior UX Designer & Design System Lead
Timeline
Jan 2023 - Mar 2024
Team
Cross-functional team of 12 with product managers, engineers, accessibility specialists, and California state stakeholders
Tools
Figma, Design Systems, User Research, Prototyping, Accessibility Auditing, JAWS/NVDA/VoiceOver, Usability Testing, Stakeholder Facilitation
California DHCS Healthcare Portal showing unified design system serving millions of residents
Case Reader
Senior UX Designer & Design System Lead

California DHCS

Evidence Snapshot

01SignalProblem context
02ApproachSystem move
03OutcomesMeasured proof
Signal

California DHCS faced a healthcare technology crisis threatening service delivery to millions of the state's most vulnerable residents.

Approach

I established a scalable enterprise-wide design system featuring 200+ accessible Figma components, comprehensive documentation, and migration patterns that transformed DHCS's fragmented ecosystem into a unified, accessible healthcare platform.

Outcomes
Abandonment Reduction
82%
Application abandonment dropped from 68% to 12%—an 82% improvement meaning 56% more residents now successfully complete healthcare tasks
Design Time Reduction
40%
Design task completion time decreased by 40%, reducing average component design from 4 hours to 2.4 hours across 12 teams
Applications Migrated
200+
Successfully migrated 200+ legacy applications to cloud-native infrastructure with zero critical service interruptions for millions of residents
Figma
Design Systems
User Research
Prototyping
Accessibility Auditing

Executive Summary

As the Senior UX Designer and Design System Lead for California DHCS's Vision 2025 Cloud Transformation, I directed UX strategy for migrating 200+ legacy applications to cloud-native infrastructure while maintaining uninterrupted healthcare services for millions of Californians across vulnerable populations. The existing ecosystem was in crisis: application abandonment rates reached 68%, page load times were slow, 60% of applications had broken mobile layouts, and thousands of residents with disabilities couldn't complete essential healthcare tasks due to accessibility violations accumulated over 15+ years of technical debt. I established a scalable enterprise-wide design system in Figma featuring 200+ accessible components that reduced design task time by 40%, drove application abandonment from 68% to 12% (an 82% improvement), and achieved 100% WCAG 2.2 AA compliance across all migrated applications. The transformation generated millions in annual value and earned state-level recognition for process optimization excellence—demonstrating that government technology can be modern, accessible, and truly user-centered.

My Role

  • •Directed UX strategy for Vision 2025 cloud migration of 200+ legacy healthcare applications
  • •Established and maintained enterprise-wide design system with 200+ accessible Figma components
  • •Led comprehensive accessibility audit identifying hundreds of WCAG violations across legacy applications
  • •Reduced design task completion time by 40% through systematic component architecture
  • •Collaborated with 12 cross-functional teams on prototype testing and iterative design refinement
  • •Ensured WCAG 2.2 AA compliance throughout phased migration across hundreds of applications
  • •Led successful transition from Adobe XD to Figma, training 35+ designers and developers
  • •Facilitated weekly stakeholder reviews with California state healthcare leadership
  • •Created comprehensive component documentation enabling 6-month enterprise-wide adoption
  • •Conducted user research with residents including those with disabilities, non-English speakers, and seniors

The Challenge

The Problem

California DHCS faced a healthcare technology crisis threatening service delivery to millions of the state's most vulnerable residents. The Vision 2025 initiative demanded migrating 200+ legacy applications to cloud-native infrastructure—but these applications had accumulated 15+ years of technical debt, creating a fragmented ecosystem that was actively harming the people it was meant to serve.

User Impact

The human cost was devastating. Application abandonment rates reached 68%, meaning two-thirds of residents attempting to access healthcare benefits gave up before completing essential tasks. Page load times were slow, with some applications taking many seconds to render. Mobile users—disproportionately low-income residents accessing services from phones—experienced broken layouts across 60% of applications. Most critically, hundreds of accessibility violations prevented thousands of residents with disabilities from completing tasks like verifying eligibility, scheduling appointments, or uploading required documents. Seniors struggled with small text sizes and confusing navigation, while non-English speakers encountered inconsistent translation support. Every day, Californians who needed healthcare services the most were being turned away by the very systems designed to help them.

Business Impact

The operational impact was equally severe. With no unified design system, each application migration required custom design work—significantly more time per component versus standardized components. The state was hemorrhaging resources: millions annually across redundant design work, accessibility remediation costs, and extended training time for state employees navigating inconsistent interfaces. Thousands of monthly support tickets flooded in, with a significant portion related to usability issues rather than actual policy questions. The fragmented ecosystem also created compliance risk, as HIPAA and state accessibility mandates required systematic remediation rather than piecemeal fixes.

Constraints

Technical constraints included maintaining zero-downtime integration with legacy mainframe systems, supporting 12 languages for California's diverse population, and ensuring HIPAA compliance for protected health information throughout migration. Regulatory constraints required achieving WCAG 2.2 AA accessibility standards, maintaining ADA Section 508 compliance, and adhering to California state design guidelines. Organizational constraints included coordinating across 12 cross-functional teams with varying technical maturity, managing stakeholder expectations for aggressive migration timeline, and transitioning from Adobe XD to Figma without disrupting active development.

Process

01

Research

I led comprehensive research across the DHCS ecosystem, auditing 200+ applications and interviewing 45+ stakeholders including state employees, healthcare providers, and residents. The research revealed a fragmented landscape: 23 different button styles, 18 form input patterns, and 12 navigation structures across applications that should have been unified. Most alarmingly, accessibility audits using JAWS, NVDA, and VoiceOver identified 847 distinct WCAG violations—from missing alt text on 2,400+ images to keyboard traps that completely blocked screen reader users from completing critical healthcare tasks.

Key Activities

  • •Audited 200+ legacy applications for UI patterns, accessibility violations, and technical debt
  • •Conducted 45+ stakeholder interviews with state employees, healthcare providers, and residents
  • •Performed comprehensive accessibility audit identifying hundreds of WCAG violations across ecosystem
  • •Analyzed months of support tickets (hundreds of thousands of tickets) to identify usability pain points
  • •Reviewed HIPAA requirements, state design guidelines, and WCAG 2.2 AA standards
  • •Conducted contextual inquiry with residents including seniors, non-English speakers, and users with disabilities
  • •Documented 23 different button styles, 18 form patterns, and 12 navigation structures requiring consolidation
  • •Mapped user journeys across 15 most critical healthcare workflows (eligibility, enrollment, provider search)
  • •Benchmarked against federal healthcare.gov and other state healthcare portals

Artifacts

California DHCS portal homepage audit showing existing UI patterns and accessibility findings

Portal audit revealing 23 inconsistent button styles

Component breakdown analysis of existing landing page structure

Component inventory from legacy application audit

02

Synthesis

I synthesized research findings into a unified design system strategy built on three core principles: accessibility-first (making it impossible to build non-compliant interfaces), consistency-by-default (reducing cognitive load for both users and designers), and progressive disclosure (surfacing complexity only when needed). The strategy defined a component architecture covering 15 healthcare domains, from eligibility verification to provider search, with every component engineered for WCAG 2.2 AA compliance from the ground up.

Key Activities

  • •Defined enterprise design system architecture covering 15 healthcare service domains
  • •Created component taxonomy consolidating 23 button styles into 5 semantic variants
  • •Established accessibility-first design principles ensuring WCAG 2.2 AA compliance by default
  • •Prioritized 200+ components by usage frequency, accessibility impact, and migration priority
  • •Defined design tokens for colors (meeting 4.5:1 contrast ratios), typography, spacing, and motion
  • •Created information architecture supporting 12 languages and right-to-left text direction
  • •Mapped component dependencies and migration sequencing for wave-based deployment
  • •Established documentation standards enabling self-service adoption across 12 teams
03

Ideation

I explored design system structures from atomic design to domain-specific component libraries, ultimately selecting a hybrid approach that balanced flexibility with consistency. The solution featured semantic component variants (primary/secondary/destructive actions) rather than visual variants, ensuring accessibility and brand alignment across all implementations. I led collaborative design workshops with engineering to validate technical feasibility and ensure components could be built once and deployed everywhere.

Key Activities

  • •Explored atomic design, domain-specific, and hybrid component library structures
  • •Led 8 collaborative design workshops with engineering validating technical feasibility
  • •Created component prototypes testing accessibility, usability, and performance
  • •Designed 5 semantic button variants replacing 23 inconsistent legacy styles
  • •Developed form patterns with inline validation, error states, and screen reader announcements
  • •Created data table components with accessible sorting, filtering, and pagination
  • •Designed responsive patterns ensuring mobile-first experience for low-income residents
  • •Established migration patterns for phased deployment across hundreds of applications
  • •Created documentation templates for component usage, accessibility requirements, and developer handoff

Artifacts

Accessible form design exploration showing input validation patterns and error states

Form component exploration with accessibility states

Data table component ideation with accessible sorting and filtering patterns

Accessible data table pattern exploration

04

Prototyping

I built a comprehensive Figma design system featuring 200+ reusable components, each with detailed documentation, accessibility specifications, and usage guidelines. Every component was engineered for WCAG 2.2 AA compliance: 44px minimum touch targets, 4.5:1 color contrast ratios, focus indicators meeting 3:1 contrast, and screen reader optimization with proper ARIA attributes. The system included 50+ responsive patterns, 25+ form components, 15+ data visualization elements, and complete design tokens for colors, typography, spacing, and motion.

Key Activities

  • •Built 200+ reusable Figma components covering all healthcare UI patterns
  • •Engineered accessibility into every component: 44px touch targets, 4.5:1 contrast, ARIA patterns
  • •Created 50+ responsive patterns optimized for mobile, tablet, and desktop experiences
  • •Developed 25+ form components with validation states, error handling, and help text
  • •Built 15+ data visualization components for healthcare metrics and reporting
  • •Established design tokens for 8 color scales, 6 typography levels, and 12 spacing values
  • •Created interactive prototypes demonstrating complete user journeys for stakeholder validation
  • •Developed migration templates enabling rapid application redesign
  • •Built component playground for engineering to explore interactions before implementation
  • •Created accessibility annotation layer documenting ARIA requirements for each component

Artifacts

Healthcare provider dashboard prototype with data visualization using design system components

Provider dashboard prototype with design system

Patient information management interface prototype showing accessible form patterns

Patient management prototype with accessible forms

Medi-Cal eligibility verification interface with streamlined workflow

Eligibility verification flow prototype

05

Testing

I led comprehensive testing across three dimensions: usability testing with dozens of residents (including seniors, non-English speakers, and users with disabilities), accessibility validation with JAWS, NVDA, and VoiceOver screen readers, and pilot migrations testing the design system on initial applications before enterprise rollout. The results validated our approach: task completion rates improved significantly on pilot applications, screen reader users could now complete all critical tasks (up from low success rates), and page load times dropped dramatically.

Key Activities

  • •Conducted usability testing with 60+ residents across diverse demographics
  • •Performed comprehensive accessibility testing with JAWS, NVDA, and VoiceOver screen readers
  • •Tested keyboard navigation patterns with users who rely exclusively on keyboard input
  • •Piloted design system on 10 applications in Phase 1 proof of concept
  • •Validated 44px touch targets with users with motor disabilities
  • •Tested 4.5:1 color contrast with users with low vision
  • •Conducted multilingual testing across 6 most-used languages (Spanish, Chinese, Vietnamese, Korean, Tagalog, Armenian)
  • •Gathered feedback from 12 cross-functional design and engineering teams
  • •Validated significant performance improvements in page load times
  • •Documented significant task completion rate improvement on pilot applications
  • •Confirmed screen reader task completion rates increased dramatically

Artifacts

Healthcare benefits summary page tested for accessibility with screen readers

Benefits summary tested with assistive technologies

Multi-step application workflow tested for task completion and error recovery

Application workflow usability testing results

06

Implementation & Rollout

I led the phased migration strategy, rolling out the design system across 200+ applications in three waves to ensure zero service disruption. Each wave migrated a batch of high-priority applications, incorporating lessons learned from previous phases. Throughout rollout, I facilitated weekly stakeholder reviews, conducted design QA on migrated applications, and iterated on components based on real-world implementation feedback.

Key Activities

  • •Led Wave 1 migration of high-priority applications serving most residents
  • •Facilitated weekly stakeholder reviews with California state healthcare leadership
  • •Conducted design QA on migrated applications ensuring design system fidelity
  • •Iterated on 35+ components based on real-world implementation feedback
  • •Created migration playbooks documenting lessons learned from Wave 1 for subsequent waves
  • •Trained 35+ designers and developers on Figma design system usage
  • •Led Wave 2 migration with optimized process (significantly faster than Wave 1)
  • •Completed Wave 3 migration of remaining applications with refined patterns
  • •Established design system governance model for ongoing maintenance and evolution
  • •Created contribution guidelines enabling teams to propose new components

Artifacts

Document upload interface showing accessibility features implemented in production

Production implementation of accessible document upload

Cloud architecture dashboard showing system health and performance metrics post-migration

Performance monitoring dashboard post-migration

Solution

I established a scalable enterprise-wide design system featuring 200+ accessible Figma components, comprehensive documentation, and migration patterns that transformed DHCS's fragmented ecosystem into a unified, accessible healthcare platform. The system encoded accessibility requirements directly into components—making it impossible to build non-compliant interfaces—while reducing design task time by 40% through systematic reuse. The wave-based migration strategy ensured zero service disruption while achieving 100% WCAG 2.2 AA compliance across all 200+ applications.

Key Features

  • •200+ reusable Figma components covering all healthcare UI patterns with built-in accessibility
  • •Accessibility-first architecture with 44px touch targets, 4.5:1 contrast, and ARIA patterns
  • •50+ responsive patterns ensuring mobile-first experience for low-income residents
  • •25+ form components with validation states, error handling, and screen reader announcements
  • •Design tokens for 8 color scales meeting contrast requirements across all states
  • •Comprehensive documentation enabling self-service adoption across 12 teams
  • •Migration templates reducing application redesign time by 40%
  • •Component playground for engineering to explore interactions before implementation
  • •Multilingual support for 12 languages including right-to-left text direction
  • •Governance model ensuring consistent evolution and maintenance

Design Decisions

  • •Chose accessibility-first architecture encoding WCAG requirements into component structure
  • •Selected semantic button variants (primary/secondary/destructive) over visual variants for accessibility
  • •Implemented progressive disclosure reducing cognitive load while maintaining access to complex features
  • •Chose Figma over Adobe XD for better collaboration, accessibility plugins, and developer handoff
  • •Designed mobile-first responsive patterns prioritizing low-income residents accessing via phones
  • •Built inline form validation with screen reader announcements for real-time error feedback
  • •Created phased migration strategy across hundreds of applications ensuring zero service disruption
  • •Established design token system enabling consistent theming and future accessibility improvements
  • •Prioritized component reusability over custom solutions reducing design time by 40%

Key Design Artifacts

Healthcare provider dashboard with data visualization

Provider dashboard featuring real-time data visualization and accessible design patterns

Medi-Cal eligibility verification interface

Streamlined eligibility verification reducing completion time by 40%

Healthcare benefits summary with accessible tables

Benefits summary with screen reader optimized data tables

Before & After

Redesigned California DHCS portal with unified design system
Legacy California DHCS portal with inconsistent UI patterns
Before
After

Before · Legacy System

Fragmented ecosystem with 200+ inconsistent applications, slow load times, and hundreds of accessibility violations blocking residents with disabilities.

68%Abandonment Rate
8 secPage Load Time
32%Task Completion
34%Screen Reader Success

After · Unified Design System

Enterprise-wide design system with 200+ accessible components, 1.8-second load times, and 100% WCAG 2.2 AA compliance.

12%Abandonment Rate
1.8 secPage Load Time
88%Task Completion
89%Screen Reader Success

Results

82%
Abandonment Reduction

Application abandonment dropped from 68% to 12%—an 82% improvement meaning 56% more residents now successfully complete healthcare tasks

40%
Design Time Reduction

Design task completion time decreased by 40%, reducing average component design from 4 hours to 2.4 hours across 12 teams

200+
Applications Migrated

Successfully migrated 200+ legacy applications to cloud-native infrastructure with zero critical service interruptions for millions of residents

100%
WCAG Compliance

Achieved 100% WCAG 2.2 AA compliance across all 200+ applications, eliminating hundreds of accessibility violations that blocked residents with disabilities

Significant
Performance Improvement

Page load times decreased dramatically through cloud-native architecture and optimized components

Millions
Annual Value

Generated millions in annual value across design efficiency, accessibility savings, and reduced training costs

Dramatic
Screen Reader Success

Screen reader task completion rates increased dramatically—enabling millions of residents with disabilities to access healthcare services

175%
Task Completion Improvement

Overall task completion rates improved from 32% to 88%—a 175% increase ensuring more residents receive healthcare benefits

Design Artifacts

California DHCS portal homepage showing clean, accessible design and unified design system

Portal homepage with design system implementation

design
Accessible form design showing input validation and error handling patterns

Accessible form patterns with validation states

design
Healthcare provider dashboard with data visualization using design system components

Provider dashboard with design system

design
Patient information management interface using accessible design patterns

Patient management interface

design
Medi-Cal eligibility verification interface with streamlined workflow

Eligibility verification flow

design
Healthcare benefits summary page with accessible data tables

Benefits summary with accessible tables

design
Data table with accessible sorting and filtering patterns

Accessible data table patterns

design
Application workflow with progress indicators and step navigation

Multi-step application workflow

design
Document upload interface with accessibility features

Accessible document upload component

design
Cloud architecture dashboard showing system health and performance metrics

Cloud migration performance dashboard

design
Provider search and directory interface with filtering options

Provider directory with search filters

design
Appointment scheduling interface with calendar integration

Appointment scheduling calendar

design
Design system component breakdown view of landing page structure

Landing page component architecture

design

Reflection

What Worked Well

  • Accessibility-first design system architecture made it impossible to build non-compliant interfaces, achieving 100% WCAG compliance versus reactive remediation
  • Phased migration strategy across hundreds of applications enabled zero-downtime transformation while serving millions of residents continuously
  • Comprehensive user research with 60+ residents including those with disabilities revealed critical pain points that surveys alone would have missed
  • Close collaboration with engineering from Day 1 ensured technical feasibility and reduced implementation friction by 30%
  • Semantic component variants (primary/secondary/destructive) created intuitive patterns that both designers and developers understood immediately
  • Documentation-first approach enabled 12 teams to adopt the design system within 6 months without dedicated training sessions

Challenges Overcome

  • Migrating 200+ applications without disrupting 24/7 service availability for millions of residents required meticulous planning and rollback strategies
  • Consolidating 15+ years of technical debt while maintaining backward compatibility with legacy mainframe systems
  • Balancing enterprise design system consistency with application-specific healthcare domain needs (eligibility vs. provider search vs. claims)
  • Training 35+ designers and developers across 12 cross-functional teams on new Figma-based system while maintaining active development
  • Ensuring accessibility compliance across all 200+ applications while meeting aggressive migration timeline
  • Managing stakeholder expectations from multiple state agencies with competing priorities and varying technical maturity

What I'd Do Differently

  • Would conduct even more extensive user testing with residents with disabilities earlier in the process—some edge cases only emerged during Wave 2 migration
  • Would involve engineering team in component architecture decisions from Week 1 rather than Week 3—earlier collaboration would have prevented 2-3 component redesigns
  • Would create more application-specific component variants upfront (eligibility vs. provider search patterns) to accelerate domain-specific migrations
  • Would establish design system governance model earlier—contribution guidelines should have been ready before Wave 1 to capture team innovations systematically

Key Takeaways

  • Design systems are transformative for enterprise-scale migrations—40% time reduction proved the value of systematic approach, saving significantly in design efficiency alone
  • Accessibility must be engineered into component architecture from Day 1—our proactive approach achieved 100% WCAG compliance versus significant reactive remediation costs
  • User research with vulnerable populations reveals critical insights—extensive testing with residents with disabilities uncovered hundreds of violations that automated tools missed
  • Documentation is a product, not an afterthought—comprehensive documentation enabled 12 teams to adopt the system within 6 months without dedicated training
  • Phased migration strategies minimize risk—our wave-based approach enabled lessons learned from each phase to significantly improve subsequent phases
  • Government technology can be modern, accessible, and user-centered—millions in annual value and state recognition proved public sector transformation is possible
Continue Reading

More Case Studies