California DHCS Case Study
Transforming Digital Healthcare Services Through Scalable Design Systems
Project Overview
Client: California Department of Health Care Services (DHCS)
Duration: 2020-2021
Role: Lead UX/UI Designer
Team: Collaborated with three designers, 5 developers, and state agency stakeholders
The California Department of Health Care Services faced significant challenges with their digital design processes:
Collaboration Barriers: Adobe XD limitations created bottlenecks between design and development teams, extending project timelines by an average of 3 weeks
Design Inconsistency: Lack of a unified design system resulted in approximately 40% redundant design work across projects
Compliance Challenges: Inconsistent implementation of accessibility standards created potential legal exposure under state regulations
Resource Constraints: Limited state budgets required maximizing efficiency of design and development resources
User Experience Fragmentation: Citizens navigating healthcare services encountered inconsistent interfaces across different state programs
-
![]()
-
![]()
-
![]()
-
![]()
Sell it.
Discovery & Research
Conducted a comprehensive assessment of the existing design ecosystem:
Performed design system audit across 12 existing digital properties
Interviewed 8 internal stakeholders including designers, developers, and program managers
Analyzed user feedback data from 3 major healthcare portals
Conducted competitive analysis of other state healthcare systems and design system implementations
Key Insight: The transition from Adobe XD to Figma represented not just a tool change but an opportunity to fundamentally transform cross-functional collaboration and design consistency.
Design System Strategy
Based on research findings, I developed a strategic framework for the design system:
Created a design system roadmap with phased implementation priorities
Established governance principles for maintaining and evolving the system
Developed collaboration workflows between design and development teams
Defined success metrics to measure impact on efficiency and consistency
Design System Development
Implementation & Training
I led the creation of a comprehensive Figma-based design system:
Core Components: Designed 40+ reusable components with states and variants
Typography System: Created an accessible type hierarchy optimized for healthcare information
Color System: Developed WCAG 2.1 AA-compliant color palettes that maintained state branding
Spacing & Grid System: Established consistent spatial relationships across all interfaces
Documentation: Created comprehensive usage guidelines for designers and developers
Facilitated transition from Adobe XD to Figma with minimal workflow disruption
Conducted 6 training workshops for design and development teams
Created onboarding materials for new team members
Established quality assurance processes to maintain design system integrity
Developed contribution guidelines for system evolution
Results & Business Impact
The design system implementation and Figma transition delivered measurable improvements:
Design timeline reduction of 40% for new projects through component reuse and streamlined workflows
Development handoff efficiency improved by 65% through better collaboration tools and documentation
100% compliance with state accessibility requirements across all new digital properties
Design resource utilization improved by 35% through elimination of redundant work
Stakeholder review cycles reduced from 4 rounds to 2 rounds on average, accelerating approval processes
Annual software licensing costs reduced by $42,000 through consolidation on Figma platform
User satisfaction scores increased by 28% across redesigned healthcare portals
Accessibility Considerations
Accessibility was a foundational requirement for all California state digital services:
WCAG 2.1 AA Compliance: Ensured all components met or exceeded requirements
Screen Reader Optimization: Tested all components with JAWS, NVDA, and VoiceOver
Keyboard Navigation: Designed intuitive tab order and focus states for all interactive elements
Color and Typography: Implemented accessible color combinations and readable typography
Form Design: Created accessible form patterns with clear validation and error handling
Documentation: Included accessibility requirements in all component specifications
Responsive Design Approach
The design system was built to support diverse device contexts:
Mobile-First Components: Designed core components with mobile constraints as the starting point
Adaptive Layouts: Created flexible grid systems that responded to different screen sizes
Touch Optimization: Ensured adequate touch targets for mobile users
Performance Considerations: Optimized component rendering for various connection speeds
Device Testing: Validated designs across multiple devices and screen sizes