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.

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.

0

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.

ellipse

Ułożenie architektury informacji

ellipse

Uwzględnienie wszystkich zależności

ellipse

Zrozumiałe przedstawienie całego procesu

ellipse

Wyliczanie ceny konfiguracji

ellipse

Integracja ze sklepem internetowym

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.

Next.js

Next.js to open source framework, który umożliwia tworzenie szybkich, elastycznych i przyjaznych dla SEO aplikacji internetowych.

Rezultat

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.  

tick

Szybka i przejrzysta aplikacja

tick

Ułatwienie procesu zakupu rolet

tick

Skrócenie czasu składania zamówienia

tick

Usprawnienie czasu pracy agenta

Jak przebiegała współpraca

Cytat

Jako pracownik debesto.com zgłosiłem się do Rigby ze zleceniem stworzenia konfiguratora rolet zewnętrznych. Mimo dość skomplikowanej logiki konfiguratora, firma poradziła sobie z jego stworzeniem. Konfigurator działa szybko oraz wygląda dobrze na wszystkich urządzeniach. Sama współpraca odbyła się bezproblemowo, wszystkie wątpliwości były na bieżąco rozwiązywane. W przypadku jakichkolwiek zmian w założeniach, były one natychmiastowo wprowadzane. Polecam.

Cytat
Filip Tokarski

Product Manager w Debesto.com

Chciałbyś dowiedzieć się, czy i jak możemy pomóc w Twoim projekcie?

Porozmawiajmy o Twoim projekcie