← Work Paint Configurator
Shipped · Lowe's · 2024
Paint Configurator
Paint is the hardest thing in the store to buy online: the decision is visual and the product is a colour on a two-inch chip. The configurator closes that gap.
The Situation
Choosing paint is one of the highest-friction decisions in home improvement. The volume of choices, uncertainty about how colours look under real home lighting, and confusion around finishes push people into analysis paralysis, and most give up and drive to the store.
In-store observation and remote interviews showed exactly where shoppers drop off. They cannot imagine a two-inch chip covering an entire wall under their own lighting. They hesitate over the practical difference between flat, eggshell, satin and semi-gloss. And converting square footage to gallons carries a fear of over- or under-buying.
The Assumption
Paint cannot really be sold online. The tool's job is to send people to the store better informed.
What Was Actually True
If the colour is wrong on the wall, nothing else in the cart matters. Show it on a room, then answer finish and quantity, then check out, in one flow.
Decision 01
Pick the Colour, Then Configure
Choosing a colour and buying a can are different jobs. The first screen is the room: search or browse until the colour looks right on the wall. Then the work moves to the product: finish, size, how much to buy. Once the colour is chosen, keeping the visualizer on screen would have buried the next decision.
Decision 02
Search or Browse
You find a colour by name or by walking the range, and you see it on the room. That is the whole interaction. Every swatch, overlay and label was built to WCAG AA for contrast and touch size, because a wall of colour that fails access is just a wall.
Decision 03
Testing Moved the Furniture
Remote sessions showed the colour screen was doing its job and the next step was not. People treated picking a colour as the end. Finish, size and the paint calculator had to sit in the configuration step, on the way to checkout, or they got skipped.
Handoff, QA, and What Came After
Flows, dynamic component states and token mappings were documented directly in Figma for iOS, Android and web, and design QA audited staging builds for colour accuracy and motion. Post-launch, colour-matching recommendations for trim, accent and ceiling shades were added on top of the base selection.
What I’d Do Differently
The original design mirrored how people physically pick paint: chips in hand, room in view, the light changing on the wall. Masking the wall and simulating the bulb were more than could be built in the time we had, so what shipped is search and browse against the room, then configure the product. I am still happy with it. Next time I would cost the hardest interactions with engineering before committing the design to them, so the ambitious version gets scoped early instead of trimmed late.