polszklo.com.pl
Wyzwanie
Klient zgłosił się z potrzebą odnowienia wizualnego starego sklepu opartego o PrestaShop i przeniesienia go na Woocommerce, poprawy UX w celu zredukowania dużej liczby porzuconych koszyków i sprawnego działania na telefonach.
Rozwiązanie
Zaprojektowałem sklep z myślą o maksymalnym ułatwieniu zakupów. Skupiłem się na całkowitym uproszczeniu całej ścieżki klienta szczególnie w wersji mobile, intuicyjnej nawigacji, oraz strategicznym rozmieszczeniu elementów zachęcających do zakupu.
Ścieżka zakupowa została zoptymalizowana od wyszukiwania i filtrowania produktów, przez koszyk, aż po finalizację zamówienia. Po analizie usunąłem niepotrzebne kroki, usprawniliśmy formularze i wprowadziliśmy rozwiązania, które minimalizują porzucanie koszyków, zwłaszcza na urządzeniach mobilnych.
Opracowałem klarowną strukturę sklepu – przejrzyste kategorie, rozbudowane filtry produktowe, czytelne karty produktów oraz logiczne powiązania między sekcjami. Dzięki temu klient niezależnie od tego, czy szuka konkretnego rodzaju szkła, sztućów czy elementu dekoracyjnego, szybko znajduje to, czego potrzebuje. Wynikiem jest nie tylko ładniejszy sklep, ale przede wszystkim wygodne, efektywne narzędzie sprzedażowe, które realnie przekłada się na satysfakcję klientów i wyniki biznesowe polszklo.com.pl.
User flow dla sklepu polszklo.com.pl
Po rozmowach z kierownikiem sklepu okazało się, że według informacji przekazanych przez klientów klasyczna ścieżka była nie intuicyjna i przekazywała błędne dane dotyczące metod i cen dostawy do checkout’u co powodowało zamieszanie i w finale prowadziło do porzucenie zakupów. Przeprowadziłem szczegółową analizę istniejącego user flow, mapując każdy krok od wejścia na stronę aż po finalizację zamówienia na podstawie typowej Persony dokonującej zakupów na stronie.
Monika – Pracownik restauracji, odpowiedzialna za zakupy zastawy.
Cele: szybko znaleźć ładne, oryginalne porcelanowe talerze i dokończyć zakup bez zbędnych komplikacji.
Frustracje: nie lubi skomplikowanych interfejsów i długich procesów, posiada niski próg irytacji, szybko rezygnuje kiedy coś nie idzie po jej myśli.
Pierwotna ścieżka zakupowa użytkownika
Kluczowym problemem było to, że informacje o dostawie wybrane w koszyku nie przenosiły się do checkoutu, co wymuszało ponowny wybór, ponadto koszyk pełnił rolę martwego etapu, który nie wnosił wartości, a jedynie wydłużał proces, oraz brakowało możliwości szybkiego przejścia do zamówienia zaraz po dodaniu produktu.
Wdrożona ścieżka zakupowa użytkownika
Usunąłem zbędny krok koszyka jako obowiązkowy etap i wprowadziłem popup z upsellem zaraz po dodaniu produktu do koszyka, który daje użytkownikowi możliwość wyboru: wrócić do przeglądania lub finalizować zakup. Efektem tych zmian jest krótsza, bardziej intuicyjna ścieżka nastawiona na konwersję – użytkownik mniej się frustruje, a decyzja zakupowa jest wspierana w kluczowym momencie, tuż po dodaniu produktu do koszyka.
UX Wireframes
Przed przejściem do stworzenie projektu UI high-fidelty, stworzyłem wireframe’y aby zdefiniować layout, treść i jej hierarchię oraz kluczowe interakcje wtrakcie ścieżki zakupowej. Projekt UX pozwolił przedewszystkich zwizulaizować strukturę strony dla klienta oraz zwalidować wszystkie kroki oraz samą ścieżkę przed finalnym zaprojketowaniem warstwy wizualnej.
Typografia i kolory
JostSemibold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Open Sans Regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Paleta kolorów
#DB003B
#03030C
#FFFFFF
#F9F9F7
