Kluczowym aspektem projektu było stworzenie intuicyjnego, wydajnego i zoptymalizowanego UX/UI, które zapewni użytkownikom płynne i komfortowe doświadczenie zakupowe. Przygotowaliśmy wersję mobilną i desktopową dla strony głównej, kategorii i produktów B2B, dostosowując je do specyfiki sprzedaży oraz oczekiwań klientów biznesowych i detalicznych. Finalnie wdrożyliśmy rozwiązania UX w trzech wariantach, zapewniając spójność i funkcjonalność na każdym etapie zakupowym.
Projektowanie i wdrażanie sklepu dla agencji influencerskiej, takiej jak Collabstore, wymagało nie tylko stworzenia intuicyjnego UX/UI, ale także uwzględnienia specyfiki sprzedaży obozów oraz procesów administracyjnych związanych z dokumentacją. Każdy etap ścieżki zakupowej musiał być dostosowany zarówno do użytkowników mobilnych, jak i desktopowych, a dodatkowe funkcje – jak obsługa dokumentów zależnych od wybranej opcji transportu czy formularze danych uczestników – musiały być czytelne i łatwe w obsłudze.
WYZWANIE 01:
Złożona ścieżka zakupowa – konieczność dodania niestandardowych pól w checkout oraz procesów dotyczących dokumentów wymagała przemyślanego UX i dostosowanej architektury informacji.
WYZWANIE 02:
Dostosowanie procesu dokumentacji różne warianty produktów (z dojazdem/bez dojazdu) wymagały różnych dokumentów, co musiało zostać automatycznie uwzględnione w systemie.
WYZWANIE 03:
Optymalizacja mobilna – projektowanie pod mobile-first było kluczowe, zwłaszcza biorąc pod uwagę młodszą grupę odbiorców korzystającą głównie ze smartfonów.
WYZWANIE 04:
Spójność z marką i targetem – sklep musiał oddawać ducha influencer marketingu, a jednocześnie być funkcjonalnym narzędziem sprzedażowym.
WYZWANIE 05:
Integracje techniczne – konieczność połączenia sklepu z systemami do zarządzania dokumentami oraz automatyzacja wysyłki plików do klientów.
WYZWANIE 06:
Przejrzystość procesu dla użytkownika – zapewnienie intuicyjności formularzy, tak aby klienci bez problemu wiedzieli, jakie dane muszą podać i jakie dokumenty otrzymają.
Etap 1
Analiza i warsztaty koncepcyjne
Etap 2
Architektura informacji i user flow
Etap 3
Makiety low-fidelity
Etap 4
Projekt UX/UI high-fidelity
Etap 5
Interaktywne prototypy i testy użyteczności
Etap 6
Finalizacja designu i dokumentacja
Analiza i warsztaty koncepcyjne
Zebranie wymagań, zrozumienie grupy docelowej, analiza ścieżki użytkownika i specyficznych wymagań związanych z procesem sprzedaży i dokumentacją (2-3 tygodnie).
Architektura informacji i user flow
Opracowanie struktury strony, kluczowych ścieżek użytkownika i logiki checkoutu, uwzględniającej różne warianty produktów i wymagane dokumenty (1-2 tygodnie).
Makiety low-fidelity
Stworzenie wstępnych szkiców interfejsu dla desktopu i mobile, iteracje na podstawie pierwszych feedbacków (1-2 tygodnie).
Projekt UX/UI high-fidelity
Dopracowanie szczegółowych widoków, zaprojektowanie strony głównej, kategorii, kart produktów, checkoutu z dodatkowymi polami i procesem dokumentacyjnym (3-4 tygodnie).
Interaktywne prototypy i testy użyteczności
Przygotowanie klikalnych wersji interfejsu, przeprowadzenie testów z użytkownikami, iteracyjne poprawki na podstawie wyników (2-3 tygodnie).
Finalizacja designu i dokumentacja
Dostosowanie plików pod development, przygotowanie stylguidów, dokumentacji komponentów UI i przekazanie projektów zespołowi wdrożeniowemu (1-2 tygodnie).
Komentarz
Łukasz Kopicki
CEO, Webixa