Shelfy team (co-founder) coordinates with supplier offline, enters quote in system. Brand manager gets email, reviews quote on W7, and accepts to commence production.
Structural Designer Journey (template authoring + in-app review) is deferred to Phase 2.
At MLP, templates are authored as JSON committed to the repository and published via PR. The structural designer (co-founder) reviews designs during offline supplier coordination — no in-app approve/reject flow.
Deferred flows include: W8 template manager UI, the formal structural review queue (approve/request changes/reject), annotation blocks sent to brand manager, message thread, in-app notification bell, and the Changes Requested state.
State Catalog
Screen State Inventory
Every meaningful state each screen can be in. Used to ensure all edge cases are covered in implementation.
Not built at MLPTemplates authored via JSON-in-repo. Admin review and approve/reject flows added in Phase 2 when order volume requires it.
Micro-interaction Inventory
Key Interaction Patterns
Specific feedback moments that make the product feel responsive and trustworthy. Each interaction reduces user uncertainty at a critical decision point.
⬡
Slider → 3D Update
W2 — Parameter Panel
Dragging any dimension slider instantly updates the R3F viewport geometry. No debounce lag — shelf recalculates synchronously from parametric kernel output.
Clicking a shelf card header expands it to show full W×D×H inputs and product fit badge. One card open at a time. Collapse on click-away or second click.
Trigger: Card header click
Effect: CSS max-height animation (150ms ease-out), body slides in
Side effect: 3D viewport highlights corresponding shelf level
Accordion
✦
Preset Apply + Undo Toast
W2 — Preset Chips
Selecting a preset overwrites all shelf parameters. An undo toast appears for 5 seconds allowing the user to revert the entire change in one click.
Undo: Restores snapshot, 3D reverts, toast dismisses
Undoable
▣
Artwork Upload → 3D Wipe
W3 — Artwork Zones
After a successful upload to a zone, the corresponding 3D panel texture transitions from the placeholder grid to the uploaded artwork via a wipe reveal animation.
Zone highlight: Panel glows coral on hover in both zone list and 3D
Visual delight
◉
Product Fit Badge Transition
W2 — Shelf Cards
As the user types product dimensions, the fit badge animates through states: calculating → pass (green) / tight (amber) / fail (red). Each state transition includes a subtle pulse.
Logic: units_per_row × depth_mm vs shelf_depth_mm ± 5mm tolerance
Functional feedback
⬡
Quote Accept Dialog
W7 — Quote State
Clicking "Accept Quote" shows a modal confirmation rather than acting immediately. The modal restates the commitment (units, price, lead time) before the user confirms.
Trigger: Accept Quote button click
Effect: Modal overlay (background blur), confirmation CTA in modal footer
Irreversibility: Clear "This action cannot be undone" copy, no undo toast