Problem definition

Packers Were Lost in the Labyrinth

Our legacy packing tools were the root of the problem, slowing down 300+ packers. Here's what we were up against:

• Frustration Station: A maze of information made it tough for packers to quickly find what they needed.

• Engineering Overload: Maintaining three different codebases was draining time and resources, hindering development.

• Costly Consequences: This mess was driving up labor, shipping, and error-handling costs, putting a dent in the bottom line.

Measuring success

A lever for packing efficiency

Our goal wasn't just a redesigned tool; we aimed to boost packer efficiency, consolidate systems, and ultimately cut fulfillment costs. Our key metrics:

1. Units Packed per Hour (UPH)

2. Tool Adoption Rate

3. Training Hours for New Packers

Physical workflow

Where the Physical Meets the Digital

Before diving into pixels, I led a workshop with stakeholders to map out the existing packing process. Visualizing the real-world workflow helped us pinpoint which data was crucial for the new tool. 

Design skeleton

Reinventing the interaction model

After exploring various interaction concepts and weighing pros and cons, Option C emerged as the clear winner. Its open right-hand column for item cards and fixed progress bar improved navigation and layout clarity. The two vertical modules also created a clear hierarchy to convey progression and scannability. 

Usability testing

Getting first-hand feedback from warehouse packers

I led a warehouse research trip, conducting usability tests with packers and their supervisors. Even our PM got in on the action by moderating a session! A follow-up workshop ensured we were all aligned on the insights gained. Key insights we learned:

• Scan and Done: Designed clear visual cues to show an item's scan status — waiting, partial, or fully scanned.

• Microcopy Matters: Partnered with a content strategist to refine error messages. Even in digital frustration, clear guidance wins the day.

Design iteration

Scanning item interactions

I designed clear visual cues to show an item's scan status — waiting, partial, or fully scanned.

Content iteration

Error Messages: Crafting Clarity Through Collaboration

Great error messages don't just point out problems — they offer solutions. I partnered with our content strategist to ensure messages were both accurate and actionable. Testing with the packing team revealed a surprising number of barcode edge cases, so I created a comprehensive resource document. This became our shared guide for tracking copy iterations and gathering feedback, ensuring clear communication and a smooth packing experience. 

Design impacts

Designing for Scalability

• One Tool, Limitless Potential: We plan to integrate this new packing tool with automation tools, streamlining even more packing workflows.

• Design System Trailblazer: My vertical progress bar became a reusable component in Wayfair's design system, influencing the company's evolving design language.

Outcomes

“The new tool is working fantastic and we love it!”

• 30% increase in pack efficiency (UPH)

• No special training needed — new packers got up to speed quickly

• Developer time slashed by 40%

• Special shoutout in the company-wide CEO email

Reflections

Bridging the Physical and Digital Worlds

• Domain Knowledge = Design Empathy: Learning how associates interact with boxes, cartons, and their workspace fosters empathy and drives design decisions.

• Physical Awareness Guides Digital Design: Understanding real-world limitations and packer terminology helps me create intuitive and efficient user interfaces.

• Simplicity Wins: Clean UIs with essential information empower packers with accuracy and speed. Consistent layouts and components reduce mental load.