← 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 color 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 colors 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 color 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 Color, Then Configure
Choosing a color and buying a can are different jobs. The first screen is the room: search or browse until the color looks right on the wall. Then the work moves to the product: finish, size, how much to buy. Once the color is chosen, keeping the visualizer on screen would have buried the next decision.
Decision 02
Search or Browse
You find a color 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 color that fails access is just a wall.
Decision 03
Testing Moved the Furniture
Remote sessions showed the color screen was doing its job and the next step was not. People treated picking a color 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 color accuracy and motion. Post-launch, color-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.