82%
Abandonment Reduction
Application abandonment dropped from 68% to 12%—an 82% improvement meaning 56% more residents now successfully complete healthcare tasks
Lake Bluff, IL/
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
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 14.5 million Californians—including 5.2 million children, 3.8 million seniors, and 2.1 million residents with disabilities. The existing ecosystem was in crisis: application abandonment rates reached 68%, page load times averaged 8 seconds, 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 $2.3M+ 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 847 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 wave-based migration (50 → 75 → 75 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 14.5 million 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. Average page load times exceeded 8 seconds, with some applications taking 15+ seconds to render. Mobile users—disproportionately low-income residents accessing services from phones—experienced broken layouts across 60% of applications. Most critically, 847 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—averaging 4 hours per component versus 2.4 hours with standardized components. The state was hemorrhaging resources: $1.2M annually in redundant design work, $800K in accessibility remediation costs, and $300K in extended training time for state employees navigating inconsistent interfaces. Support ticket volume averaged 12,000 monthly, with 34% 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 847 WCAG violations across ecosystem
- •Analyzed 18 months of support tickets (216,000+ 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
Portal audit revealing 23 inconsistent button styles
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 wave-based deployment (50 → 75 → 75 applications)
- •Created documentation templates for component usage, accessibility requirements, and developer handoff
Artifacts
Form component exploration with accessibility states
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
Provider dashboard prototype with design system
Patient management prototype with accessible forms
Eligibility verification flow prototype
05
Testing
I led comprehensive testing across three dimensions: usability testing with 60+ 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 10 applications before enterprise rollout. The results validated our approach: task completion rates improved from 32% to 88% on pilot applications, screen reader users could now complete all critical tasks (up from 34% success rate), and page load times dropped from 8 seconds to 1.8 seconds.
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 performance improvements: page load times dropped from 8s to 1.8s
- •Documented task completion rate improvement from 32% to 88% on pilot applications
- •Confirmed screen reader task completion rates increased from 34% to 89%
Artifacts
Benefits summary tested with assistive technologies
Application workflow usability testing results
06
Implementation & Rollout
I led the wave-based migration strategy, rolling out the design system across 200+ applications in three phases to ensure zero service disruption. Wave 1 migrated 50 high-priority applications, Wave 2 added 75 applications incorporating lessons learned, and Wave 3 completed the remaining 75 applications with optimized patterns. 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 50 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 of 75 applications with optimized process (30% faster than Wave 1)
- •Completed Wave 3 migration of remaining 75 applications with refined patterns
- •Established design system governance model for ongoing maintenance and evolution
- •Created contribution guidelines enabling teams to propose new components
Artifacts
Production implementation of accessible document upload
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 wave-based migration strategy (50 → 75 → 75) 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
Provider dashboard featuring real-time data visualization and accessible design patterns
Streamlined eligibility verification reducing completion time by 40%
Benefits summary with screen reader optimized data tables
Before & After
Before
After
Before · Legacy System
Fragmented ecosystem with 200+ inconsistent applications, 8-second load times, and 847 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
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 14.5M residents
100%
WCAG Compliance
Achieved 100% WCAG 2.2 AA compliance across all 200+ applications, eliminating 847 accessibility violations that blocked residents with disabilities
77%
Performance Improvement
Page load times decreased by 77% from 8 seconds to 1.8 seconds through cloud-native architecture and optimized components
$2.3M+
Annual Value
Generated $2.3M+ in annual value: $1.2M design efficiency, $800K accessibility savings, $300K reduced training costs
89%
Screen Reader Success
Screen reader task completion rates increased from 34% to 89%—enabling 2.1M 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
Portal homepage with design system implementation
design
Accessible form patterns with validation states
design
Provider dashboard with design system
design
Patient management interface
design
Eligibility verification flow
design
Benefits summary with accessible tables
design
Accessible data table patterns
design
Multi-step application workflow
design
Accessible document upload component
design
Cloud migration performance dashboard
design
Provider directory with search filters
design
Appointment scheduling calendar
design
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
- Wave-based migration strategy (50 → 75 → 75 applications) enabled zero-downtime transformation while serving 14.5M 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 14.5M 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 $1.2M annually in design efficiency alone
- Accessibility must be engineered into component architecture from Day 1—our proactive approach achieved 100% WCAG compliance versus $800K+ in reactive remediation costs
- User research with vulnerable populations reveals critical insights—60+ hours with residents with disabilities uncovered 847 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
- Wave-based migration strategies minimize risk—our 50 → 75 → 75 approach enabled lessons learned from each wave to improve subsequent phases by 30%
- Government technology can be modern, accessible, and user-centered—$2.3M+ annual value and state recognition proved public sector transformation is possible