Overview
As Experience Design Lead, I spearheaded the redesign of a legacy associate-facing fulfillment tool into a cohesive, modern platform. In tandem, I built a custom design system from the ground up to support scalable, accessible, and brand-aligned UI components across fulfillment apps.
The Challenge
• Legacy systems were complex, adapted from warehouse software, and fragmented across multiple apps.
• No centralized design language or reusable components, creating inconsistencies in UX.
• Associates struggled with long onboarding periods, inefficient workflows, and frequent order errors.
Approach
• Conducted stakeholder interviews and heuristic evaluations (scored 28/40).
• Defined two core personas (Facilitator & Shopper) to anchor redesign goals.
• Created end-to-end journey maps, MVP flows, and usability benchmarks.
• Built and maintained a scalable Design System—with reusable components, tokens, and accessibility baked in.
Design System Highlights
• Atomic Design Methodology: Built components from atoms to templates to ensure flexibility and consistency.
• WCAG Accessibility Standards: Color contrast, keyboard nav, and screen-reader support.
• Documentation + Governance: Created usage guidelines and component specs for design/engineering handoff.
• Cross-Brand Adaptability: System supported multiple grocery brands with unique visual identities.
Key Product Design Features
• Unified Dashboard: Combined key metrics like pick rate, order accuracy, and labor needs.
• Slot View MVP: Condensed order management into a single screen for speed and clarity.
• Action-Oriented UX: Easy-to-find actions (cancel, complete, print) and clean system feedback.
• Scalable UI Patterns: Bulk actions, modals, filtering, and mobile-optimized views for wrist devices.
Impact
• Enabled consistent design and faster dev cycles across the product suite.
• Reduced cognitive load and enhanced usability for essential in-store associates.
• Established a future-ready design foundation to support scale and brand expansion.
Appendix
