A website that AI can read: what it means for design and build
A good-looking page can reach a machine empty. Four design decisions that cause it, and why none of this means building boring websites.
Case study · Brand and store
Rebon: a brand for a product the customer does not understand
Daniel Hauser· 3 min read
Water filtration is a product where the customer has no idea what they are actually buying. They do not know what is in their water, they do not understand the difference between cartridges, and they have no way of judging whether an offer is a good one. For a brand that means one thing: it has to answer before it starts talking about itself.
1brand from logotype to store
4assemblies in one visual family
27pages in one consistent look
9icons for what leaves the water
The starting point: no brand at all
Rebon started from nothing. No logotype, no colour, no website. And it sells a product where it is easy to slide into a laboratory look — white backgrounds, blue, efficiency charts, certificates. That look feels expert, and for exactly that reason it does not work: the customer is afraid of their water, not interested in adsorbents.
We decided to go the other way. Not a laboratory but a kitchen. Not proof at first glance but reassurance.
One mark that carries the whole brand
The logotype rests on a single figure: a drop drawn in a blue line with green leaf strokes inside it. Water and nature in one shape, with no caption underneath. The same motif returns in the letter O of REBON, so the brand holds up where it has to fit inside a circle — a profile picture, a favicon, a label.
Everything else came out of that pair of colours. Blue carries water and trust, green carries naturalness and the sense that this is a solution rather than chemistry. We added nothing third.
With a technical product, design is not there to make it interesting. It is there to make it understandable before the person takes fright.
The product on a worktop, not on a white background
The product visuals show the assemblies where they actually sit: under the sink, on a kitchen worktop, beside a glass of water. There is a practical reason and a content one. Practical: the customer sees the size straight away and how much room it takes under the sink. Content: the photograph answers the question people ask first — will it fit, and will it look like a workshop?
The same rule governs the icons and diagrams. The filter block is drawn as the path of the water, not as a technical drawing. The nine things that leave the water each got an icon, so the overview can be read before it is read.
Why design and build belong together
The design of the store was made alongside the structure of the pages, not after it. That difference shows in the result:
- The signpost of water source → what you are solving → where to start is designed as part of the page, not as an add-on inserted later.
- The content pages on choosing a filter or on well water have a look of their own, because they were designed at the same time as they were thought up.
- Segments beyond the household — offices, hospitality, aquariums, cottages — have their own entry point, and that entry point fitted into the design because it was allowed for.
Our sister studio Developer Online built the site from the design on the Upgates platform. The content aimed at search was handled by Independency, who wrote their own take on structuring a store around search.
The result
A brand that looks the same on the logotype, on a product photograph and on a page about well water. And a store where a person learns what they are buying before they reach the price. The whole project is in the Rebon reference.
