Product Configuration
Summary
Redesigned allbranded's product configurator, replacing a five-step accordion flow that hid options and let unbranded orders through, with all options visible and selectable at once.
Outcome
Shipped to production with real-photo color swatches, in-configurator logo upload, and a visible price table, with "no customization" deprioritized in the hierarchy to make branded orders the path of least resistance.
Configuring a product took too many steps, and too many orders shipped unbranded
The old flow locked shoppers into a five-step vertical stepper, revealing one accordion panel at a time and hiding every other choice until the current step was confirmed. Plain colour dots didn't show what the product would really look like, uploading artwork wasn't possible until checkout, and "no customization" was just as easy to reach as a properly branded order, so a large share of orders shipped without a logo at all.
The live prototype: every option, from colour and print technique to the quantity price table and checkout, reachable by scrolling one panel.
Every option visible at once, in the shopper's own colours
We replaced the old accordion disclosure with flat choice chips, so every option for colour, print technique, and position is visible and selectable at once instead of hidden behind sequential steps. Colour swatches now use real product photos instead of dots, shoppers can upload their logo directly in the configurator instead of waiting until checkout, and multiple printing positions can be added on the spot, no quote needed, backed by a clear price table that shows the savings unlocked at every quantity tier.
Guided by default, without losing flexibility
Customization is now the path of least resistance, with "no customization" pushed lower in the hierarchy. Sample orders moved behind a dedicated button instead of competing for attention, special production requests were repositioned for the edge case they actually are, and new elements: order-process links, benefit bullets above the add-to-cart button, a configuration-link copier, and product reviews, round out a flow that still confirms every step before a product reaches the cart.
Before: plain colour dots, one step visible at a time.
Real-photo swatches and flat chips, every option visible at once.
A clear price table showing the savings at every quantity tier.
Artwork upload, delivery estimate, and the final add-to-cart step, all on the same page.