Signor Leone - konfigurator garniturów szytych na miarę. Wizualizacja wyglądu garderoby przed wizytą w salonie

Ta aplikacja pozwala użytkownikom na stworzenie unikalnego zestawu garniturowego - od wyboru tkaniny i kroju, po kolor podszewki i typ guzika - a także na przesłanie zamówienia do realizacji. Projekt obejmował również stworzenie prototypów UX/UI oraz budowę panelu administracyjnego, który umożliwia kompleksowe zarządzanie dostępnymi opcjami.

Wyzwanie

Celem projektu było stworzenie zaawansowanego konfiguratora garniturów, który:

• Pozwala klientom na pełną konfigurację elementów ubioru zgodnie z ich preferencjami.
• Oferuje realistyczny podgląd wybranych opcji bez konieczności kontaktu z obsługą sklepu.
• Umożliwia administratorom sprawne zarządzanie wariantami i teksturami produktów.
• Zachowuje wysoką wydajność mimo obsługi dużej liczby zdjęć i zmiennych.

Największym wyzwaniem było wierne odwzorowanie wizualne garnituru, przy jednoczesnym zachowaniu płynności działania i intuicyjności interfejsu. Z uwagi na ogromną liczbę możliwych kombinacji elementów, kluczowym aspektem była także optymalizacja wydajności oraz organizacja danych w systemie CMS.

Rozwiązanie

Zespół Boring Owl zaprojektował i wdrożył pełne rozwiązanie technologiczne wspierające cały proces konfiguracji i zarządzania garniturami:

• Frontend: Next.js z TypeScript - zapewnia wydajność, optymalizację zdjęć i elastyczność w implementacji logiki.
• Stan aplikacji: Zustand - do zarządzania stanem globalnym konfiguratora.
• Obsługa formularzy i danych: React Hook Form, Axios, React Query - zapewniają płynną komunikację z backendem i walidację danych.
• Backend i CMS: Node.js z Express oraz Strapi - zarządza opcjami konfiguracji, materiałami i treścią.
• Baza danych: PostgreSQL - zapewnia wydajną i stabilną strukturę danych.
• Hosting: Vercel - automatyczne wdrożenia i optymalizacja aplikacji.
• Pozostałe integracje:
  • Przechowywanie multimediów: Cloudinary - przechowywanie i optymalizacja zdjęć tekstur i modeli.
  • Testy i dokumentacja: BugBug - testy end-to-end oraz dokumentacja z przypadkami testowymi.

Kluczowe Funkcjonalności

• Interaktywny konfigurator 2D pozwalający na wizualizację garnituru w czasie rzeczywistym.
• Zaawansowane menu konfiguracyjne z dynamiczną logiką zależności między opcjami.
• Panel administratora w Strapi do zarządzania teksturami, opisami, cenami i widocznością wariantów.
• Obsługa paczek zip zawierających modele graficzne do łatwego wgrywania nowych konfiguracji.

Rezultaty

• Usprawnienie procesu zakupowego, użytkownik może samodzielnie stworzyć konfigurację bez pomocy konsultanta.
• Redukcja kosztów operacyjnych,  konfigurator przejmuje rolę wstępnych konsultacji z klientem, co pozwala zaoszczędzić czas i zasoby.
• Większe zaangażowanie użytkowników oraz uproszczenie ścieżki zakupowej prowadzi do lepszych wyników sprzedaży.
• Wysoka wydajność aplikacji, mimo wielu dostępnych opcji, aplikacja ładuje się błyskawicznie i działa bez zarzutu.
• Realistyczna wizualizacja produktu buduje zaufanie klientów i zmniejsza ryzyko zwrotów.

Podsumowanie

Projekt konfiguratora dla marki Signor Leone powstał dzięki starannemu doborowi technologii, przyjaznemu panelowi administracyjnemu oraz szczegółowym wizualizacjom. To narzędzie znacząco upraszcza i automatyzuje proces zamawiania garniturów szytych na miarę, a aplikacja zwiększa komfort użytkowników.