Opis projektu
Metodology Design thinking - Redesign sklepu B2B i B2C dla branży technicznej.
Zupełnie nowy wygląd strony główej, nowy wygląd listingu, nowy sposób rejestracji i sposobu logowania się, nowoczesny wygląd dashboardu klienta + nowe funkcjonalności.
Dodatkowo: zebranie danych do zmapowania procesu, wywiady pogłębione z dotychczasowymi użytkownikami, prowadzenie spotkań z członkami zarządu i handlem, analitykami i członkami zespołu IT. Dbanie o dobry flow pracy i komunikacji pomiędzy zespołami.
Cel projektu
Zaprojektowanie od nowa sklepu sprzedażowego e-commerce B2B(core)/B2C - obsługującego dziesiątki tysięcy klientów miesięcznie (potentat na rynku B2B)
Chęć zdobycia ogromnej przewagi nad konkurencją w B2C. Obroty firmy to ponad 1.5 MLD rocznie.
Tools
80%
10%
6%
4%
Zespół
1 UX designer
2 developers
IT Director
CEO
testerzy
Moja rola
Project Owner/UX Designer
Fazy projektu
-Discovery
Problemy
- Strona projektowana przez agencję w latach 2016-2020r. nie spełnia nowoczesnych wymagań UX trends, chaos w kolorystyce.
- Bardzo skomplikowany proces rejestracji klienta B2B/B2C.
- Bardzo skomplikowany listing - nieczytelność produktów.
- Dashboard klienta jest przestarzały i chaotyczny.
Rozwiązanie
- Przeprowadzenie analizy rynku podobnych systemów (TIM, Łazienka, TME, Amazon, eBay, Allegro). Sprawdzenie ścieżki rejestracji w aplikacjach HotJar oraz GA4, zidentyfikowanie problemów.
- Zaprojektowanie jak najbardziej optymalnej wersji oraz pilne wdrożenie. Przeprowadzenie audytu z wykorzystaniem heurystyk Nielsena. Dopracowanie nowej kolorystyki do książki kolorów Onninen K. Ponowny research rynku. Doprecyzowanie kluczowych elementów specyfiki naszej branży i sposobu działania.
- Przeprowadzenie wywiadów z klientami na temat najbardziej przydatnych funkcji oraz ich oczekiwań wobec dashboardu. Wprowadzenie nowych przycisków, nowe menu i zmiany w charakterystyce menu kafelkowym.
- Zmiana nazewnictwa kategorii (sortowanie kart). Poprawa przejrzystości listingu – usunięcie zbędnych elementów, dostosowanie odstępów, wielkości czcionek i kolorystyki.
VPC, Persona, User Journey
Po wywiadach na żywo z kilkoma klientami oraz handlowcami firmy przygotowałem Value Proposition Canvas, Personę oraz User Journey Map.
VPC
Persona
User Journey Map
Kolory
Listing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin ut augue
Listing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin ut augue
Listing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin ut augue
Koszyk
1. Zawartość koszyka
W nowym koszyku zdecydowałem się na podzielenie procesu zakupowego na trzy etapy, aby użytkownicy mogli łatwiej zarządzać swoimi zamówieniami. Pierwszy etap, Zawartość koszyka, pozwala użytkownikom na przeglądanie wszystkich dodanych produktów, a także edytowanie ilości lub usuwanie pozycji. Dodatkowo, istotną zmianą jest wprowadzenie możliwości zamawiania z kilku koszyków jednocześnie, co pozwala na łatwiejsze zarządzanie różnymi grupami produktów – od tych dostępnych w magazynie, po te, które wymagają zamówienia bezpośrednio od dostawcy.
2. Dostawa i płatność
Drugi etap, Dostawa i płatność, skupia się na uproszczeniu procesu wyboru metody wysyłki i płatności. Użytkownicy mogą teraz łatwo wybrać preferowaną opcję dostawy, zapoznać się z czasem oczekiwania oraz wybrać odpowiednią metodę płatności. Całość została zoptymalizowana pod kątem wygody i szybkości, by proces był jak najbardziej intuicyjny i komfortowy.
3. Podsumowanie transakcji
Na końcu, w etapie Podsumowanie transakcji, użytkownicy mają pełen wgląd w szczegóły zamówienia, w tym dostępność produktów, koszty dostawy oraz rabaty. To także moment, w którym mogą zweryfikować, które produkty są dostępne od razu, a które wymagają dodatkowego czasu na realizację (np. produkty od dostawcy).
Dzięki wprowadzeniu zamawiania z kilku koszyków jednocześnie, użytkownicy mogą teraz łatwo zarządzać swoimi zamówieniami, bez potrzeby składania wielu osobnych zamówień.
Karta produktu
W zaktualizowanej karcie produktu skupiłem się na poprawie przejrzystości i wygody użytkowania. Kluczowe informacje, takie jak cena i dostępność, są teraz lepiej wyeksponowane. Dodałem także warianty produktu, które wcześniej nie były dostępne, co stanowi bardzo istotny element UX. Teraz użytkownicy mogą łatwo wybierać różne opcje, takie jak rozmiar, kolor czy pojemność, bez konieczności przechodzenia do innych sekcji strony.
Zoptymalizowałem także układ galerii zdjęć, by użytkownicy mogli szybciej przeglądać zdjęcia dzięki poziomemu sliderowi. Wprowadziłem również ujednolicone karuzele z rekomendacjami produktów („produkty podobne”, „często kupowane razem”), które mają spójny wygląd i działanie z pozostałymi elementami serwisu.
Dodatkowo, razem z przyciskiem CTA, umieściłem najważniejsze informacje, takie jak: bezpłatna wysyłka, dostępne metody płatności oraz, co bardzo ważne dla naszych klientów, informacje o dostępności produktów w poszczególnych oddziałach w Polsce.
Przycisk „Dodaj do koszyka” są teraz sticky i pozostają widoczne podczas przewijania strony, co ułatwia finalizację zakupu. Całość została zoptymalizowana pod kątem urządzeń mobilnych, co znacznie poprawiło komfort zakupów na telefonach.
Dashboard klienta
W nowym dashboardzie klienta skupiłem się na zapewnieniu prostoty i intuicyjności. Główne informacje, takie jak status zamówienia, historia zakupów oraz dostępne rabaty, zostały umieszczone w jednym, łatwo dostępnym miejscu. Zmniejszyłem liczbę kliknięć potrzebnych do dotarcia do istotnych funkcji, co sprawia, że interakcja z dashboardem jest znacznie szybsza i bardziej efektywna. Dodałem także możliwość szybkiej edycji danych kontaktowych i adresowych, co pozwala klientom na łatwe zarządzanie swoimi informacjami bez zbędnych komplikacji.Wszystkie istotne funkcje zostały umieszczone w lewym menu kontekstowym, co pozwala użytkownikom szybko przełączać się między sekcjami i dostosowywać dashboard do swoich potrzeb. Dodatkowo, interfejs został zoptymalizowany pod kątem urządzeń mobilnych, zapewniając użytkownikom wygodę i komfort podczas korzystania z dashboardu na różnych urządzeniach.
.jpg)
Wersja mobile
W wersji mobile platformy commerce wprowadzono uproszczony interfejs zakupowy, dostosowany do mniejszych ekranów, co poprawia wygodę i szybkość przeglądania produktów. Dodano także skrócone ścieżki zakupowe i lepszą integrację z płatnościami mobilnymi, zwiększając konwersję użytkowników mobilnych.
Personalizacja klientów
Personalizowana strona główna – po zalogowaniu użytkownik widzi treści, oferty i produkty dopasowane do swojej profesji (np. hydraulik widzi armaturę, a elektryk kable i rozdzielnice).
Filtrowanie produktów wg profesji – opcja filtrowania lub ustawienia domyślnej kategorii w katalogu produktów, co skraca czas wyszukiwania.
Dedykowane zestawy narzędzi i promocje – tworzenie gotowych zestawów produktowych dopasowanych do specyfiki pracy danej grupy.
.jpg)
Opinie klientów
„Nowy design strony i funkcjonalności to strzał w dziesiątkę! Bardzo doceniam zmiany, takie jak dodanie opcji edytowania danych bezpośrednio w dashboardzie czy ulepszona paginacja. Proces zakupowy stał się szybszy i bardziej przejrzysty, a sama strona wygląda teraz bardziej nowocześnie. Czuć, że firma inwestuje w doświadczenie użytkownika, co przekłada się na moją satysfakcję jako klienta.”
„Zmiany, które zostały wprowadzone na stronie, naprawdę poprawiły komfort mojego zakupu. Nareszcie łatwiej poruszam się po stronie i szybciej znajduję to, czego szukam. Usprawnienie koszyka i paginacji naprawdę robi różnicę. Cieszę się, że strona jest teraz lepiej dostosowana do urządzeń mobilnych, bo zakupy na telefonie stały się znacznie przyjemniejsze!”
„Jako regularny klient, zauważyłem ogromną różnicę w jakości obsługi po tych zmianach. Przejrzystość strony i łatwiejsza nawigacja sprawiają, że mogę skupić się na zakupach, a nie na szukaniu produktów. Filtrowanie produktów działa płynnie, a dzięki rekomendacjom łatwiej odkrywam interesujące mnie artykuły. Jestem bardzo zadowolony!”