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
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/c6096e16-444b-48b0-bb04-d22e0417b649_rw_1920.jpg?h=c2c026acc173f3358c99dc60791b04a0)
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.
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/80d2b026-9a54-4b75-ae8c-d9102011d30f_rw_1920.jpg?h=9096d3a2b24f036727f36d52fb432da5)
Landing page
Strona główna oprócz standardowych sekcji dla sklepów e-commerce miała zawierać odnośnik do specjalnych kategorii branżowych.
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/a1da6083-5495-4e35-aba1-c76347386bd0_rw_1920.jpg?h=4ac876331aad51f8efb3299ef0591c16)
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.
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/25bfca7e-c5cb-4ac2-9603-e123a323801c_rw_1920.jpg?h=ce07d2548fc5ce30f1a639813a901eae)
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.
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/fa827c8e-f2ba-4c71-aab5-1c44c85f6324_rw_1920.jpg?h=0060dac4c5180dc00548996ccae3c758)
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.
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/9d5ae74e-d664-4b4a-bd3a-af32acdbaca4_rw_1920.png?h=072728dc7d4574e944f6fcaca6bfc8bd)
![](https://cdn.myportfolio.com/16a989c3-5f7b-4503-9909-aa1c025778ab/dd506ac0-a05c-4a72-9e7b-f6a1de7be7d5_rw_1920.jpg?h=6e7444cf621cadfc70a44a5a92fb42c1)