WarePro Digital Twin / Product design case study
Making warehouse data spatially useful.
I reframed an existing 3D warehouse from a visual upgrade into a configurable spatial model for inventory, operational zones and warehouse structure — then prototyped the experience in React, R3F and Three.js for engineering integration.
- Role
- Product/UX Design · Spatial UX · Technical Prototyping
- Collaboration
- Product · Domain stakeholders · Frontend · Backend · Platform
- Status
- Smaller deployment in customer use · Larger warehouse in integration/validation
- Core shift
- Visual redesign → configurable spatial/data model
01 / Starting point
A functional twin. A visual-first assumption.
WarePro already had a working 3D warehouse view. I started by making it look more real, before establishing what product value that would add.
02 / The engineering challenge
Better-looking wasn’t the same as more useful.
Senior engineering challenged the direction: the extra rendering effort didn’t create enough product value. The existing twin already worked, and customers hadn’t asked for a prettier one.
- The question I started with
- How can I make the warehouse look better?
- The question it became
- What warehouse information becomes easier to understand when it is spatial?
03 / The product reframe
From one modeled scene to a configurable system.
I studied WarePro’s product and data, warehouse structures, videos, scenarios and reference imagery, with input from the Product Manager and VP. This was domain learning, not direct user research.
The redesign moved toward layout and configuration data that adapts to different warehouses and ties physical space to inventory quantity and capacity.
OptionalDomain reference imagery
Used to understand physical structure and layout. They are references, and aren’t presented as a customer site or plan.
How I framed warehouse information
Conceptual model- 01
Physical warehouse
Levels, racks, docks, floor areas.
- 02
Operational structure
Zones, rows, storage locations.
- 03
Data model
Layout configuration, quantity and capacity.
- 04
Digital Twin
A spatial view of that structure.
Conceptual hierarchy · broad to specific
- 01Warehouse
- 02Floor
- 03Zone
- 04Row
- 05Rack
- 06Shelf / Location
- 07SKU / Package
- 08Quantity / Capacity
How I framed the information. Not every level is implemented as a drill-down interaction.
04 / Four product decisions
Connecting warehouse information to space.
Captures are from the final experience. Results describe what they show, not validated outcomes.
01Configurable warehouse layouts
Smaller configuration. Complex configuration. - Evidence
- Warehouse structures differ; the complex layout adds a mezzanine and several zones.
- Decision
- Drive layouts from configuration data rather than modeling one warehouse by hand.
- Trade-off
- Complex layouts raise information density and label overlap.
- Implemented result
- The viewer offers Original, Large and Complex layouts; a smaller configuration and Complex are shown.
02Navigate by operational destination
Receiving viewpoint: racks, docks and named zones together. - Evidence
- Receiving, Dispatch, Returns and Default Zone are distinct areas of operation.
- Decision
- Offer named destinations and viewpoints so navigation doesn’t rely only on manual orbiting.
- Trade-off
- Viewpoints orient but don’t locate an item; search → focus → location is future work.
- Implemented result
- Named destinations sit beside Exterior, Overhead and directional views.
03Make levels independently visible
Ground selected. Mezzanine selected. - Evidence
- Ground-floor racks and mezzanine storage sit on different levels of one structure.
- Decision
- Provide All, Ground and Mezzanine visibility states.
- Trade-off
- Isolating a floor drops context; All keeps the whole-building view.
- Implemented result
- Ground and Mezzanine each show that level on its own.
04Connect capacity to its location
Detail of the complex layout: labeled positions within racks. - Evidence
- The existing twin already showed occupancy; quantity and capacity belong to identifiable storage locations.
- Decision
- Show quantity and capacity on the labeled location where stock sits.
- Trade-off
- Color alone isn’t enough: it needs accessible cues, and labels need clarity at scale.
- Implemented result
- The captures show occupancy on labeled storage positions within racks.
05 / Working prototype
A working experience engineering could build from.
Using AI-assisted coding, I built the spatial experience in React, React Three Fiber, Three.js and TypeScript, giving engineering an implementation starting point beyond static concepts.
OptionalIntegration patterns and rendering profile
Integration: the prototype supports embedding within the WarePro dashboard, window.postMessage communication with the host application, and deep links that highlight specific locations or bins.
Rendering: the 3D view uses instanced rendering. Profiling showed approximately 14–22 WebGL draw calls and approximately 58–60 FPS on tested hardware/configurations. These are not guarantees for other devices, warehouse sizes or production environments, and not product outcomes.
06 / Collaboration
I prototyped the experience. Engineering owned the production platform.
My contribution
- Product/UX direction
- Spatial interaction design
- Visualization
- Occupancy / zone representation
- React / R3F / Three.js prototype
- AI-assisted coding
Product / domain
- Warehouse/domain knowledge
- Requirements
- Operational context
Engineering
- Production WMS data
- Backend/database logic
- APIs
- Authentication/RBAC
- Infrastructure & deployment
- Production integration
07 / Status
Two scales. Two deployment states.
- Smaller warehouse
- Production / customer use
- Larger warehouse
- Integration + validation in progress
The substantially larger implementation is being integrated and validated against real warehouse data with the customer and team. It isn’t fully live or fully validated.
08 / Learning
I started by making the twin look better. Engineering challenged whether that added value. I ended up asking what warehouse information is easier to understand in space, and prototyping the answer deeply enough for engineering to integrate.
Still open · not implemented
Information density at very large scale; search → focus → location; reducing label overlap; accessibility beyond color; stronger overview → zone → rack → item disclosure.
More case studies
