Overview
A smart switch is hard to sell online. It's small, it lives on a wall, and its best feature is something you have to touch. We designed the site to show the product working, in real rooms, at the price you'll actually pay.
- An interactive hero where the on-screen switch dims and recolours the whole page
- Product configurators with live pricing across circuits, finishes and glass
- A 3D home planner that counts switches room by room and applies multi-room discounts
- In-situ imagery that re-renders the switch in whichever finish you pick
Tech stack
A WALL SWITCH YOU CAN TRY FROM THE SOFA.
Brand
We extended Lumio's mark, a circle holding a soft form of light, into a full system: four scene colours lifted from the switch's own interface, one typeface, and a rendering style for the hardware so every product shot matches, whatever the finish.
Design
Every page is assembled from the same set of blocks: heroes, range cards, split rows, specs, FAQs, the planner and the configurator. We designed them in Figma as a kit first, so new pages get assembled rather than designed from scratch.
Build
Each block is a Prismic slice backed by a typed Next.js component. Products, prices and discount tiers live in one catalogue that the configurator, the planner and the bag all read from, so a price changes once and is right everywhere.
Impact
A product page that does the showroom's job.
Visitors can turn the lights down on the homepage, see their finish on a real wall and price a whole house before speaking to anyone. Because every section is a Prismic slice, Lumio's team ships new product pages and campaigns without waiting on a developer.
Lights that respond
The hero switch is fully interactive. Dim it, change scene or swap room and the page lighting follows.
Priced as you plan
The 3D planner places switches room by room and applies multi-room discounts live as the count grows.
Every finish, every room
Room imagery re-renders in Chalk, Graphite, Brass or Pewter as you configure.
