Established a unified design system across Albertsons' web properties — aligning team nomenclature, UI components, and process between UX, design, and development to create consistent customer experiences and cut front-end production time in half.
During the site unification effort, a style guide had been established — but it wasn't enough. Components and page layouts were rendered inconsistently across the full site experience. Customers would interact with the same component on different pages and get different visual treatments and behaviors.
This inconsistency created confusion, eroded trust, and led to site abandonment. Internally, UX designers and front-end developers had no shared source of truth — they were building the same components differently, with no process to stay aligned.
The same UI component displayed and behaved differently depending on which page or section it appeared on.
UX comps, production code, and the style guide were disconnected — leading to drift between what was designed and what was built.
Users encountered different experiences using the same components across pages, causing confusion and site abandonment.
Developers and designers were rebuilding the same components from scratch for each page, with no reusable system to draw from.
The fix wasn't just a better style guide — it required establishing a living design system with code-backed components, a shared process for updates, and tools that both designers and developers could use as their daily source of truth.
Led audit of every production UI component — comparing live display and behavior against original UX comps to catalog all inconsistencies and drift.
Defined the canonical display and behavior for each component — creating the single source of truth for how every element should look and function.
Developed production-ready source code for each component and uploaded into the development repository — making the design system code-first.
UX team created a design system library that directly references the source code components — ensuring visual specs and live code stay permanently linked.
Established the process for updating existing and creating net-new design system components between UX and development teams — ensuring the system stays alive.
The design system wasn't just documentation — it was a connected ecosystem of tools that served every role in the product team. Each tool referenced the same underlying components, ensuring that what designers spec, what developers build, and what customers see are always the same.
A live reference site where developers can browse components by category (Colors, Fonts, Buttons, Cards, Forms, Grids, etc.), search by CSS selector, switch themes, and copy production-ready HTML directly into their projects.
A cloud-based design library for UX designers and architects that mirrors the code components 1:1 — ensuring design specs always match what's in the repository.
A documented governance workflow for proposing, reviewing, and publishing component updates or net-new additions — keeping UX and development in sync.
Cloud library
Cross-team
Dev repository
Copy & integrate
All store sites
Key insight: The design system succeeded because it wasn't just a library — it was a process. By connecting the UX library directly to source code and establishing governance for changes, the system stayed alive and accurate instead of becoming another outdated style guide.
By aligning design, development, and process under a single system, teams could ship faster, customers got a consistent experience regardless of which page or store site they visited, and the organization had a scalable foundation for future product work.
The biggest lesson from this project was that a design system without governance is just a style guide with a better name. The technical work — auditing components, writing code, building libraries — was the easy part. The hard part was getting two teams with different tools, timelines, and incentives to adopt a shared process for how components get created, updated, and retired.
The theme builder was the catalyst that drove adoption. When developers could search for a component, copy clean HTML, and integrate it in minutes instead of hours, the system sold itself. The lesson: meet people where they work.
[Feel free to expand with your own reflections.]