Kompleksowy projekt UX/UI oraz wdrożenie sklepu internetowego na PrestaShop z autorskim szablonem. Zaprojektowaliśmy pełną ścieżkę zakupową — od strony głównej, przez widoki kategorii i kart produktów, aż po koszyk, kasę i stronę podziękowania.
Odwiedź sklep
Zakres prac
UX/UI Design
Development
Custom grafika
Stały support
Wyzwanie
Meble dla dzieci kupuje się oczami. Rodzic nie szuka „łóżka 160×80” — szuka konkretnego koloru i wzoru, który zagra z resztą pokoju, i chce ten wybór zobaczyć, a nie klikać w ciemno po rozwijanej liście. Stara wersja sklepu opierała się na klasycznych kombinacjach PrestaShop: wszystkie warianty dzieliły jedną kartę produktu, wspólny opis i jeden adres URL — klient wybierał na ślepo, a dla Google poszczególne warianty w ogóle nie istniały jako osobne strony. Osobnym tematem była logistyka, która w branży meblowej potrafi zjeść marżę: jedno łóżko czy szafa to często kilka paczek o różnych wymiarach, a kurier musi dostać komplet danych dla każdej z nich. Przy rosnącej skali zamówień ręczne rozpisywanie przesyłek nie wchodziło w grę.
Rozwiązanie
Zaprojektowaliśmy kompletny UX/UI sklepu — od strony głównej, przez kategorie i karty produktów, aż po koszyk, kasę i stronę podziękowania — i wdrożyliśmy całość na PrestaShop 8 z autorskim szablonem.
Sercem projektu jest moduł wariantów oparty na pojedynczych, powiązanych produktach zamiast klasycznych kombinacji. Wybór na karcie jest wizualny: miniatury wzorów, swatche kolorów i tekstur oraz opcje z dopłatą, a po najechaniu klient widzi dynamiczny podgląd produktu. Ofertę ze starej wersji sklepu przemigrowaliśmy na nowy model — każdy wariant dostał własny adres URL, opis i cechy, z rozbiciem cen, zdjęć i stanów magazynowych. Warianty, które wcześniej dzieliły jedną kartę, dziś indeksują się w Google osobno.
Średni koszyk podnoszą zestawy produktów — gotowe bundle łączące meble z produktami uzupełniającymi, które klient dokłada jednym kliknięciem na karcie produktu albo w koszyku.
Logistykę domyka wielopaczkowość: system zbiera dane logistyczne każdej paczki składającej się na produkt i automatycznie generuje dla kuriera komplet przesyłek z pełnymi parametrami, sumując paczki na poziomie całego zamówienia. Po wdrożeniu zostaliśmy przy sklepie w ramach stałego supportu — dowieźliśmy m.in. rabaty ilościowe i zgodność z dyrektywą Omnibus.
Opinia
Współpraca z firmą 4pixel i Arkiem przy tworzeniu sklepu internetowego Kocot Kids była bardzo dobrym doświadczeniem. Od początku mogliśmy liczyć na konkretne podejście, sprawną komunikację i dużą elastyczność przy wdrażaniu naszych pomysłów. Arek potrafił nie tylko zrealizować nasze założenia, ale również zaproponować rozwiązania, które poprawiły wygląd i funkcjonalność sklepu. Cały proces przebiegał sprawnie, a wszystkie uwagi i zmiany były realizowane szybko i bez zbędnych komplikacji. Efekt końcowy w pełni spełnił nasze oczekiwania. Sklep jest estetyczny, czytelny i wygodny dla klientów. Zdecydowanie polecamy 4pixel każdemu, kto szuka rzetelnego wykonawcy, który zna się na swojej pracy i naprawdę angażuje się w projekt.
Funkcjonalności
Wybrane rozwiązania, które zbudowaliśmy w tym projekcie — od dedykowanych modułów po elementy UX wspierające sprzedaż.
Wariantowość oparta o pojedyncze, powiązane produkty — nie o klasyczne kombinacje. Na karcie wybór jest wizualny: miniatury zdjęć (np. wzór), swatche kolorów i tekstur oraz opcje z dopłatą. Na hover widać dynamiczny podgląd produktu, a możliwe opcje danego wyboru są podświetlane.
Gotowe bundle’e łączące meble i produkty uzupełniające w jeden zakup. Na karcie i w koszyku klient dokłada zestaw jednym kliknięciem — wyższy średni koszyk bez ręcznego składania zamówienia z wielu pozycji.
Przeniesienie oferty ze starej wersji sklepu, gdzie warianty były kombinacjami, na model pojedynczych produktów — pod indeksację i osobne URL-e SEO. Każdy wariant ma teraz własny opis i cechy; wcześniej kombinacje dzieliły te same dane produktu. Przy migracji rozbito też ceny, zdjęcia i stany magazynowe.
System zbiera dane logistyczne dla każdej paczki składającej się na produkt i automatycznie generuje odpowiednią liczbę przesyłek dla kuriera z kompletnymi parametrami. Produkt może składać się z wielu paczek — mechanizm sumuje je też na poziomie całego zamówienia.
Projekt
Najedź (desktop) lub wyśrodkuj (mobile) — auto-scroll · kółko / gest — ręcznie · kliknij, aby powiększyć
Desktop
Mobile
