Signor Leone - konfigurator garniturów szytych na miarę

Lead

Internetowy konfigurator garnituru pozwalający na dobranie odpowiedniego materiału i stylizacje elementów w dowolny sposób. Aplikacja w bardzo obszerny sposób umożliwia użytkownikom skonfigurowanie garnituru szytego na miarę. Projekt oprócz samego konfiguratora zawiera również panel administratora, który to pozwala na zarządzanie dostępnymi opcjami. Projekt w całości został wykonany przez zespół Boring Owl.

Wstęp

Projekt powstał na zlecenie marki Signor Leone, która zajmuję się sprzedażą garniturów zaliczanych do segmentu premium. Tego typu produkty są przeważnie dopasowywane indywidualnie do potrzeb klienta, natomiast witryna sklepu nie posiada opcji indywidualnego dopasowania. Powstały konfigurator rozwiązuje zatem problem stylizacji garnituru do potrzeb klienta bez konieczności kontaktu ze strony sklepu. Klient przy pomocy aplikacji w łatwy i intuicyjny sposób może sprawdzić jak prezentuje się wybrana przez niego konfiguracja. Oprócz wyboru materiału, konfiguracji czy zmiany poszczególnych elementów danej części garnituru użytkownik jest w stanie zobaczyć jak prezentują się inne kolory podszewki czy też guzików.

Harmonogram projektu

Projekt został wdrożony produkcyjnie w lutym 2023 roku. Prace nad wersją MVP trwały nieco ponad pół roku.

lipiec 2022 - listopad 2022: Product Design
listopad 2022 - grudzień 2022: Projektowanie makiet
grudzień 2022 - luty 2023: Programowanie pierwszej wersji produktu + dokumentacja
luty 2023: Testowanie aplikacji

Stack technologiczny

• React js
• Next js
• Typescript
• React Hook Form
• Axios
• React Query
• Zustand
• Material UI
• Node js Express js
• Strapi
• Vercel
• PostgresSQL
• Cloudinary

Product design

Pierwsze rozmowy dotyczące projektu miały miejsce na długo przed podjęciem prac. Marka Signor Leone jest jedną z bardziej rozpoznawalnych w swojej branży i słynie z jakości swoich usług dlatego też nie łatwo było sprostać wszystkim oczekiwaniom. Tego typu garnitury zazwyczaj wymagają konsultacji z klientem głównie dlatego, że  są one szyte na miarę oraz dlatego, że każdy szczegół jest istotny. Największym wyzwaniem było to aby konfigurator jak najlepiej urzeczywistniał prawdziwy garnitur. Na wstępnym etapie projektowania aplikacji pojawił się pomysł aby był on wyświetlany za pomocą modelu 3D, okazało się jednak, że przy tak dużej liczbie zmiennych elementów budżet jaki zakładał projekt może zostać przekroczony już na pierwszym etapie tworzenia aplikacji. Postanowiono zatem użyć modeli 2D, których zdjęcia pozwalałby odzwierciedlić nieco więcej zachowując przy tym jednocześnie rozsądny czas renderowania modelu.

Projektowanie makiet

Proces tworzenia makiet dla konfiguratora garniturów był długotrwałym i wymagającym zadaniem. Początkowo, po głębokim zrozumieniu biznesowych wymagań i oczekiwań klienta, zespół projektowy zdefiniował wszystkie niezbędne atrybuty garnituru, które miały być uwzględnione w konfiguratorze. Do tych atrybutów należały m.in. tkanina, kolor, krój, styl kołnierza, liczba guzików, typ kieszeni i wiele innych.

Następnym etapem procesu było stworzenie makiet niskiej szczegółowości (wireframes), oddającej obraz funkcjonalny końcowego produktu. Poprzez kolejne iteracje powstał w pełni interaktywny model aplikacji. Został on ostatecznie przekształcony w wysokiej jakości interfejs użytkownika, którego nadrzędnym celem było niekonkurowanie wizualne z modelem garnitura oraz łatwość użytkowania.

Wersja MVP

Pierwsza wersja produktu była nie lada wyzwaniem, przyszło nam się bowiem mierzyć ze złożonością opcji dostępnych w lewym menu, było to spowodowane szeregiem zależności wynikających z możliwości konfiguracji. Oprócz skomplikowanej logiki jaka została zaimplementowana w menu konfiguratora jednym z największych wyzwań było poprawne wyświetlanie samego modelu garnituru. Ze względu na fakt, że tylko na marynarkę składa się około 25 wysokiej jakości zdjęć, zarówno ułożenie jak i optymalizacja czasu ładowania nie były najłatwiejszym zadaniem.  W między czasie doszły dodatkowe możliwości konfiguracji oraz druga opcja wyświetlania na modelu fizycznym.  Do wersji MVP doszedł również panel administratora, z którego zarządza się opcjami jakie posiada konfigurator. Z tego poziomu możliwe jest przede wszystkim dodawanie i edycja materiałów, opcji guzików, zarządzaniem cenami poszczególnych elementów, ustawienia widoczności czy nawet zmiana opisu opcji szycia. Front aplikacji jest oparty o Next.js głównie ze względu na szeroki wachlarz wbudowanych gotowych rozwiązań, do których to możemy zaliczyć m.in. optymalizację zdjęć. Do przechowywania globalnego stanu aplikacji została wykorzystana biblioteka Zustand a do komunikacji z backendem posłużył Axios oraz React Query. Zdjęcia są przechowywane w Cloudinary, a CMS jest oparty o Strapi. Na prośbę klienta sporządziliśmy również szczegółową dokumentacje produktu zawierająca m. in. przypadki testowe. Do testów end-to-end skorzystaliśmy z gotowego narzędzia BugBug.