Realizacja

Keramzytbud: konfigurator domu online i landing page

Keramzytbud buduje domy z bloczków z keramzytu i chciał, żeby klient mógł sam dostosować plan swojego domu. Zaprojektowaliśmy konfigurator domu online oparty na modułach, landing page generujący leady i design system, a scenariusze sprawdziliśmy na prototypach hi-fi w Figmie.

Keramzytbud buduje domy z lekkich bloczków z keramzytu. Zaprojektowaliśmy konfigurator, w którym klient dostosowuje plan domu z elementów takich jak układ, ściany, okna, drzwi i dach, oraz stronę docelową, która zachęca do wypróbowania narzędzia.

Branża
Startupy
Typ produktu
Konfigurator produktu i landing page
Rynek
Budownictwo / domy z keramzytu
Technologie
  • Kalkulatory i konfiguratory produktów
  • Product Design
  • Product discovery
Najważniejsze fakty
  • Wireframes od szkiców na papierze do cyfrowych makiet w Figmie
  • Modularny konfigurator: układ, ściany, okna, drzwi i dach
  • Interaktywne prototypy hi-fi do testowania scenariuszy
  • Landing page z wyraźnymi wezwaniami do działania
  • Design system: paleta kolorów, typografia, ikonografia

Klient sam układa swój dom z modułów, a firma budowlana dostaje gotowy lead.

Wireframes konfiguratora domu online Keramzytbud

Cele

  • 01

    Dom dopasowany online

    Pozwolić klientowi łatwo dostosować plan domu z materiałów Keramzytbud.

  • 02

    Intuicyjna interakcja

    Zaprojektować konfigurator, z którego da się korzystać bez instrukcji.

  • 03

    Leady dla firmy

    Przyciągnąć potencjalnych klientów stroną, która zachęca do wypróbowania narzędzia.

Proces

Discover Define Develop Deliver
  1. Szkice na papierze
    Szkice na papierze

    Pierwsze pomysły i koncepcje konfiguratora rozrysowane ręcznie.

  2. Wireframes w Figmie
    Wireframes w Figmie

    Cyfrowe makiety, na których szybko porównywaliśmy kolejne warianty.

  3. Prototypy hi-fi
    Prototypy hi-fi

    Interaktywny konfigurator w Figmie do testowania różnych scenariuszy.

  4. Weryfikacja z klientem
    Weryfikacja z klientem

    Praca z zespołem Keramzytbud nad wykonalnością techniczną i zgodnością z założeniami.

  5. Landing page
    Landing page

    Strona docelowa z wyraźnymi wezwaniami do działania, prowadząca do konfiguratora.

  6. Design system
    Design system

    Paleta kolorów, typografia, ikonografia i komponenty dla wszystkich kanałów cyfrowych marki.

Animacja projektu konfiguratora domu Keramzytbud

Co dostarczyliśmy

Narzędzie do projektowania domu i stronę, która prowadzi do niego klientów.

  • Wireframes - szkice papierowe i cyfrowe makiety w Figmie, na których ustaliliśmy logikę konfiguratora.
  • Konfigurator domu - modularny system wyboru układu, ścian, okien, drzwi i dachu.
  • Prototypy hi-fi - interaktywna wersja w Figmie, na której sprawdzaliśmy scenariusze użycia.
  • Landing page - strona docelowa z wezwaniami do działania i przekazem o korzyściach z budowy z materiałów Keramzytbud.
  • Design system - paleta kolorów, typografia, ikonografia i elementy projektowe gotowe do użycia w kolejnych projektach.

Wyzwanie: projekt domu rozłożony na proste wybory

Keramzytbud to firma, która buduje domy z lekkich bloczków z keramzytu. Klient miał móc samodzielnie dostosować plan swojego domu przy użyciu jej materiałów.

Konfigurator musiał być łatwy w obsłudze dla osoby, która nie projektuje domów zawodowo, i jednocześnie technicznie wykonalny po stronie firmy. Do tego potrzebna była strona, która przekona potencjalnych klientów do wypróbowania narzędzia.

Projekt domu to złożona decyzja. Konfigurator miał ją rozłożyć na proste wybory.

Landing page Keramzytbud na laptopie i telefonie
Konfigurator domu online: wybór układu domu

Rozwiązanie: modułowy konfigurator i landing page

Konfigurator opiera się na modułach: użytkownik wybiera układ, ściany, okna, drzwi i dach swojego domu.

Zaczęliśmy od szkiców na papierze, potem przeszliśmy do wireframe'ów w Figmie, co pozwoliło szybko iterować pomysły. Interaktywne prototypy hi-fi posłużyły do testowania scenariuszy i dopracowania interakcji. Na każdym etapie sprawdzaliśmy z zespołem Keramzytbud, czy rozwiązania są technicznie wykonalne.

Landing page generujący leady

Strona docelowa jest prosta w nawigacji, ma wyraźne wezwania do działania i podkreśla korzyści z budowy domu z materiałów Keramzytbud.

Design system

Paleta kolorów, typografia i ikonografia trzymają spójny wygląd konfiguratora i pozostałych kanałów cyfrowych marki. Elementy da się łatwo wykorzystać w kolejnych projektach.

Krok konfiguratora domu z liczbą okien i kominem

Po co firmie konfigurator produktu

Dedykowany kalkulator albo konfigurator na stronie daje firmie z produktem złożonym kilka konkretnych korzyści.

Dopasowanie

Narzędzie odpowiada na potrzeby firmy i jej klientów, a dopasowane doświadczenie odróżnia ją od konkurencji.

Wydajność

Automatyczne obliczenia oszczędzają czas i zmniejszają ryzyko błędów.

Przejrzystość

Jasny podział kosztów buduje zaufanie i wiarygodność.

Wygoda

Klient sprawdza, czego potrzebuje, o dowolnej porze i z dowolnego miejsca.

Marketing

Darmowe, użyteczne narzędzie przyciąga nowych klientów i zwiększa rozpoznawalność marki.

Zestaw ikon z design systemu Keramzytbud

Opracowanie: Publikacja: Aktualizacja:

Produkt da się skonfigurować?

Konfigurator zaczynamy od szkiców i prototypu, który sprawdzamy, zanim powstanie kod.

Porozmawiajmy