Discovery phase - project assumptions
Cel/wyzwania:
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 i chęć zdobycia ogromnej przewagi nad konkurencją w B2C). Obroty fimy to ponad 1.5 MLD rocznie.
Drugą pracą za, którą byłem odpowiedzialny jako Product Owner onninen.pl było zaprojektowanie i wdrożenie nowych funkcjonalności na obecnej stronie onninen.pl (w obecnym layoutcie).
Moja odpowiedzialność:
nowa kolorystyka, nowy wygląd strony główej, nowy wygląd listingu, nowy sposób rejestracji i logowania się, nowoczesny wygląd dashboardu klienta + nowe funkcjonalności w nowym jak i starym layoutcie.
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.
Zespół składa się z: UX/UI Designer + koordynator projektów e-commerce, dyr IT, dyr. sprzedaży E-Commerce, programiści, testerzy.
Problems:
-
Bardzo skomplikowany proces rejestracji klienta B2B/B2C.
-
Strona projektowana przez agencję w latach 2016-2020r. nie spełnia nowoczesnych wymagań UX trends, chaos w kolorystyce.
-
Bardzo skomplikowany listing powodujący nieczytelność produktów.
-
Dashboard klienta jest dosyć przestarzały.
Solutions:
-
Przeprowadzenie researchu na rynku podobnych systemów (tim, łazienka, tme, amazon, ebay, allegro). Sprawdzenie w aplikacji HotJar, oraz UA>GA4 ścieżki rejestracji i gdzie tkwi problem.
Zaprojektowanie jak najbardziej optymanej wersji i pilne wdrożenie. -
Przeprowadzenie audytu z użyciem Heurystyk Nielsena.
Dopracowanie nowej kolorystyki do książki kolorów Onninen K. -
Ponowny research rynku.
Doprecyzowanie elementów must have specyfiki naszej branży i sposobu działania.
Nowe nazewnictwo (sortowanie kart).
Przejrzystość listingu. -
Wywiady z klientami co najbardziej jest przydatne i czego oczekuje klient w kontekście dashoboardu.
Nowe przyciski, nowe menu w charakterystyce kafelków.
Research and development
Mając wiedzę z zakresu Design Thinking przeprowadziłem wywiady z klientami oraz członkami grupy projektowej aby zebrać jak najwięcej trafnych założeń potrzebnych do budowy strony.
Goals:
-
Poznanie struktury dotychasowego systemu rejestracji oraz przemyśleń poszczególnych osób w firmie, odpowiedzialnej za rejestrację (backend, CRM konsultant, opiekun klienta e-com). Przegląd konkurencji.
-
Dowiedzenie się od zarządu i osób ściśle związanych z obsługą onninen.pl ich wizji na nowy koncept strony. Audyt UX onnnien.pl, audyt SEO (firma zewnętrzna), persona (jest już znana z projektu CPQ) oraz sprawdzenie wartości klienta B2B.
-
Otrzymanie jak największej ilości odpowiedzi co jest ważne na głównej stronie jak i na listingu i dla kogo to jest ważne? (sortowanie kart)
Jakie osoby są odpowiedzialne za content na głównej stronie i jak działa zasada publikacji treści. -
Jakie firmy i kto korzysta z funkcjonalności, które oferuje dashboard.
Jakie funkcje są najbardziej przydatne dla klientów B2B a jakie dla B2C?
Czego może brakować i dla kogo?
Findings from interviews
-
Długie na kilka ekranów pola do wypełnienia oraz skomplikowany sposób rejestracji z potwierdzeniem na e-mail, sms, opiekun klienta. Skomplikowana integracja z CRM poprzez API.
- Trzeba stworzyć nowy schemat rejestracji oparty na jednym ekranie i ew. monitami.
- Potrzebne będzie nowe API do przekazywania informacji do bazy klientów CRM, które umożliwi automatyczną rejestrację przy pomocy jednej z form bezpiecznej weryfikacji użytkownika (e-mail>sms).
- Przeprowadzenie researchu na rynku podobnych systemów (tim, łazienka, tme, amazon, ebay, allegro). Sprawdzenie w aplikacji HotJar, oraz UA>GA4 ścieżki rejestracji i gdzie tkwi problem.
Zaprojektowanie jak najbardziej optymanej wersji i pilne wdrożenie.
-
Po audycie zarząd stwierdził:
nowa strona ma uwzględniać najnowsze trendy UX oraz nowoczesne UI, które obecnie jest zachwiane na każdym polu. Ma być przejrzysta i uproszczona w obsłudze. Ma być najlepszą wizualnie i UXowo stroną wśród konkurencji. Uwzględniając książkę kolorów należy dopracować kolorystykę do nowych trendów ze względu na warunki w Polsce różniące się od tych w Skandynawii.
- Value Proposition Canvas nie odbiega zbytnio od wcześniej przygotowanych dla aplikacji CPQ.
-
Stronę główną zarządzają osoby z e-com oraz marketingu publikując ciekawe artykuły i promocje sprzedając miejsca dostawcom z branży.
Musi uwzględniać owe elementy sprzedażowo/marketingowe jednocześnie upraszaszczając wygląd i zwiększając znaczenie niektórych z nich. -
Wywiady nie do końca przedstawiały reprezentatywne wnioski, zwłaszcza kiedy zasób do przeprowadzania rozmów był ograniczony do kilkunastu osób z firm zaprzyjaźnionych.
Głównie to duże firmy operujące dużymi możliwościami oraz nie do końca zainteresowane szczerymi wypowiedziami.
- Były to firmy z branży hydraulicznej i elektrycznej oraz klimatyzacji.
- Na ten moment (95% badanych) nie było propozycji co do nowych funkcjonalości, w 92% przypadków opinie pokrywały się, z tym co do tej pory istnieje.
- Grupa projektowa podjęła działania nad uruchomieniem kont typu Masterkonto dla dużych klientów B2B w ramach nowej umowy biznesowej. Funkcje Masterkonta jakie zaplanowano do wdrożenia po akceptacji prototypów w Figma to: (Dodawanie, edycja użytkownika, akceptacja umów, autoryzacja poprzez sms, dodawanie/edycja adresu dostaw, dodawanie/edycja osoby upoważnionej do odbioru oraz możliwość odbioru kodem PIN/SMS).
User persona
-
Zbyszek jest osobą zaradną od samego początku. Niestety nie miał czasy na studiowanie i zainteresowanie branży przejął w spadku jak to ujął po ojcu.Został instalatorem już po średniej szkole i nie miał czasu aby iść na studia, ponieważ musiał utrzymać rodzinę, którą wcześnie założył. Onninen jest jednym z dostawców z branży hydraulicznej i nie jedyną. Bardzo często zamawia produkty na onninen.pl i jest to główny sposób zamówień oprócz zamawiania przez handlowca. Czasem musi skorzystać z obsługi handlowca, ponieważ czasem się gubi na onninen i nie może czegoś znaleźć, głównie chodzi o konkretny produkt z listingu. Lubi szybko pracować i zawsze dwa razy do roku odpoczywać na maksymalnie tygodniowych wyjazdach z rodziną.Często też korzysta z wyjazdów gratyfikacyjnych z konkurencyjnych firm Onninena za dokonywanie zakupów.
-
Paweł jest osobą zaradną od samego początku. Elektrykiem został po ukończeniu studiów inżynierskich i od raz rozwijał lokalny biznes jakim jest sklep z materiałami elektrycznymi. Bardzo często zamawia produkty na onninen.pl oraz na aliexpress w większych ilościach z chin jako element konkurencyjnych cen i jakości do europejskich producentów. Sprzedaje także na allegro. Onninen traktuje jako główne źródło utrzymania ale twierdzi, że obsługa zamawiania jest dosyć dobra ale mogło być lepiej. Lubi pracować, a także odpoczywać na wyjazdach z córką i żoną.
Design - in progress 28.11.2023r.
Design work
-
Przeprowadziłem audytu z użyciem Heurystyk Nielsena oraz audyt UI (formularz rejestracji, strona główna, listingi, dashboard, chat-gpt).
Stworzyłem User Journey Map dla onninen.pl
Projektowałem w Figma, Illustrator, plus prototypowanie wszystkich screenów.
Dopracowałem kolorystykę do książki kolorów Onninen K.
Link do Miro
-
Uwzględniając research i mikrokonwersje dokonałem zmian ilości ekranów do przeklikania przez klienta co powodowało dużą irytację. Zawarłem tylko i wyłącznie najważniejsze elementy na tym etapie potrzebne aby się zarejestrować. Przygtowałem dwa osobne formularze dla klienta B2B (core) oraz B2C (klient z bardzo dużym potencjałem). Projektowałem jeszcze w starej wersji kolorystycznej ale z nowym UI (nie mógł odbiegać zbytnio od reszty strony) i UX. Pomysł bardzo się spodobał, a niektóre elementy UI zostały wdrożone także na innych podstronach.
Feedback był bardzo pozytywny: "raczej prosta rejestracja, bardzo prosta i intuicyjna jak wszędzie"
Pobierz pdf
-
Kolejne zadania to zaprojektowanie strony głównej onninen.pl w nowym layoutcie z nową kolorystyką i wyglądem poszczególnych assetów.
Przejrzystość strony, nowa kolorystyka (60/30/10) z uwzględnieniem Heurystyk Nielsena oraz dobrych metod UX. Poprawiłem wygląd boxa produktowego tak aby zdjęcie prezentowało się jako pierwsze i było 30% większe od tego co teraz jest obecnie. Do boxa dorzuciłem obowiązujący zapisek dyrektywy Omnibus "Najniższa cena z 30 dni" tak aby nie zaburzał wyglądu i był nienachalny. Dostępność produktów w branży B2B jest ważna i została uwzględniona jako jedna z 5 elementów widocznych na pierwszy rzut oka. Po najechaniu na boxa pojawia się nam element dodania ilości do koszyka i główny CTA button. Kolorystyka składa si tylko z 3 kolorów: czarny,zielony i CTA-pomarańczowy.
- Wyszukiwarka stworzona w ten sposób aby można było wkleić bazę produktową z pliku excel i wyszukać ją po jednym kliknięciu.
- Poprawiłem nawigację na stronie i sposób logowania się przez klienta tak aby mógł w jednym miejscu znaleźć wszystkie dotyczące go informacje. Obecnie jest to rozproszone w kilku elementach i klient potrafi się pogubić gdzie co ma kliknąć. Teraz jest to wszystko pod jednym buttonem w prawym górnym rogu strony pod avatarem.
- Wszystkie dodatkowe ważne dla firmy podstrony zawarłem w jednym niewielkim pasku poczynając od menu kategorie.
- Ze względu na bardzo duże doświadczenie w marketingu i tym jak działa uwzględniłem elementy promocyjne i prosprzedażowe jak: baner z promocjami na górze strony w rotatorze, belkę z korzyściami oraz duży box z promowowanym w danej chwili produktem (uwzględnia to dopasowanie boxa do branży czy charakterystyki klienta).
- Kolejnym elementem z ułatwionej ścieżki zakupowej to belka z boxami z podkategorii wyciągniętej na wierzch w zależności od branży klienta.
Pobierz pdf
-
Natępne zadanie zrealizowane przeze mnie to przeprojektowanie obecnego listingu. Po wcześniejszych kickoff-ach grupy projektowej i wywiadów z klientami (głównie telefonicznymi, teems) zebrane dane pozwoliły mi na sprawne przeprojektowanie listingu.
- Jako najważniejszy element każdego e-commerce pierwszym elementem nad którym skupiłem uwagę to drzewo kategorii. Niestety nie odbyło to się bez sprzecznych informacji ze strony zarządu vs. zespół baz dancyh odpowiedzialnych za drzewo kategoryzacji w firmie.
Obecna kategoryzacja została poprawiona względem SEO ale niestety nie zostały uwzględnione moje zalecenia aby drzewo było jak najbardziej skrócone do kliku maksymalnie 2-3 podkategorii. Niestety aby wprowadzić tak daleko idące zmiany w bazie setek tysięcy produktów nie jest to proces łatwy i szybki. No cóż, mój projekt odzwierciedla jak najlepszą wersję do której należy dążyć w najbliższym czasie. Mianowicie należy skupić się nad kategoriami, które uwzględniają tylko i wyłącznie poprawne cechy produktów znajdujących się na listingu obok tak aby klient mógł dostrzec od góry pod drzewem kategorii najważniejsze i mógł je szybko przefiltrować. Obecnie jest to ogólnie mówiąc chaos. Poprawna i czytelna filtracja jest UX-owo najważniejszym elementem (micro-conversion) zwiększającym konwersje.
- Kolejnym elementem wziętym na tapet przeze mnie to poprawne breadcrumbs oraz wygląd samego listingu, nagłówek, aktywne filtrowanie/sortowanie, paginacja oraz wygląd linii.
W prawym górnym rogu możliwość exportu do Excela wszystkich linii z wyszukiwarki. Poprawne sortowanie w odpowiednim miejscu z prawej strony. Duże zdjęcia zwiększone o 50% w stosunku do obecnej wersji. Dodałem opinie o produkcie, które zwiększają widoczność strony w organicznych wyszukiwaniach. Elementy marketingowe zawsze w jednym miejscu. Niezbędne dane produktowe zostały skrócone do najważniejszych co sugerowało ok. 90% klientów (nazwa producenta, indeks producenta oraz indeks onninen). Najważniejsza cecha każdego listingu została poprawiona, a mianowicie cena produktu. Obecnie jest ona ukryta i niewidoczna (błąd z heurestyki Nielsena). Umiejscowiłem ją w centrum uwagi klienta, wyboldowana, i na pierwszym miejscu z prawej strony linii, dopiero potem ilość na magazynie oraz informacje dodatkowe zwiększające konwersję jak element micro "Szybki transport". Aby listing na pierwszy rzut oka był jak najbardziej czytelny z pierwszej wizji oka ukryłem pod hoverem główny CTA dodaj do koszyka, ilość oraz bardzo ważne elementy w B2B belkę z dodatkowymi informacjami jak: produkty alternatywne, powiązane, serie produktowe, rabat klienta, ilość w danej lokalizacji.
Dół listingu wieńczy button z produktami na zamówienie.
-
Przeprowadziłem wywiady z klientami. Co najbardziej jest przydatne i czego oczekuje klient w kontekście dashoboardu.
Nowe przyciski, nowe menu w charakterystyce boxów. Dostęp poprzez avatara. Najbardziej potrzebne dla klientów rzeczy w jednym miejscu i przejrzyste menu. Dashboard przedstawia w czytelny sposób kto jest uzytkownikiem danego konta (może być wielu), ostatnie zamówienia, ostatnie faktury, saldo, korekty, umowy i program lojalnościowy onntop i korzyści z niego płynące w formie żywej gotówki.
Ekran wieńczą aktualności biznesowe ogromnie potrzebne w przypadku częstych aktualizacji cen kategorii czy akcji specjalnych na danej kategorii.
-
Ostatnim elementem jest wdrożenie jeszcze na obecnej stronie Chat-bota powiązanego z chatem GPT3.5
Przygotowałem prototyp i umiejscowiłem go w prawej dolnej części ekranu.
-
Obecnie pracuję nad Design systemem z wcześniej zaprojektowanych elementów tak aby development miał ułatwione zadanie do wdrożenia nowej wersji onninen.pl
