Flameon

UI design and research for a UK fixed-price boiler ecommerce, built around a guided buying wizard.

Flameon Boilers UI Design

Flameon is a UK ecommerce brand selling boilers and related heating products at an up-front fixed price. We were asked to design the full buying experience (UI only, no development), starting from user research and a benchmark of the leading UK fixed-price boiler retailers.

The heart of the design is a guided wizard that takes a homeowner from “which boiler” to a fixed, financeable price in three clear steps (choose boiler, then choose controls, then complete your info), recommending the best option from the answers they give instead of making them decode spec sheets. Around it we designed the product cards, the running price summary, the finance and “email quote” flows, and the trust signals a regulated, high-ticket purchase needs (FCA, Gas Safe, REFCOM).

Even though development was out of scope, we designed for it. Accessibility was tested against WCAG using WAVE and WebAIM; the on-page copy was written with SEO in mind so it could go straight to production; and every asset was delivered as SVG or specced to be built in pure CSS, keeping the pages light and fast. To make interactions, states and loading behaviour unambiguous for the build team, we produced non-functional HTML pages that demonstrate the real experience.

Project info

Requirements

Design a complete, conversion-focused ecommerce experience for buying a boiler online at a fixed price, including a guided selection wizard, as UI only, handover-ready for a separate development team, and credible enough for a regulated, high-value purchase.

Strategies & techniques

User research · Competitor benchmarking · Information architecture · User flows · Wireframing · Interactive prototypes · UI design & design system · Accessibility testing (WCAG) · SEO-ready content · Non-functional HTML/CSS demo pages

Tools

Research & ideation: competitor benchmarking, Balsamiq, Illustrator, coordination on Trello and Slack. Design & prototyping: Figma and Sketch, SVG built with Illustrator. Handover & demos: hand-built HTML5, CSS3 and SVG reference pages to show interactions and loading. Testing: WAVE and WebAIM for accessibility, Google Lighthouse and GTmetrix for speed, plus SEO checks.

Final results

We handed over a pixel-complete UI and design system for the entire purchase journey, with the fixed-price wizard as its centrepiece, plus a set of working HTML/CSS reference pages the developers could build against directly. The design passed WCAG AA checks, kept asset weight minimal through SVG and CSS, and gave Flameon a clear, trustworthy path from “I need a boiler” to a financeable fixed price, ready to ship.