Profero jest platformą e-commerce oferującą tysiące produktów z możliwością dodania haftu cyfrowego lub druku. Produkt głównie skierowany do klientów B2B – firm zaopatrujących się w odzież firmową oraz reklamową.
Klient: Profero
Realizacja: YAX Interactive
Zakres moich prac: Projektowanie UX/UI sklepu
Realizacja: YAX Interactive
Zakres moich prac: Projektowanie UX/UI sklepu
Od stylescape do styleguide – wypracowanie
i uporządkowanie koncepcji wizualnej
i uporządkowanie koncepcji wizualnej
Przed tworzeniem docelowego layoutu przesłałem klientowi dwie plansze stylescape przedstawiające przykładowe komponenty, typografię, kolory etc. Dzięki temu narzędziu mogliśmy w szybki sposób dojść do wspólnej wizji.
W następnym kroku przygotowałem prostą bibliotekę z najważniejszymi komponentami, w celu standaryzacji wyglądu sklepu.
Landing page
Strona główna oprócz standardowych sekcji dla sklepów e-commerce miała zawierać odnośnik do specjalnych kategorii branżowych.
Lista produktów – filtry
Duża ilość produktów (ponad 7000) wymaga odpowiedniej kategoryzacji. Sklep jest zsynchronizowany z API hurtowni odzieży reklamowej, dlatego przy projektowaniu filtrów uwzględniłem parametry, które są przez nich udostępniane.
Katalog składa się z wielu dostawców, którzy posiadają różne standardy zdjęć produktowych, dlatego na tym poziomie występuje brak spójności – widoczne zdjęcia na modelce, lifestyle'owe oraz bez tła.
Strona produktowa
W przypadku tej realizacji strona produktowa nieco odbiega od standardowych e-commerce'ów odzieżowych. Firmy i organizacje chcące kupić odzież ze znakowaniem składają zamówienia na wiele sztuk, dlatego opcja wyboru ilości tylko dla jednego rozmiaru byłaby tutaj mało użyteczna.
Cena dla poszczególnego rozmiaru też jest nieprzypadkowa – wielu producentów posiada wyższe ceny dla rozmiarów powyżej XXL.
Kalkulator umieszczony na dolnym pasku pozwala śledzić wszelkie zmiany w procesie składania zamówienia.
Konfiguracja produktu – dodanie znakowania
Po wybraniu koloru oraz odpowiedniej ilości sztuk dla konkretnych rozmiarów, użytkownik dodaje znakowanie wybierając kolejno: miejsce znakowania dedykowane konkretnemu produktowi, metodę znakowania, wgrywa plik oraz w przypadku haftu komputerowego, dobiera odpowiedni pakiet hafciarski.
