4:58 PM

4:58 PM

Grocery Outlet

Enterprise UX Transformation & Design System Governance

Backend UI/UX

Retail

Enterprise Systems

Design Systems

Data Visualization

Overview

Grocery Outlet operates a national network of independently owned stores powered by multiple internal systems. When I joined, these digital tools were inconsistent, disconnected, and lacked a shared UX foundation. My charter was to modernize the end-to-end experience, create scalable design standards, and embed UX into the organization’s operating model.

Challenge

Years of team-specific development had resulted in fragmented experiences, competing design patterns, and accessibility gaps. Beyond aligning the visuals, we needed to create a repeatable UX framework – one that could scale across both internal and consumer platforms while remaining compliant and measurable.

Approach

I established Grocery Outlet's UX operating model from the ground up, defining design principles, governance, and the company's first enterprise design system. Beyond UI consistency, I introduced UX Acceptance Testing (UXAT) as a release gate, giving product teams a repeatable process for validating usability and accessibility before deployment. I partnered with engineering, product, marketing, and business stakeholders to align priorities, standardize decision making, and position UX as a strategic function rather than a downstream service.

Design system documentation and governance were maintained in Zeroheight, connected directly to Figma. Zeroheight's AI capabilities kept documentation automatically updated as components changed, giving engineering and design a reliable, current source of truth without manual upkeep.

Outcome

The transformation was guided by a clear set of principles that shaped both strategy and execution. Consistency and clarity were essential for unifying fragmented patterns and creating a shared design language. Compliance and accessibility ensured every product adhered to ADA, WCAG, and privacy standards. Efficiency and governance centered on developing reusable systems, reducing redundancy, and establishing a culture of accountability through defined UX processes. UXAT became a required release gate adopted across three product teams, with engineering and QA both building it into their standard workflow before any deployment. Finally, insight-driven design connected analytics and usability testing directly to decision-making, allowing each release to be informed by data rather than intuition.

METRICS AND RESULTS

METRICS AND RESULTS

• 25 % faster design-to-development turnaround through component reuse, measured across 6 sprints.

• 40% fewer post-release accessibility issues following the introduction of UX standards and UX Acceptance Testing..

• Defined analytics roadmap now used to measure UX health across platforms.

25%

Faster

Design-to-development turnaround through component reuse, measured across 6 sprints.

40%

Fewer

post-release accessibility issues following the introduction of UX standards and UX Acceptance Testing.

25%

Faster

Design-to-development turnaround through component reuse.

25%

Faster

Design-to-development turnaround through component reuse, measured across 6 sprints.

40%

Fewer

post-release accessibility issues following the introduction of UX standards and UX Acceptance Testing.

A semantic color system that assigned distinct palettes to each merchandising department, improving recognition and consistency across complex enterprise workflows

A semantic color system that assigned distinct palettes to each merchandising department, improving recognition and consistency across complex enterprise workflows

Standardized status indicators and metadata labels designed to communicate product, workflow, and operational states.

Comprehensive button system documenting variants, states, sizes, and icon treatments to ensure consistent interactions across products.

Comprehensive button system documenting variants, states, sizes, and icon treatments to ensure consistent interactions across products.

Redesigned order guide that helps buyers evaluate capacity and product performance within a single workflow.

Redesigned order guide that helps buyers evaluate capacity and product performance within a single workflow.

Product detail updates based on user feedback that centralizes inventory, pricing, and operational data for faster merchandising decisions.

Product detail updates based on user feedback that centralizes inventory, pricing, and operational data for faster merchandising decisions.

Scheduling interface optimized for managing warehouse appointments with filters, status visibility, and operational planning tools.

Scheduling interface optimized for managing warehouse appointments with filters, status visibility, and operational planning tools.

High-density purchase order management table redesigned from the ground up for efficient sorting, filtering, and bulk operational tasks.

High-density purchase order management table redesigned from the ground up for efficient sorting, filtering, and bulk operational tasks.

MORE WORK

MORE WORK

Title
Title