Unified Design System
Department
Albertsons – IT Merchandising
Role
Scope
Impact
Executive Snapshot
Role
Director, UX Product Design & Innovation — Design System Owner. Established UDS as an internal product platform with shared design + engineering foundations, not just a Figma library. Drove multi-POD adoption through reusable components, templates, governance, and documentation.Mandate
Modernize Merchandising UX, reduce tech debt, and give all PODs a single standard for UI, accessibility, and performance—while building a blueprint designed to scale across the broader Albertsons ecosystem.Key outcomes
• Shifted UDS from an optional library to the default build path for Merch POD delivery.
• Established governance, documentation, and QA/audit practices to protect consistency as the system scaled.
• Used V1 adoption learnings to define the V2 modernization backlog (parity, tokens, responsiveness, AI-ready foundations).
• 20+ teams across 14 business units onboarded to UDS components and templates.
• 76% reduction in supplier onboarding SLA (21 → 5 days), 23% error reduction, +15 NPS when applied to the Merchant & Supplier Portal.
• $500K+ hard savings per year supported by an internal UDS chargeback model.
• 30%+ engineering velocity gains on teams fully adopting UDS.
Problem Statement
Fragmented POD front-ends drove tech debt, inconsistent UX, and costly rebuilds.
Before UDS, Merch experiences were built across varied stacks, patterns, and UI approaches. This fragmentation created inconsistent user experiences, increased maintenance costs, and forced teams into repeated rebuild cycles for features that should have been reusable. The organization needed a standardized, scalable system that could unify delivery across POD teams without slowing innovation. • Inconsistent UI patterns across PODs increased tech debt and rework.
• Limited reuse created longer cycles for common workflows.
• Fragmented documentation and standards increased onboarding friction.
• Lack of shared foundations reduced confidence in cross-team consistency.
Operating Model
Scope, Delivery & Governance
• Owned the Merch UX platform operating model for UDS across PODs, including intake, prioritization, stage gates, OKRs, and value-realization reporting.
• Led a 25+ person cross-functional delivery model spanning Product Design, UX Systems, Research, Front-end/Back-end Engineering, Data Science/Analytics, Product Management, and Scrum; instituted a unified cadence across PODs.
• Secured executive alignment and long-range capital planning; maintained a self-funded model through an internal chargeback approach.
• Chaired the Design System Council and cross-business working groups for tokens, governance, and accessibility to ensure scalable standards and consistent adoption.
Strategy & Architecture
Foundations
UDS v1 established the foundational rules that standardized how Merch experiences were designed and built. Defined UDS as Merchandising’s core UI/UX resource—a Lego-like system of reusable, modular building blocks for internal software. These foundations created the single source of truth for consistent component construction and predictable UI evolution across POD teams. • Standardized foundations across color, typography, spacing, grid behaviors, icons, shadow, elevation, motion, shape, and layout rules.
• Enabled consistent component construction using shared foundation logic.
• Reinforced design-to-dev clarity through documented usage patterns.
• Positioned foundations as the backbone for scalable templates and feature growth.
Tokens, Themes & Agentic AI
UDS v2 modernization built directly on proven v1 foundations and adoption learnings. The focus shifted from foundational standardization to an automation-ready, token-driven architecture that improved parity between design and code, enabled scalable theming, and introduced AI-assisted acceleration of design-to-development workflows. • Implemented a design tokens pipeline using Tokens Studio + Style Dictionary, wiring tokens into the code architecture to support scalable theming and reduce design-to-dev drift.
• Built an agentic AI-assisted design-to-code pipeline (Locofy + Cursor): Figma tokens → React/Storybook components → versioned packages with unit & visual regression tests; reduced design-to-dev handoff time by ~35% and PR rework by ~18%.
• Introduced AI-enabled acceleration patterns to increase consistency and speed for token-compliant UI assembly across POD teams.
Components & Templates
UDS v1 introduced a reusable component ecosystem designed to reduce redundancy and improve delivery speed across Merch applications. The library was structured as modular building blocks that allowed POD teams to assemble complex workflows without reinventing UI. • Built reusable components derived from standardized foundations.
• Organized the library in a scalable hierarchy: foundations → primitives → compound components → templates.
• Established a component-first model to replace pod-specific UI solutions.
• Delivered product templates for core enterprise patterns (full-width content, forms with right rail, calendars, dashboards).
• Reduced rework by narrowing the gap between Figma intent and production behaviors.
Governance & Audit
Governance, QA & Dev Audit
UDS was managed as a living product with structured governance to prevent bloat, protect UX consistency, and prioritize high-impact POD needs. Quality was reinforced through repeatable audit standards that validated parity across design intent, implementation, and cross-browser performance. • Formalized a component lifecycle: request/RFC → UX/accessibility review → dev implementation → QA checks → release → telemetry and deprecation.
• Prioritized POD requests based on business impact and sprint capacity.
• Maintained a future-focused backlog to keep foundations ahead of “nice-to-haves.”
• Defined audit checklists across typography, layout/spacing, color systems, form behaviors, icons/images, and micro-interactions.
• Published the UDS Documentation Website as the single front door for standards, usage patterns, and release updates—reducing onboarding friction and enabling more self-serve adoption.
BUILT A QA & DEV AUDIT FRAMEWORK FOR:
• Typography (headers, paragraphs, text links, states).
• Layout & spacing (grids, overlap checks, responsive behavior).
• Colors, form elements, images/icons, micro-interactions, and animations.
• Documentation system integration (Figma, Storybook, Confluence, Airtable, release notes).
Roadmap & Impact
Adoption, Roadmap & Organizational Impact
With v1 adoption proving value in production, the roadmap shifted toward formalizing the next generation of UDS foundations and expanding the system’s enterprise readiness. The strategy prioritized high-impact components, theming improvements, a stronger documentation platform, and a demo path that made adoption easier and more self-serve.• Positioned UDS as Merchandising’s core UI/UX resource and articulated the business case for design systems (consistency, efficiency, cost control, and scalable delivery).
Documented epics and roadmap for:
• UDS Core Components
• UDS 2.x Themes Update
• UDS Website
• UDS Demo App
Prioritization:
• Defined a prioritization model across MSP PODs, Collective Hub needs, and the UDS backlog to keep high-impact work ahead of “nice-to-haves.”
Flagship Use Case
Merchant & Supplier Portal (MSP) as Flagship Use Case
Before UDS:
• Fragmented supplier workflows across SharePoint, email, and legacy tools triggered long onboarding SLAs and manual rework.
After UDS:
• MSP rebuilt on UDS templates and components—global navigation, data-dense dashboards, task lists, and workflows sharing the same grid, patterns, and foundations.
Measured impact:
• 76% SLA reduction (21 → 5 days), 23% error reduction, +15 NPS—proof that UDS moved real business metrics, not just UI consistency.
Leadership value:
• MSP became the proof-point used to secure continued investment and expand adoption into additional PODs.
"We made UDS feel like a product, not a side project."
