Case study

Keramzytbud: an online house configurator and landing page

Keramzytbud builds houses from expanded clay blocks and wanted clients to adapt the plan of their house themselves. We designed a modular online house configurator, a lead generation landing page and a design system, and tested the scenarios on hi-fi prototypes in Figma.

Keramzytbud builds houses from lightweight expanded clay blocks. We designed a configurator where clients adapt a house plan from elements such as the layout, walls, windows, doors and roof, plus a landing page that encourages people to try the tool.

Scope of work

Industry: Startups
Product type: Product configurator and landing page
Market: Construction / expanded clay houses

Technologies

Kalkulatory i konfiguratory produktów
Product Design
Product discovery

Key facts

Wireframes from paper sketches to digital mock-ups in Figma
Modular configurator: layout, walls, windows, doors and roof
Interactive hi-fi prototypes for testing scenarios
Landing page with clear calls to action
Design system: colour palette, typography, iconography

Clients design their own house from modules, and the builder gets a ready-made lead.

Wireframes of the Keramzytbud online house configurator

Goals

01
A house tailored online
Let clients easily adapt a house plan built from Keramzytbud materials.
02
Intuitive interaction
Design a configurator people can use without instructions.
03
Leads for the business
Attract prospective clients with a page that encourages them to try the tool.

Process

Discover Define Develop Deliver

Paper sketches
Paper sketches
First ideas and concepts for the configurator, drawn by hand.
Wireframes in Figma
Wireframes in Figma
Digital mock-ups that let us compare variants quickly.
Hi-fi prototypes
Hi-fi prototypes
An interactive configurator in Figma for testing different scenarios.
Review with the client
Review with the client
Working with the Keramzytbud team on technical feasibility and alignment with the brief.
Landing page
Landing page
A landing page with clear calls to action that leads to the configurator.
Design system
Design system
Colour palette, typography, iconography and components for all of the brand's digital channels.

Animation of the Keramzytbud house configurator design

What we delivered

A house design tool and a page that brings clients to it.

Wireframes - paper sketches and digital mock-ups in Figma that set the configurator's logic.
House configurator - a modular system for choosing the layout, walls, windows, doors and roof.
Hi-fi prototypes - an interactive version in Figma that we used to test usage scenarios.
Landing page - a landing page with calls to action and a message about the benefits of building with Keramzytbud materials.
Design system - colour palette, typography, iconography and design elements ready to reuse in future projects.

Challenge: house design broken down into simple choices

Keramzytbud builds houses from lightweight expanded clay blocks. Clients needed to be able to adapt the plan of their own house using the company's materials.

The configurator had to be easy to use for someone who doesn't design houses for a living, and technically feasible on the company's side. On top of that, it needed a page that would convince prospective clients to try the tool.

Designing a house is a complex decision. The configurator had to break it down into simple choices.

Keramzytbud landing page on a laptop and phone

Online house configurator: choosing the house layout

Solution: a modular configurator and a landing page

The configurator is built on modules: users choose the layout, walls, windows, doors and roof of their house.

We started with paper sketches, then moved to wireframes in Figma, which let us iterate on ideas quickly. Interactive hi-fi prototypes were used to test scenarios and refine the interactions. At every stage, we checked with the Keramzytbud team that the solutions were technically feasible.

A lead-generating landing page

The landing page is easy to navigate, has clear calls to action and highlights the benefits of building a house with Keramzytbud materials.

Design system

The colour palette, typography and iconography keep the configurator and the brand's other digital channels consistent. The elements are easy to reuse in future projects.