Nike By You Laboratory

The real problem

The surface problem was a failing technology stack. The deeper problem was what that failure cost every day: customization engineers working around a system that corrupted data, forced manual reconciliation, and provided no early warning when a configuration was heading toward a production error. A misconfigured product doesn't just look wrong — it creates downstream manufacturing and fulfillment failures that are expensive to fix and impossible to reverse after a global launch.

The new platform also had to be extensible enough to support a future transition from 2D to 3D product visualization — without requiring a rebuild when that transition came. That meant making architectural decisions at the start that wouldn't be visible to users for years.

• Hard 18-month deadline driven by Adobe Flash end-of-life — externally imposed, non-negotiable
• Complex dependency logic across materials, colors, components, and factory constraints
• High cost of configuration errors — a mistake caught after launch is a crisis, not a fix
• Single designer responsible for 5 interconnected applications simultaneously
• Must support 2D today and 3D tomorrow without a platform rebuild

Designing for constraints, not just creativity

Nike By You looks like a creativity tool from the outside. From the inside, it's a constraint management system. Every customizable option — every color, material, swoosh placement, sole — exists within a web of manufacturing rules, pricing dependencies, and factory capabilities. The internal tool has to make those constraints manageable without making the work feel constrained.

The Question/Answer tree was the core structural decision. Rather than presenting engineers with an open configuration canvas, the system walks them through a structured decision sequence — Upper, Swoosh Type, Swoosh, Second Swoosh Placement, Foxing — each answer narrowing the valid options for the next. Constraints surface early, when they're cheap to resolve. Not late, when they're expensive.

The Validation layer was the final guardrail — an automated checklist that runs before any builder version publishes. Codemaker mappings, ZOrder data, 3D material assignments, BOM connections — all verified systematically, with specific error messages that tell engineers exactly what's wrong and where. On a platform supporting Nike's customization business globally, this layer isn't optional. It's the difference between a clean launch and a production incident.

The work before the work

The Nike By You platform is a constraint management system disguised as a creativity tool. Understanding those constraints — hundreds of Q/A dependencies, manufacturing rules, market variations — required mapping them before designing anything. These artifacts show the structural thinking that preceded every screen.

Full workflow map — every task, every question

The complete NBY Lab workflow mapped end-to-end before a single screen was designed. Yellow headers define the major workflow stages — finding products, creating prebuilds, grouping, editing, releasing, publishing. Teal notes capture every discrete task. Pink notes flag every open question that needed an answer before design could proceed. This map became the shared reference for the entire product team.

Split-panel concept — the core structural decision

The earliest sketch of what became the defining NBY Lab interaction pattern: Preview on the left, Build on the right. This structural decision — separating the consequence from the configuration — shaped every screen that followed. Drawn before Figma was opened.

Q/A tree structure — mapping constraints as guidance

The Question/Answer hierarchy mapped before it was built — groups, answers, and the dependency relationships that determined what options were valid at each step. The separate constraint diagram for Laces shows the domain complexity that had to be understood before the interface could make those constraints feel navigable rather than overwhelming.

How we got there

I started by embedding with the customization engineers — learning their workflows, their tools, their workarounds, and the specific moments where the old system broke down. The design wasn't built around abstract user stories. It was built around real failure points observed in real work.

• Interviewed customization engineers across Builder Ops, Imagers, Color Matchers, and 3D Modelers to map pain points, working patterns, and what was worth preserving
• Broke the platform into primary action areas — building, creating, editing, publishing, validating — and sequenced design work in the order engineering needed it
• Designed the Q/A tree structure to make complex dependency rules navigable without requiring engineers to understand underlying system architecture
• Built a Validation layer that surfaces errors before publishing — specific, actionable messages rather than generic failure states
• Collaborated with engineering at every stage including roadmap planning, design reviews, and UAT — keeping alignment across a fast-moving parallel build
• Architected 2D and 3D rendering support from day one — the platform expanded to support 3D without a rebuild when the time came

The work

System overview — Publishing, Builder, and Architecture

Three layers of the NBY platform simultaneously: the Publishing workflow where engineers manage prebuilds and groups before launch; the consumer-facing Nike By You customizer showing the direct connection between internal tool and consumer experience; and the system architecture showing the relationship between NBY, Flow, and KMS product ecosystems. Most portfolios never make this internal-to-consumer connection visible.

Question/Answer tree — Constraints as guidance

The structured decision sequence that replaced the open configuration canvas. Each answer narrows valid options for the next step — Upper, Swoosh Type, Swoosh, Foxing — so engineers move through a logical sequence rather than navigating a complex dependency graph manually.

Publishing workflow — Prebuilds and group management

The publishing layer where customization engineers manage the set of options presented to consumers — organizing prebuilds, controlling availability by market, and staging launches across Nike's global channels.

What it delivered

• Platform shipped on schedule — 18-month delivery against Adobe's hard Flash discontinuation deadline
• +25% improvement in setup efficiency for customization engineers
• 5 interconnected applications delivered: Builder Creation, Publishing, Library, Bulk Order, 3D Models
• Validation layer eliminated a class of configuration errors that previously reached production undetected
• 3D rendering support built in at the architecture level — platform expanded to support 3D without a rebuild
• Stable operational foundation for Nike's global customization business — Builder Ops, Imagers, Color Matchers, 3D Modelers, and GEO Customization teams worldwide

What this taught me

The most important design decision on NBY wasn't visual — it was structural. Choosing a sequential Question/Answer tree over an open configuration canvas changed the entire character of the tool. It made constraints feel like guidance rather than limitations. Engineers moved faster because the system told them what was possible at each step, not what was wrong after the fact.

The Validation layer reinforced the same principle: surface problems early, at the lowest cost. A configuration error caught before publishing is a two-minute fix. The same error after a global launch is a crisis. Designing the system that prevents the crisis — rather than responds to it — is what makes internal tooling worth building well.