Case Study · Albertsons

Order Fulfillment Picking System & App

Redesigned the in-store order fulfillment picking application to solve critical usability issues that caused late deliveries and missed pickup windows — improving picking efficiency by 14% and reducing list complexity by 40%.

Role
UX / UI Designer
Company
Albertsons
Platform
Mobile (Android)
Disciplines
UI, ADA, Mobile UX
[ Drop your 3-screen mockup image here: fulfillment-hero.png ]
Home · Pick Lists (Open) · Pick Lists (In Progress)

Pickers were fighting the app, not using it.

Fulfillment managers and pickers at Albertsons stores struggled to navigate, scan, and pick orders on time. The existing app's usability issues were directly causing late customer deliveries and in-store pickup orders not ready on time — impacting customer satisfaction and operational costs.

Core issue: Slow connectivity and app failures made fulfilling orders 50% more labor intensive than necessary, turning a tool that should help pickers into one that actively slowed them down.

What was breaking the experience.

Tiny Text & Images

Small text styles, truncated product descriptions, and tiny product images made it difficult to find and differentiate items during picking.

Hidden Customer Notes

Inefficient UI layout buried critical customer notes, causing pickers to miss substitution preferences and special instructions.

Excessive Scanning Steps

The UI added unnecessary steps to scan items or totes, slowing down each pick and compounding across hundreds of items per shift.

Connectivity & Crashes

Slow in-store connectivity and frequent app failures made fulfilling orders 50% more labor intensive than it should have been.

Design for the warehouse floor, not the desk.

Every design decision was grounded in the reality of the picking environment — fluorescent-lit aisles, gloved hands, time pressure, and spotty WiFi. The goal was to strip away every unnecessary tap, maximize readability at arm's length, and surface the information pickers need exactly when they need it.

01

Field Research & Shadowing

Observed pickers in-store to understand real workflows, pain points, and workarounds they had developed to compensate for app limitations.

02

ADA Compliance Audit

Audited every screen against WCAG standards — text contrast, touch target sizes, color usage, and screen reader compatibility.

03

UI Redesign — Component Visibility

Redesigned components to increase visibility by 213% — larger text, full product images, and high-contrast layouts optimized for quick scanning.

04

List View Optimization

Decreased picking list complexity by 40% and surfaced item scanning directly to list view, eliminating unnecessary navigation steps.

05

Offline-First Architecture

Worked with engineering to implement offline-capable patterns that kept pickers productive even during connectivity drops.

[ Wireframes or early explorations ]
[ Component audit / accessibility analysis ]

An app that works as fast as the pickers do.

The redesigned app put ADA-compliant, high-visibility UI at the center of every interaction. Product images, descriptions, and customer notes are immediately visible — no drilling down, no squinting, no guessing.

Scanning was surfaced directly to the list view, eliminating the need to navigate into individual item details just to confirm a pick. The simplified pick list reduced cognitive load and let pickers focus on speed and accuracy.

213% Visibility Increase

Redesigned components with larger type, full product images, and high-contrast color system meeting WCAG AA standards.

40% Simpler Pick Lists

Streamlined list views by removing redundant information and surfacing only what's needed to pick accurately and fast.

Inline Scanning

Moved item scanning from a separate detail view to the list itself — eliminating taps and keeping pickers in flow.

Smart Status System

Clear visual differentiation between Open, In Progress, and completed orders with assigned picker names and stage-by times.

Before
After
[ Before: old UI screenshot ]
[ After: redesigned UI screenshot ]

Measurable impact on the floor.

213%
Increase in component visibility
40%
Reduction in pick list complexity
14%
Increase in picks per hour
50%
Less labor intensity (app failures resolved)

Designing for the real world.

This project reinforced that the best mobile UX design comes from understanding the physical context where the app is used. Sitting at a desk with a Figma file tells you nothing about what it's like to use a 5-inch screen under fluorescent lights with cold hands and 30 orders to fill.

The biggest wins came from the simplest changes — making text bigger, removing unnecessary steps, and putting scanning where pickers already were. Accessibility isn't a constraint; it's a design accelerator.

[Feel free to expand on these reflections with your own perspective.]

Next Project
Responsive Website Unification →