Bergerat Monnoyeur

Konfigurator produktów dla oficjalnego dystrybutora maszyn CAT w Polsce

Dowiedz się, jak zaprojektowaliśmy i wdrożyliśmy rozwiązanie umożliwiające pełną konfigurację maszyn CAT.

Konfigurator produktów Bergerat Monnoyeur
1
Problem
Zobacz
2
Nasze rozwiązanie
Zobacz
3
Szczegóły rozwiązania
Zobacz
4
Projekt w liczbach
Zobacz
5
Efekty pracy
Zobacz
6
Technologie
Zobacz

Problem

dlaczego nawiązaliśmy współpracę?

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.

Listing produktów w konfiguratorze

Nasze rozwiązanie

jaką strategię zastosowaliśmy?

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

jakie elementy okazały się kluczowe?
Wersja mobilna konfiguratora maszyn CAT

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

czyli statystyki realizacji
0

Stworzenie konfiguratora (razem z fazą projektowania graficznego) zajęło nam ok 750 h.

0

Zaprojektowaliśmy i wdrożyliśmy 7 widoków desktopowych i mobilnych.

0

Zespół projektowy składał się z 1 Back-End Developera, 1 Vue Developera, 1 Tech Leada i 1 Project Managera.

Konfiguracja maszyny CAT

Efekty pracy

co zyskał nasz klient?
  1. Przejrzysty i intuicyjny konfigurator maszyn oraz parametrów leasingu ułatwiający klientom dobranie elementów/akcesoriów do swoich potrzeb.
  2. Uproszczony proces składania zapytań o maszyny.
  3. Nieograniczone możliwości rozwoju konfiguratora o nowe opcje czy etapy.
  4. Nowoczesną szatę graficzną spójną z identyfikacją wizualną marki.
  5. Proste zarządzanie konfiguratorem poprzez rozbudowany panel administracyjny Drupala.

Masz pomysł na konfigurator produktów?

Wdróż go z ekspertami Smartbees