Migracja sklepu z Shopera i przeprojektowanie ścieżki zakupowej

Poprzednia strona główna była witryną: dużo produktów, mało kierunku. Nowa zaczyna od jednego pytania — dla jakiego zwierzęcia kupujesz — i dopiero potem pokazuje ofertę. Kafle gatunków są pierwszym ekranem, bo to jedyna decyzja, którą klient ma podjąć od razu.

Niżej strona układa się w bloki o jasnej roli: Nowości dla stałych klientów, którzy wiedzą, co już znają, Bestsellery jako dowód społeczny dla nowych, i blok sezonowy, który marketing wymienia sam — wiosną obroże i wsparcie odporności, jesienią co innego. Zamyka je pas zaufania: własne receptury, produkcja w Polsce, badania laboratoryjne, wysyłka w 24 godziny.

Każdy z tych bloków to osobny komponent z własnymi ustawieniami, nie zakodowana na sztywno sekcja. Kampania sezonowa nie wymaga programisty — to była jedna z głównych rzeczy, których marce brakowało na starej platformie.

Karmy i suplementy kupuje się inaczej niż ubrania. Decyduje skład, dawkowanie i to, czy produkt nadaje się dla konkretnego zwierzęcia — dlatego karta produktu prowadzi od przeznaczenia i składu, przez sposób użycia, po pojemność i dostępność, zamiast chować te informacje w zakładce na końcu strony.

Osobno rozwiązaliśmy porównywalność cen. Przy produktach sprzedawanych w różnych gramaturach sama cena nic nie mówi — opakowanie 2 kg i 12 kg to dwie różne liczby, których klient nie podzieli w głowie. Wdrożyliśmy przeliczanie ceny za jednostkę — za kilogram, litr albo 100 ml — pokazywane zarówno na listingu, jak i na karcie produktu.

Tam, gdzie produkt jest w promocji, obok ceny stoi najniższa cena z 30 dni wymagana dyrektywą Omnibus. Potraktowaliśmy to jako element projektu, a nie doklejony obowiązek: informacja jest czytelna, ale nie konkuruje wizualnie z ceną aktualną, więc komunikat promocji nadal działa.

Kartę zamyka blok „Zobacz też" z produktami z tej samej kategorii i linii — w asortymencie, w którym preparaty się uzupełniają, to realne źródło większego koszyka, a nie tylko wypełniacz strony.

Sklep ma darmową dostawę od 100 zł i to jest jego najmocniejszy mechanizm sprzedażowy — pod warunkiem, że klient wie, ile mu brakuje. Zaprojektowaliśmy pasek postępu do darmowej dostawy, który pokazuje brakującą kwotę w koszyku i aktualizuje się przy każdej zmianie ilości.

To drobny komponent z nieproporcjonalnym wpływem na średnią wartość zamówienia: zamiast abstrakcyjnego progu w regulaminie klient widzi konkretne „brakuje 18 zł" i ma tuż obok propozycje produktów, które tę różnicę domykają.

Do tego doszła lista życzeń — w sklepie, w którym zakupy są cykliczne, a wybór karmy bywa rozłożony na kilka wizyt, zapisanie produktu na później jest naturalnym krokiem ścieżki, nie dodatkiem.

Przy migracji najłatwiej stracić to, czego nie widać: kolejność pól, momenty przeliczania kosztów, komunikaty błędów, zachowanie formularza przy zmianie sposobu dostawy. Rozpisaliśmy cały proces zamówienia na ekrany i stany, łącznie ze ścieżkami, w których coś idzie nie tak — nieudana płatność, wyczerpany stan magazynowy, błędny kod pocztowy.

Dopiero tak opisany checkout dało się odtworzyć na nowej platformie bez pogorszenia konwersji. Równolegle uprościliśmy to, co dało się uprościć: mniej pól widocznych naraz, wybór dostawy i płatności w jednym widoku, podsumowanie zamówienia stale dostępne obok formularza.

Przy katalogu, w którym nazwy produktów są techniczne, wyszukiwarka przestaje być dodatkiem. Wdrożyliśmy podpowiedzi pojawiające się w trakcie wpisywania — z miniaturami, ceną i kategorią, żeby wybór dało się zrobić bez przechodzenia na stronę wyników.

Podpowiedzi obejmują nie tylko produkty, ale też kategorie i rekomendacje dobrane do wpisywanej frazy. Dla klienta, który zna nazwę preparatu, to najkrótsza możliwa droga do koszyka; dla tego, który wpisuje objaw albo problem, wyszukiwarka staje się drugą nawigacją.