Wayfair · UX & Systems Designer · 2023

Wayfair: Operational Mapping System

Building a multi-surface design system for a 150,000 sq. ft. flagship launch under real operational constraints.

Role
UX & Systems Designer
Tools
Adobe InDesign, Google Slides, Figma
Timeline
6 months
Context
Physical retail · Live store environment
The Problem
Existing store maps were created ad hoc by an ops employee in Google Slides with no design system, no consistent visual language, and no spatial context: no doors, elevators, entrances, or surrounding department references. Associates had no reliable way to orient themselves or verify placements across a 150,000 sq. ft. space during a time-critical flagship launch.
The Fix
Built from scratch in InDesign with character styles, department color mapping, and spatial context landmarks. When leadership required a format the whole org could edit, I migrated to Google Slides with three system rules to preserve fidelity. Then prototyped a mobile app vision — collapsing the map and inventory into one tool — as a pitch to leadership.
The Result
A standardized mapping system covering 28 maps and 26 departments, adopted as the primary navigation and execution tool by hundreds of employees before and after the grand opening of Wayfair's first retail flagship in Chicago.
Wayfair operational mapping system — mobile prototype mockups

Learning how the store actually worked

I had already built a first draft of the mapping system in InDesign before visiting the Chicago store. The site visit was meant to validate the work and understand the environment firsthand. What I found instead reshaped the entire direction.

Every existing map faced a different direction. Associates would pick one up, scan it, then spend several seconds physically rotating it to match their position in the store. During a high-pressure launch with hundreds of placements to execute, those seconds added up to real errors and real delays.

That single observation became the design foundation for everything that followed: every map in the system would be locked to the perspective of someone walking in from the main entrance — the way associates actually entered and moved through the space.

Building in InDesign

My manager asked me to build the mapping system in Adobe InDesign. I built it from scratch with character styles, department color mapping, templated layouts, and spatial context landmarks designed to work across print, web, and Zebra handheld devices. Navigation was significantly faster and the format was far more professional than what existed.

But the same constraint emerged quickly: the rest of the team couldn't edit InDesign files, which meant all content updates bottlenecked through me. Scalable design, but not a scalable system.

Migrating to Google Slides

Leadership required a format the broader organization could access and edit without specialist software. I migrated the entire system to Google Slides, preserving as much design system fidelity as possible under that constraint.

To maintain quality I established three core system rules:

Rule 1
Department Locator Keys
A mini-map on every slide to show exactly where the associate was standing in relation to the rest of the store.
Rule 2
Predefined Color Styles
A consistent, accessible color language designed to work for both screen and print, ensuring sufficient contrast while supporting rapid, error-safe updates as the layout changed.
Rule 3
Standardized Labeling
Clear, uniform naming conventions across the entire store to ensure every team was speaking the same language.

Together these rules made the system fast to update, easy to understand, and reliable under constant change. Most importantly, I locked the visual orientation of every map to match the exact perspective an associate has when walking in from the main entrance, eliminating the reorientation friction that was costing time and causing errors under pressure.

Before and after comparison of the Wayfair store mapping system — ad hoc Google Slides vs the redesigned system with spatial context, color coding, and department locator keys
Before & after: the original ad hoc map (no spatial context, inconsistent orientation) vs the redesigned system with department locator keys, predefined color styles, and a locked entrance perspective.

Building the future vision

Once the immediate system was stable, my manager asked me to draft a mobile app concept to pitch to leadership — a vision for what a native tool could unlock beyond static maps.

The design decisions came directly from what I had observed on the floor. Associates were constantly cross-referencing between the map and a separate inventory document to verify what belonged in each zone. That two-document workflow was the friction point. So the prototype collapsed it into one: tapping a zone surfaces live inventory for that exact location, with color-coded status badges showing stock levels at a glance.

The goal wasn't to build something polished. It was to make the operational case concrete enough for leadership to understand what a connected tool would actually change about how the team works.

Mobile app prototype demonstrating live inventory integration and scalable layout behavior
Prototype demonstrating live inventory integration and scalable layout behavior, built for a leadership pitch, not engineering handoff.

Designing for real-world data & handoff

To make this system scalable beyond static maps, I designed the interface to behave predictably under real data conditions and support clean engineering handoff. To cover 150,000 square feet, the UI had to be modular, built using structured layout rules so that variable data like product names, quantities, and statuses could scale without breaking the UI.

This made it easier for engineering to map real inventory data into the system without introducing inconsistencies.

Component breakdown showing modular layout system designed for variable real-world data
Component breakdown: structured layout rules ensure the interface holds up regardless of data length or content type.

A stopgap that became the standard

By focusing on how the store team actually worked rather than just making a pretty map, we established a primary navigation and execution system for the grand opening. What started as a stopgap solution became the foundation for how the team navigates and executes in-store. Associates no longer had to stop and orient themselves.

28
Maps — each representing a unique layout with operational dependencies
26
Departments managed through a consistent visual language
1,200+
Individual placements verified and executed
100s
Of employees using it as the primary tool pre and post-launch

The tool matched how associates moved through the store, allowing them to focus on execution instead of navigation. The system scaled beyond launch and into ongoing operations.

What I'd do differently

The biggest constraint on this project wasn't design. It was tool access and time. Building the system in InDesign first, then migrating it back to Google Slides under launch pressure, meant some of the design system's fidelity got lost in translation. If I were starting today, I'd push earlier for alignment on the final delivery format before investing in a tool that leadership would later require us to move away from.

I'd also formalize the research phase earlier. The on-site observations I made were valuable, but they happened organically rather than as a structured process. A brief structured research sprint at the start, even just a few hours of shadowing associates, would have surfaced the spatial context gaps faster and given me a clearer brief to design against from day one.

That said, shipping a system that held up under real operational pressure, across multiple surfaces, during a live flagship launch, is something I'm proud of. The maps worked when it mattered.