Ulta Beauty
Scaling a React component library for enterprise e-commerce with AI-accelerated QA and WCAG 2.1 AA compliance.
NDA Notice — Visuals are representative recreations. Proprietary code, component names, and internal architecture details have been omitted.
Challenge
Ulta Beauty's e-commerce platform serves millions of daily users across web and mobile. The design system team inherited a component library with no shared token architecture, inconsistent accessibility implementation, and a manual QA process that consumed 3× more engineering time than the industry benchmark.
The charter: redesign the component library from the token layer up, ship an AI-powered QA pipeline, and achieve WCAG 2.1 AA compliance across the full checkout and loyalty experience.
Design System Architecture
- Token Layer: 3-tier token system (primitive → semantic → component) built in Figma and exported as CSS custom properties + TypeScript theme objects.
- Component Library: 80+ React components documented in Storybook with controls, accessibility annotations, and design token traces.
- Figma → Code Pipeline: Automated token sync via style-dictionary; design changes propagate to codebase in one CI step.
- Dark/Light Mode: Full bidirectional theming via CSS custom properties — zero hard-coded color values in components.
AI Integration
Integrated Azure OpenAI and Azure Document Intelligence to build an automated QA pipeline that reviews component snapshots, accessibility trees, and ARIA annotations against the WCAG 2.1 specification.
The system flags regressions in color contrast, missing ARIA labels, keyboard trap issues, and focus order violations — then generates a structured remediation ticket with the specific component, token, and line reference. Human review time dropped by 60%.
Accessibility
- Full WCAG 2.1 AA audit across 200+ screens — checkout, loyalty, product discovery, and account management.
- Color contrast compliance enforced at the token level: if a token fails contrast, CI fails the build.
- Keyboard navigation and screen reader testing with NVDA, VoiceOver, and TalkBack.
- Focus management patterns standardized across modals, drawers, and carousels.
Impact
- 60% reduction in QA cycle time — from 5 days to under 2 days per sprint.
- WCAG 2.1 AA compliance achieved across the full checkout flow (0 critical violations at last audit).
- 80+ reusable components documented — onboarding time for new front-end engineers dropped by 35%.
- AI-assisted component generation reduced time-to-prototype for new features by 4×.