Case study - Konfigurator rolet okiennych dla Debesto.com

Stworzenie konfiguratora rolet okiennych pomagającego w odpowiednim wyborze rolety okiennej i następnie złożeniu zamówienia. Konfigurator jest aplikacją internetową typu onepage napisaną w Next.js. Aplikacja jest zintegrowana ze sklepem internetowym, więc użytkownik po skonfigurowaniu produktu może następnie dodać go do koszyka i złożyć zamówienie.

  • Client

    debesto

  • Year

    2023

  • Technology

    Next.js

Case study image

Klient

Debesto to firma specjalizująca się w eksporcie okien, drzwi, rolet i bram garażowych bezpośrednio do firm budowlanych. Firma skupia się na pozyskiwaniu klientów wyłącznie przez internet. Z powodzeniem wdraża nowe technologie, aby pomóc swoim klientom w doborze odpowiednich okien, drzwi, rolet i bram garażowych, które spełnią ich oczekiwania.

Wyzwanie

Najważniejszym elementem projektu było zaprojektowanie odpowiedniej architektury informacji i uwzględnienie wszystkich zależności. Działanie systemu musiało być bardzo intuicyjne i prowadzić użytkownika krok po kroku przez konfigurację tak, żeby nie zapomniał o żadnych istotnych elementach, które są niezbędne do pełnej konfiguracji. Treść i możliwości każdego kolejnego kroku są zależne od poprzednich wyborów użytkownika. System musiał zapisywać wszystkie wybory w konfiguracji i uwzględniać je przy wyświetlaniu kolejnych kroków. Ułożenie zależności miało być zaprojektowana na tyle prosto, żeby przyszłe zmiany lub dodanie kolejnych elementów konfiguracji były proste. Cel projektu był prosty — ułatwić zamawianie rolet okiennych. Architektura informacji, odpowiedni UX i zrozumiały proces były kluczowe. Podczas konfiguracji, po dokonaniu wyboru w danym kroku, cena konfiguracji powinna być re kalkulowana i wyświetlana użytkownikowi. Ostatnim krokiem procesu miała być możliwość dodania konfiguracji do koszyka lub przesłania jej do eksperta Debesto w celu doprecyzowania szczegółów zamówienia.

  • trending-up icon

    Ułożenie architektury informacji

  • trending-up icon

    Uwzględnienie wszystkich zależności

  • trending-up icon

    Zrozumiałe przedstawienie całego procesu

  • trending-up icon

    Wyliczanie ceny konfiguracji

  • trending-up icon

    Integracja ze sklepem internetowym

Case study image

Rozwiązanie

Zanim przystąpiliśmy do projektowania designu i kodowania, skupiliśmy się na ułożeniu architektury informacji i uwzględnieniu wszystkich zależności. Zależności rozpisaliśmy w formie schematu blokowego.

Po potwierdzeniu przez klienta, że wszystkie zależności zostały poprawnie ujęte w architekturze, przystąpiliśmy do projektowania makiet oraz designu aplikacji. W designie skupiliśmy się na wyszczególnieniu każdego kroku osobno. Wyświetlanie ceny produktu zaprojektowaliśmy w dolnym pasku przyklejonym do dolnej krawędzi ekranu tak, aby ciągle był on widoczny podczas konfigurowania rolet. Postanowiliśmy, że przejście do kolejnych kroków zachowamy w formie scrollowania w dół, żeby zostało to spójne z naturalnym sposobem przeglądania strony przez użytkownika.

Aplikację stworzyliśmy w technologii Next.js, ponieważ dzięki niej mogliśmy zapewnić, że aplikacja będzie działała szybko oraz będzie zoptymalizowana pod SEO. Integracja ze sklepem internetowym stworzyliśmy dzięki udostępnionemu przez platformę sklepu API. Po zakończonej konfiguracji wysyłaliśmy do sklepu odpowiednio przygotowane zapytanie ze wszystkimi danymi zebranymi podczas konfiguracji. Możliwość wysłania konfiguracji do eksperta Debesto.com zrobiliśmy poprzez zaprojektowanie dedykowanego formularza kontaktowego. Umożliwił on dopisania użytkownikowi wiadomości do agenta, podanie swojego maila i przesłanie konfiguracji. Po przesłaniu agent otrzymuje konfigurację na przeznaczonego pod tego typu zapytania maila.

    Case study image

    Wyniki

    Czytelny UX aplikacji zapewnił, że zakup rolet okiennych w Debesto jest teraz jeszcze prostszy. Wcześniej taki zakup wymagał spotkania z agentem. Obecnie konfigurator znacznie skraca cały proces. Klient może zrobić to samodzielnie lub przesłać gotową konfigurację do agenta. Aplikacja usprawnia proces pracy agenta i powoduje, że jego czas jest wykorzystywany efektywniej. Agent może klientowi poświęcić więcej czasu na pomoc w ostatnim etapie zakupu oraz odpowiedzieć na wszystkie jego wątpliwości.  

    • check icon

      Szybka i przejrzysta aplikacja

    • check icon

      Ułatwienie procesu zakupu rolet

    • check icon

      Skrócenie czasu składania zamówienia

    • check icon

      Usprawnienie czasu pracy agenta

    Case study image

    Opowiedz nam o swoim projekcie

    Myślisz o nowym projekcie? Zrealizujmy go!

    Naciskając „Wyślij wiadomość” udzielasz nam, tj. Rigby, zgody na email marketing naszych usług w ramach komunikacji dotyczącej Twojego projektu. Zgodę możesz wycofać, np. pisząc na adres hello@rigbyjs.com.
    Więcej
    placeholder

    Grzegorz Tomaka

    Co-CEO & Co-founder

    LinkedIn icon
    placeholder

    Jakub Zbaski

    Co-CEO & Co-founder

    LinkedIn icon