Design Systems Case Study: Scalability & Accessibility
CVS Health
Problem
The web design system was inconsistent, making it difficult for cross-functional teams to use with confidence. Some components needed visual and functional cleanup, others lacked key features, and a few had to be built from the ground up to support new workflows and use cases.
Results
By addressing visual bugs, filling functional gaps, and introducing net-new patterns, I delivered accessible and reliable components for our product teams. This work increased adoption and trust in the system, reduced reliance on design workarounds, and enabled developers to implement components with greater ease and fewer bugs—laying the foundation for scalable, responsive patterns in future builds.
My Role
Design System Strategy, UI/UX Design, Accessibility & Developer Collaboration, Documentation & Scalable Implementation Guidance
Target Audience
Internal Design Teams (10+) & End Users engaging with consistent, accessible product experiences
File Input (Net New)
Designed a scalable file upload pattern supporting 1–4 files with dynamic UI behavior
Built-in support for default, hover, error, disabled, and success states within each file upload instance.
Included clear status messages to indicate upload progress or errors for clarity and accessibility.
Image preview was intentionally excluded based on infrastructure limitations and user research findings.
Delivered a seamless upload experience through custom styling, bypassing native browser defaults.
Step Tracker (Net New)
Designed web version to match native component behavior
Added responsive logic with max width of 640px (for 1080px layouts)
Differentiated completed and active steps using color and height
Built in constraints: 3–6 steps only, with a 10-character label minimum
Positioned infotip label using absolute logic to stay anchored to the button across responsive breakpoints.
Custom Radio (Accessibility + Token Updates)
Increased border for select and hover state from 3px → 4px for stronger visual affordance and to align with design token-based borders for consistency.
Replaced deprecated error icons with current iconography
Added missing text slots for disabled states
Fixed error state padding for better vertical alignment
Custom Checkbox (Visual Consistency + Accessibility)
Matched hover state borders with Custom Radio (3px → 4px)
Replaced deprecated error icons with current iconography
Added missing text slots for disabled states
Fixed error state padding for better vertical alignment
Important Note (Redesign + Alignment)
Added 16px rounded corners to match native styling
Replaced close icon with a text button to enhance accessibility and utilize built-in focus states.
Removed header to preserve semantic heading hierarchy
Gave teams a full background color option for both info and warning states to match visual hierarchy needs