Case study - Konfigurator rolet okiennych dla Debesto.com

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.

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.

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.