Made by Michael
From slider to surface, and the path to acquisition.
Replaced a cramped order slider with a full-page view, redesigned the order list, and built a discreet kebab + drawer for sales-floor cost and pricing, so nothing private shows while a customer is over the tailor's shoulder.
Brief
Uplift the order management experience so a tailor can read an order's full journey in one pass — materials, status, COGS, design options — and stay focused on the relationship with the client in front of them, not on hunting for data across the screen.
Problem
The existing surface lacked visual clarity and depth. Information sat too densely and with too little hierarchy, so tailors had to read every order twice to find what they needed — adding cognitive load to the most repeated task in their day.
My role
Led the redesign end-to-end, from the list down to the line item:
- Research: tailor interviews, on-site observation, and synthesis to inform the design
- Stakeholder management across product, engineering, and operations
- Order list: table cards, filter chips, inline garment-level expand
- Order detail: full-page view replacing the slider
- Kebab + drawer pattern for sales-floor cost and pricing
- COGS UI: refresh-from-source and line-by-line breakdown
- Permission model with engineering: role-gated visibility, default-off
- Developer hand-off: states, breakpoints, filter and breakdown rules
Before & after
The same order, side by side. On the left, the original surface a tailor had to scan twice to read. On the right, the redesign — materials, status, COGS, and design options sitting in one pass, with the order's full journey in view instead of tucked behind a slider.
Order list: table cards + filters
Rebuilt as table cards instead of a flat grid: the eye scans a row, not a field. Filter chips for stage, customer, and date sit at the top, and a row can expand inline to show garment-level status without leaving the list. Documented as a pattern so it extends to the other admin tables.
Slider → full-page detail
The old order item lived in a side slider. Fine for a quick edit; useless for the level of detail a tailor actually needs in front of a client. Replaced with a full-page view with room for the things that matter on the floor: fit profile, design options, fabric and lining, conflicts, and pricing when it's allowed to surface.
The kebab + drawer (the lateral move)
Cost and pricing are sensitive, but the screen is shared with the customer during a fitting. Rather than guard with passwords or warning modals, I made the entry-point itself discreet: a small kebab beside the summary button opens the drawer on demand, and closing it hides everything. Default-off permissions mean most staff never see the kebab at all.
The lateral move: privacy as a UI requirement, not a permission policy.
COGS: refresh-from-source + line-by-line breakdown
COGS drifts when surcharges update upstream. An explicit Refresh re-polls the source — a visible action, no silent staleness — so admins always know whether the number in front of them is current.
The breakdown reads line-by-line in the same shape migrating users already knew: fabric base, fabric surcharge, CMT, lining and design-option surcharges, running total. RTW orders use a per-unit variant with aggregate surcharge and discount lines.
Orders page
The list tailors live in. Scannable rows, filter chips along the top, and an inline expand for garment-level status, so an order's state is readable without opening it.
Developer hand-off
What went to engineering: table-card states and breakpoints, filter behaviour, and the breakdown rules for what reveals on a row click. Written so the pattern extends to the other admin tables without me in the room.
