Quatt
Website
Four years building Quatt's digital presence from blank page, before the product existed, to the brand infrastructure teams still run on today.
Four years building Quatt's digital presence from blank page, before the product existed, to the brand infrastructure teams still run on today.
The first website was a simple research instrument. A single lead generation page to understand what customers wanted, gather emails, and send updates on a product that didn't ship yet. At the same time, I was designing the first app concept: one flow for installers testing the heat pump prototype, one for customers.
Before a customer could pre-order, they needed to understand if a Quatt heat pump made sense for their home. I designed the savings check, a configurator flow that took house type, size, and energy consumption, estimated ROI, and recommended either the Quatt Hybrid or Hybrid Duo.
The first version ran in Heyflow (we also tested Typeform) to validate the logic before committing any engineering time. Once we knew the concept worked, we built it natively on the website. That prototype-first decision saved weeks of dev work and shaped how we thought about new features after it.
House type, size, gas and electricity consumption. A split-screen layout with lifestyle photography on one side, a focused question on the other, designed to feel more like a conversation than a form.
Personalised recommendation with estimated annual savings, price after subsidy, and payback period. The moment the product earns trust before the customer talks to sales.
The flow grew as the product range expanded to include All-Electric, Chill and HomeBattery. Depending on the maturity of the product, customers would be able, either, to gather more information, or speak to sales, or pre-order a new product.
After moving to the product team to focus 100% on the app, the gap became visible. Marketing, product, and industrial design were each building independently. The brand was technically the same, but it didn't feel like it. Internal communication between design functions was weak, and no one was tracking what the others were doing.
The company's response was to hire an external agency for a complete rebrand. I was in those meetings with management, shaping the brief, pushing on direction. The agency delivered brand essence: a new visual identity, colour philosophy, and typographic approach.
But brand essence isn't a design system. The agency handed over the ingredients and left. Translating those into actual components, usage rules, and patterns that teams could build from — that was the internal team's job.
"The biggest mistake across this whole period was working in silos. Designers barely shared projects, meetings, or updates with each other. A lot of the inconsistency we were trying to fix with the design system could have been prevented by better communication culture from the start."
The design system work started where the agency stopped. Taking brand essence: typography, colour philosophy, visual identity, and turning it into a living system: component patterns, spacing logic, token architecture, usage rules that product and marketing could both run from.
An intern joined and handled campaigns, email marketing, ads, and miscellaneous requests: fleet design, internal materials, some website pages. That freed me to focus on the new product pages landing on the site: All-Electric, HomeBattery, Chill, Quatt Energy. Each one built on the system, and the system got sharper with each page.
New product pages (All-Electric, HomeBattery, Chill, Quatt Energy), continuous A/B testing on the savings check across headlines, information architecture, form structure and page hierarchy, and for the first time product and marketing converging toward the same design language. A single source of truth was the goal; we never fully got there, but the gap closed significantly.
The system was built to be handed off to machines — not just designers.
At the product team, the design system with clean token architecture was made and fed to Figma MCP. With that, our first functional high-fidelity prototypes of Quatt Energy screens was developed for the sales team. A working demo that looked and behaved like the real product, delivered at design speed, without engineering resource. That was just the beginning of a new Quatt era.