Projektowanie UX sklepu internetowego. Proces krok po kroku.

Wdrażając e-Commerce, jego użyteczność mamy zawsze w centrum uwagi. Projektujemy wygodne ścieżki, po których poruszają użytkownicy. Kierujemy tym ruchem, prowadząc go delikatnie, ale stanowczo prosto do kasy. Tam, gdzie zbacza on z trasy, budujemy mosty, kładki i drogowskazy, by znów trafił do celu.

Dziś opowiem Ci o procesie UX, który jako agencja Magento przechodzimy z każdym klientem. Zbudowaliśmy go od zera, sumując doświadczenia projektowe, designerskie i marketingowe. Oto, jak wygląda projektowanie UX sklepu internetowego z Satisfly.

Dlaczego proces UX e-Commerce jest tak ważny?

Celem ostatecznym jest oczywiście zbudowanie użytecznego sklepu, który sprzedaje. To truizm, więc sięgnijmy nieco głębiej, w szczegółowe cele:

• proces UX e-Commerce pozwala łączyć w sobie umiejętności designerskie z marketingowymi, by tworzyć coś jednocześnie ładnego i użytecznego;
• częścią procesu jest dokładne poznanie użytkownika końcowego, wejście w jego skórę; to ogrom cennej wiedzy dla działów komunikacji i sprzedaży firmy;
• celem procesu UX jest także ustanowienie przejrzystej komunikacji na linii UX design i frontend, tak żeby projektować efektywnie;
• i wreszcie coś, o czym często się zapomina – patrzenie na e-Commerce nie swoimi oczami, nie oczami branży ani nawet klienta, a oczami użytkownika końcowego.

Ale zanim zacznę Ci pokazywać każdy krok z osobna, spójrz na proces w Satisfly z lotu ptaka:

Ankieta wstępna, czyli brief UX e-Commerce

Wszystko zaczyna się od dokumentu, którego Klient zazwyczaj nie lubi wypełniać. Od briefu. W naszym podejściu traktujemy go jako wstępny szkic – podkładkę pod warsztaty UX przeprowadzane z Klientem. Sam brief oczywiście zawiera dużo szerszą perspektywę niż samo UX – obejmuje przede wszystkim aspekty biznesowe i technologiczne projektu.

Tak swoją drogą, zobacz koniecznie nasz artykuł o dobrym briefie w e-Commerce.

Audyt UX i desk research

Klient wypełnia brief, a zespół UX e-Commerce i specjalista od marketingu w tym czasie zagłębiają się we własny research. To czas na proste narzędzia (Google!) i te bardziej zaawansowane – jak Analytics, Ahrefs, Similarweb.

Analiza ruchu na stronie

Dotyczy sytuacji, gdy sklep już istnieje

Dobrze skonfigurowany Google Analytics w rękach (oczach) specjalisty to prawdziwa kopalnia wiedzy. Patrzymy m.in. na:

• poziomy konwersji źródeł ruchu, biorąc pod uwagę różne model atrybucji;
• przepływ użytkowników przez strony sklepu – karty produktu, koszyki, realizacje transakcji;
• kroki w ścieżce realizacji transakcji – od dodania do koszyka, po płatność.

Analiza pozwala nam na wyłapanie dziur, przez które wyciekają złotówki. Konkretne miejsca mówią nam wiele o wymaganiach użytkowników – np. w zakresie prezentacji produktów czy opcji płatności.

Audyt UX e-Commerce

Mimo że User Experience to dziedzina dynamiczna i subiektywna, to jednak istnieje pewien kanon dobrych praktyk sprawdzonych w tysiącach sklepów. W Satisfly stworzyliśmy arkusz audytu UX, dzięki któremu możemy po pierwsze proponować najlepsze rozwiązania przy tworzeniu nowego sklepu, a po drugie – doradzać zmiany w już istniejącym projekcie.

Analiza konkurencji

Naturalnie wiele o konkurentach może opowiedzieć sam Klient, ale takie informacje zawsze uzupełniamy o tzw. desk research. W zależności od tego, jaki jest zakres projektu (bo obok wdrożenia e-Commerce może dojść na przykład branding), wybieramy max 5 najważniejszych konkurentów i badamy ich pod względem oferty, propozycji wartości, funkcjonalności sklepu i innych istotnych parametrów.

Warszaty UX z briefem

Mając wypełniony brief i własną analizę, zapraszamy Klienta na dzień warsztatowy. W spotkaniu ze strony Satisfly uczestniczy marketingowiec, project manager oraz UX designerka.

Spotkanie ma 6 głównych celów, bez wypełnienia których nikt nie wyjdzie z salki konferencyjnej (no dobrze, są przerwy kawowe i lunchowe 🙂 ).

Po pierwsze – dopełniamy informacje zawarte w briefie, zadając uszczegóławiające pytania i dodając wnioski z własnego audytu.

Po drugie – ustalamy cele biznesowe projektu, które stają się naszą Gwiazdą Polarną, drogowskazem w dalszej pracy.

Po trzecie – wspólnie budujemy buyer persony.

Po czwarte – rozpisujemy customer journey każdej z nich.

Po piąte – formułujemy UVP, czyli propozycję wartości.

Po szóste – ustalamy model wspólnej pracy i kryteria akceptacji w projekcie.

Czy projektowanie UX ma jakieś KPI?

Oczywiście. Z audytów i warsztatów UX wychodzimy z listą celów, a także z jasno określonymi KPI. Sam projekt wdrożenia e-Commerce, w ujęciu całościowym, ma zazwyczaj swoje KPI (np. konwersja czy ruch rok do roku). W zakresie UX takie wskaźniki wyznaczamy na bazie wcześniejszego audytu.

Przykładowe KPI w procesie UX:

• większy poziom konwersji na mobile;
• spadek odsetka porzuconych koszyków;
• mniejszy odpływ użytkowników na danym etapie realizacji transakcji.

Wyznaczone KPI służą nam – i Klientowi – jako papierek lakmusowy całego projektu. Przez ich pryzmat patrzymy także na wyniki testów użyteczności, o których piszę w dalszej części tekstu.

Projektowanie UX e-Commerce

Wireframing

Po wspólnie ustalonym planie pracy zaczyna się proces tworzenia wireframe’ów, czyli uproszczonych szkieletów strony. Budujemy schemat blokowy flow użytkownika, czyli jego potencjalnych ścieżek. Wireframe specjalnie jest „ubogi” graficznie, aby nie rozpraszać uwagi (naszej i Klienta) na tak wczesnym etapie. Musimy myśleć wyłącznie funkcjonalnie.

Dużo uwagi poświęcamy architekturze informacji. Powstaje schemat „drzewkowy”, pokazujący co i gdzie powinno się w serwisie znaleźć. Jak będą ułożone kategorie i podkategorie, działy i poszczególne sekcje. Tu trzeba zaznaczyć, że ich ułożenie i nazewnictwo ma niebagatelne znaczenie dla SEO. Grunt, by pogodzić to, co lubią roboty Google, z tym, co przyjazne dla człowieka.

W niektórych sytuacjach Klient decyduje się na użycie gotowych szablonów Magento. Wtedy, o ile szablon rzeczywiście spełnia wszystkie wymagana projektowe, etap wireframingu możemy przeskoczyć.

Prototyping i UI design

Kolejnym etapem w procesie UX jest u nas projektowanie UX makiet oraz szczegółowych widoków sklepu – takich jak strona główna, koszyk, kroki zakupowe itp. Tutaj już dokładnie wiemy, jak wygląda struktura sklepu i ścieżki użytkownika. Mamy także wszystkie potrzebne materiały graficzne – dostarczone przez Klienta (z księgi CI, brandbooka) lub przygotowane u nas moodboardy i elementy brandingu.

Zazwyczaj pracujemy w podejściu mobile-first. Prioretyzowanie użyteczności na mobile, gdzie naturalnie jest dużo mniej przestrzeni dla użytkownika, to już standard w e-Commerce. Późniejsze przygotowanie makiet desktopowych jest w ten sposób dużo prostsze.

W tym kroku nasza UX designerka ściśle współpracuje z:

• front-end developerem, by zagwarantować mu bezproblemową pracę,
• copywriterem/marketingowcem, by uzyskać wysokiej jakości teksty (UX writing to ważna sprawa!)
• Klientem, by zawsze był na bieżąco z powstającymi widokami.

Wydanie

Gotowe widoki wraz z dokumentacją działania trafiają do zespołu deweloperskiego, a następnie do wydania testowego na całą serię działań QA.

Obok typowych testów kodu, w zależności od specyfiki projektu, przeprowadzamy badania jakościowe, o czym w kolejnym punkcie.

Testy A/B i badania jakościowe

Złotą zasadą w procesie UX jest…nieufność. Wobec siebie, swojej percepcji i swoich sądów. To jasne, że zaprojektowana przez nas ścieżka zakupowa wydaje się idealna, a cały sklep przejrzysty jak górski strumień. Rzecz w tym, że takie samozadowolenie to droga prosto w górską…przepaść.

Pamiętasz, że na samym początku procesu ustalaliśmy persony. Po wdrożeniu sklepu – wersji MVP albo najlepiej testowej – przychodzi czas na pokazanie go naszym personom, ale takim prawdziwym, nie z notatnika designera. W naszym podejściu proponujemy kilka równoległych ścieżek działania.

Po pierwsze, sklep musi mieć skonfigurowaną analitykę – ilościową (Google Analytics) i jakościową (np. Hotjar). Jeśli jest to MVP, na którym realni użytkownicy codziennie dokonują zakupów, trzeba po prostu odczekać od miesiąca do (optymalnie) kwartału, by zebrać dane i je przeanalizować.

Po półtora, to także miejsce na uwzględnienie testów A/B. Nie są one konieczne zawsze i w każdym projekcie, jednakże warto mieć je w pamięci, jeśli projektujemy coś nieco inaczej niż zwykle.

Po drugie, prowadzimy testy na żywo. Wbrew popularnej opinii, że „to bardzo drogie i wymaga wyspecjalizowanej agencji”, da się to zrobić łatwo, szybko i bez wydawania majątku. Na testy zapraszamy kilka (min. 3) osób należących do grupy docelowej. Badani siadają przed monitorem/ekranem telefonu, a następnie realizują konkretny scenariusz, głośno komentując swoje działania. Na przykład:

1. Otwórz stronę XXX. Nie zastanawiając się, powiedz, co ten sklep oferuje? Jaką wartość komunikuje?
2. Znajdź wyszukiwarkę i wyszukaj piłę mechaniczną z akumulatorem.
3. Znajdź najtańszy model firmy YYY.
4. Jak możesz za niego zapłacić? Znajdź informacje.
5. Zapłać za pomocą BNPL z dostawą do paczkomatu koło twojego domu.

Czy jest to „pełnoprawne” badanie jakościowe, jakiego nie powstydziłby się Apple? Oczywiście, że nie. Ale wierz mi, że z tak prostego testu wyciągniemy więcej feedbacku, niż z godzin analizowania wykresów w Analyticsie. Szerzej o tej filozofii przeczytasz w bestsellerze „Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych„ Steve’a Kruga.

Projektowanie UX e-Commerce – słowo na koniec

Pamiętaj, że przedstawiony w artykule proces UX sklepu internetowego w Satisfly to bardzo ogólny obraz. Specyfika każdego projektu jest inna. Zobacz cztery przykładowe sytuacje:

• Klient przychodzi z gotowym zestawiem makiet UX i pełnym brandbookiem;
• w ramach rozszerzonego procesu przygotowujemy strategię brandingową wraz z całą CI;
• Klient ma gotową CI i funkcjonujący sklep, ale decyduje się na migrację na nowy e-Commerce z lepszym podejściem do UX;
• Klient zamawia audyt sklepu internetowego, by znaleźć dziury.

Jest jednak jeden wspólny mianownik – dążenie do tego, by tworzyć e-Commerce, które sprzedaje. A do tego nie wystarcza wiedza technologiczna i certyfikaty. Tutaj potrzeba miksu kompetencji UX, designerskich i marketingowych w jednym zgranym zespole.