Bergerat Monnoyeur
Konfigurator produktów dla oficjalnego dystrybutora maszyn CAT w PolsceDowiedz się, jak zaprojektowaliśmy i wdrożyliśmy rozwiązanie umożliwiające pełną konfigurację maszyn CAT.
Problem
Przed wdrożeniem konfiguratora wybór maszyny na stronie CAT był wymagającym zadaniem. Wszystkie rodzaje maszyn oraz elementy dodatkowego wyposażenia były zaprezentowane osobno. Chcąc skonfigurować maszynę, Klient musiał zapisywać poszczególne wybory, a następnie wysyłać swoje zapytanie. Wiązało się to również z ryzykiem, że wskazane przez klienta elementy mogły być niekompatybilne z danym typem maszyny. Stworzenie konfiguratora produktów było ważnym krokiem, który znacznie usprawni i skróci proces wyboru maszyn, a tym samym wpłynie na wzrost satysfakcji Klientów i przyspieszenie pracy działu sprzedaży.
Nasze rozwiązanie
Oficjalna strona Bergerat Monnoyeur została zbudowana na Drupalu, stąd naturalnym wyborem była kontynuacja działań na tym systemie. Drupal 9 odpowiada za wyświetlanie strony głównej konfiguratora. Na nim oparty jest również panel administracyjny rozwiązania. Drupal wystawia także API, które wykorzystaliśmy w celu budowy dynamicznego konfiguratora we Vue 3 działającego na zasadzie SPA (Single-Page Application).
Zaprojektowany przez nas konfigurator składa się z 4 kroków – wyboru typu maszyny, podstawowej konfiguracji (np. wyboru kabiny, silnika, oświetlenia), opcji dodatkowych (niestandardowego wyposażenia, rodzaju oleju czy typu gwarancji) oraz podsumowania. W tym ostatnim kroku Klient może zobaczyć informacje o pełnej konfiguracji razem z wyliczeniem kosztów, a także przesłać zapytanie dotyczące skonfigurowanego sprzętu.
Stworzony konfigurator umożliwia Klientowi szybko i wygodnie wybrać maszynę i dopasować do niej kompatybilne elementy, zobaczyć, ile będzie kosztować sprzęt w danej konfiguracji leasingu i automatycznie wysłać zapytanie. Ponadto, podczas procesu wyboru maszyny Klient może dowolnie zmieniać ustawienia i powracać do poprzednich kroków.
Szczegóły rozwiązania
User experience
Poza pracami developerskimi, nasz zespół był także odpowiedzialny za stworzenie szaty graficznej konfiguratora. Kluczem przy projektowaniu było zadbanie o maksymalny komfort obsługi rozwiązania zarówno na urządzeniach mobilnych, jak i desktopowych. W tym celu zastosowaliśmy m.in. jasno opisane etapy konfiguracji, możliwość zwijania/rozwijania każdej z sekcji oraz buttony „dalej”, dzięki którym użytkownik ma pewność, że nie pominie żadnego etapu tworzenia maszyny.
Single-Page Application
Jak wspomnieliśmy, konfigurator maszyn został zbudowany na zasadzie SPA. Oznacza to, że kolejne działania podejmowane w ramach konfiguratora, np. przejście do następnego etapu tworzenia maszyny, nie wywołują przeładowania strony. Takie rozwiązanie znacznie przyspiesza działanie aplikacji, jednocześnie zapewniając użytkownikowi komfort podczas obsługi konfiguratora.
Wybór wyposażenia
W procesie konfiguracji dostępne są jedynie elementy i akcesoria kompatybilne z danym typem maszyny. Dzięki temu klient ma pewność, że stworzona przez niego wycena nie zawiera wyposażenia, które może nie odpowiadać wymaganiom konkretnego sprzętu.
Opcje leasingu
W trakcie konfiguracji maszyny Klient na bieżąco widzi, jak zmienia się cena sprzętu w zależności od wybranych opcji. W sekcji leasingowej użytkownik może ustawić i w dowolnym momencie zmienić m.in. typ leasingu, czas trwania umowy czy procent wpłaty wstępnej oraz zobaczyć finalną cenę skonfigurowanej maszyny.
Generowanie oferty
Po przejściu wszystkich etapów konfiguracji klient może nie tylko przesłać zapytanie do działu sprzedaży, ale także zobaczyć ofertę i pobrać ją w formacie PDF na własny użytek.
Import danych
Import danych w konfiguratorze można przeprowadzić na dwa sposoby. Klasyczną metodą – przeklikując dostępne opcje w panelu administracyjnym lub za pomocą przygotowanego według wzoru pliku CSV. Dzięki tej drugiej opcji można masowo zaciągać dane np. o cenach czy wymaganiach technicznych maszyny do panelu, tym samym oszczędzając mnóstwo czasu.
Projekt w liczbach
Stworzenie konfiguratora (razem z fazą projektowania graficznego) zajęło nam ok 750 h.
Zaprojektowaliśmy i wdrożyliśmy 7 widoków desktopowych i mobilnych.
Zespół projektowy składał się z 1 Back-End Developera, 1 Vue Developera, 1 Tech Leada i 1 Project Managera.
Efekty pracy
- Przejrzysty i intuicyjny konfigurator maszyn oraz parametrów leasingu ułatwiający klientom dobranie elementów/akcesoriów do swoich potrzeb.
- Uproszczony proces składania zapytań o maszyny.
- Nieograniczone możliwości rozwoju konfiguratora o nowe opcje czy etapy.
- Nowoczesną szatę graficzną spójną z identyfikacją wizualną marki.
- Proste zarządzanie konfiguratorem poprzez rozbudowany panel administracyjny Drupala.