Artykuł ten kieruje do menedżerów eCommerce, którzy w niedalekiej przyszłości zamierzają dokonać redesignu sklepu internetowego. Chciałbym zaznaczyć, że materiał ten rozważa najważniejsze kwestie dotyczące przeprowadzania redesignu i skupia się przede wszystkim na aspekcie zarządczym. Zamierzam zbudować cykl materiałów na których w sposób warsztatowy przejdę przez każdy etap, tak aby przedstawić praktyczną wiedzę, która pozwoli zadbać o wysoki wskaźnik konwersji. Dlatego też zachęcam Ciebie do zapisania się do mojego newslettera dostępnego na stronie pod adresem: https://www.getrevue.co/profile/danieltomaszewski

Zanim zaczniemy

Zdefiniujmy kiedy warto przeprowadzić redesign sklepu internetowego.

Redesign warto przeprowadzić wtedy, kiedy mamy następujące problemy:

• W otoczeniu wewnętrznym przedsiębiorstwa
  • Dług technologiczny (zmiana platformy lub zmiana na wyższą wersję)
  • Brak podejścia mobile-first
  • Konwersja jest niesatysfakcjonująca względem nakładów pieniężnych na promocję
  • Design sklepu nie oddaje wizerunku przedsiębiorstwa
  • Średnia wartość koszyka jest niesatysfakcjonująca
  • Utrzymanie stałych klientów jest nieefektywne
• W otoczeniu zewnętrznym przedsiębiorstwa
  • Konkurencja staje się silniejsza
  • Konkurowanie ceną niekorzystnie wpływa na marżę

Analiza i wybór technologii

Redesign to świetna okazja do tego aby zaktualizować i uporządkować stack technologiczny jak i wprowadzić korekty do wizerunku marki. Warto dokonać analizy technicznej na etapie budowania strategii aby projektowane rozwiązania w dalszym etapie mogły w pełni wykorzystać rozwiązania technologiczne. Przykład z życia. W ramach mojego przedsiębiorstwa przeprowadzamy redesign sklepu jednego z większych w branży kosmetyków naturalnych. Przez zdefiniowanie stacku technologicznego projektujemy sklep wykorzystujący PWA (Progressive Web App) oraz dynamiczne wyszukiwanie i filtrowanie za pomocą Algolia Search. Nie definiując tego na początku klient musiałby nałożyć dodatkowe nakłady finansowe aby dostosować sklep do PWA.

Data-Driven Design

Projektant przeprowadzając redesign sklepu internetowego przede wszystkim powinien bazować na doświadczeniu wynikającym z wcześniej prowadzonych badań na etapie weryfikacji korzystając z dostępnych heurystyk UX czy to na etapie powdrożeniowym przeprowadzając testy A/B. Jednakże sklep, który ma przejść redesign zbiera przez lata dane ilościowe i jakościowe. Dlatego też bardzo ważne jest to aby wykorzystać zebrane dane i kierować się w procesie wnioskami analitycznymi, nie intuicją. Zmiany na etapie graficznym są dużo tańsze niż zmiany po wdrożeniu, gdzie każda zmiana wymaga zlecenia prac programistycznych.

Design system

Projektanci używają wielu różnych narzędzi i wzorców projektowych. Uporządkujmy wiedzę w tym zakresie. Powstający projekt graficzny w ramach redesignu będzie miał bardzo długi cykl życia jak i będzie podstawą do dalszego strategicznego rozwoju.

Dlatego też warto zadbać o to aby budowany projekt graficzny powstawał w ramach Design Systemu. Czym jest Design System? Śpieszę z odpowiedzią: Design system to zbiór wytycznych umożliwiających spójne projektowanie i wdrożenie produktu. Mówiąc prościej jest to zbiór komponentów i zasad ich stosowania. Podejście te wypłynie na sposób projektowania komponentów na widokach jak i na ich reużywalność w ramach całego sklepu internetowego.

MVP

Przeprowadzając proces redesignu powinniśmy wykonać analizę jakie funkcjonalności dla użytkowników są najważniejsze w sklepie internetowym. Na podstawie takiego zbioru można wyłonić funkcjonalności, które powinny znaleźć się w nowym projekcie graficznym. W tym celu polecam wykorzystanie metody MoSCoW. Dzięki temu projektant zaprojektuje sklep, który będzie spełniać minimalne wymagania, a zarazem będzie miał wszystkie najważniejsze funkcjonalności. Podejście takie pozwala przede wszystkim:

• Zmniejszyć ryzyko biznesowe związane z wdrożeniem (nie buduje się kobyły, która ma wszystko i nic)
• Zmniejsza nakład inwestycyjny
• Zmniejsza potrzebny czas na wdrożenie
• Pozwala skupić się na najważniejszych aspektach redesignu
• MVP pozwali zmierzyć bazową konwersję sklepu i następnie podczas rozwoju można w sposób kontrolowany mierzyć jak wprowadzane funkcje wpływają na wzrost konwersji.

Metodologia zwinna czy kaskadowa?

Iteracyjne podejście do procesu jest jedynym słusznym podejściem. Prowadząc od pond 10 lat projekty eCommerce miałem doświadczenie z projektami prowadzonymi w metodologi Waterfall jak i Agile. Niestety duża część przedsiębiorstw w Polsce robiąc outsourcing projektów niestety dalej korzysta z metodologi kaskadowej (waterfall). Klienci współpracujący z nami mogą współpracować tylko w metodologi zwinnej. Niesamowicie ważne jest te podejście na etapie redesignu, ponieważ pozwala wydobyć maksymalny potencjał co ostatecznie dostrzeże się podczas mierzenia konwersji.

Etap 1 – Strategia

Redesign to nie tylko świeża stylistyka i niestety dużo przedsiębiorstw tego nie dostrzega. Świadomość wpływu designu na przedsiębiorstwo zmienia się z roku na rok i mam okazję dołożyć do tego cegiełkę. Wspomniałem, że jestem właścicielem przedsiębiorstwa wdrażającego rozwiązania eCommerce ale jeszcze nie wspomniałem jaką role pełnię – mianowicie pełnię rolę Product Designera i bezpośrednio odpowiadam za każdy z naszych sklepów. Oczywiście nie było by to możliwe gdyby nie mój zespół wdrożeniowy, który w 2019 roku liczył 8 etatowych osób.

Szalenie ważne jest to aby strategia służyła wszystkim osobą w organizacji – począwszy od inwestorów na zespołach wdrożeniowych i marketingowych włącznie.

Część pierwsza – Analiza biznesu klienta

W tej części zbiera się wszelkie informacje i materiały o kliencie, które pozwolą zidentyfikować potrzeby klienta jak i zrozumieć w jakim otoczeniu biznes działa. Rozpoznania dokonuje się najczęściej poprzez pogłębione wywiady na których powstaje odpowiedź – czy klient faktycznie potrzebuje redesignu. Okazać się może, że problem leży w totalnie innej materii niż klientowi się wydaje. Nasz kwestionariusz zajmuje około 20 stron pytań, ale dzięki niemu jesteśmy w stanie bardzo dobrze rozpoznać potrzeby klienta i zbadać jego rozwój w ostatnich latach. Warto zbadać konkurencję klienta i stworzyć moodboard dobrych rozwiązań stosowanych u konkurencji do rozważenia w części analiz.

Część druga – Analiza danych ilościowych i jakościowych

Wróćmy do zagadnienia Data-Driven Design. Istotą redesignu jest odświeżenie w przemyślany sposób frontu sklepu internetowego opierając się o dane ilościowe i jakościowe zebrane w ostatnich latach działalności sklepu internetowego. Klienci zwracający się do nas z potrzebą redesignu najczęściej działają na rynku od ponad 5 lat i pominięcie tej części jest podejściem ignoranckim do włożonego kapitału w latach wcześniejszych w rozwój. Dlatego też dane, dane i jeszcze raz dane! Zagłębimy ten temat przy kolejnej publikacji.

Cześć trzecia – Rekomendacje i założenia projektowe

Na etapie analizy danych powstaje szereg wniosków, które należy przełożyć na etap projektowania. Zrobienie tego w sposób zrozumiały wymaga zadbania o pełny proces UX. W pierwszej kolejności definiuje się typy klientów (tutaj zalecam analizę segmentacji RFM) oraz person. W kolejnym kroku dokonuje się stworzenia customer journey map na której jesteśmy w stanie dokonać analizy całego cyklu życia klienta, a co zarazem wskaże mocne i słabe punkty doświadczeń klienta z marką. Słabe punkty oczywiście trafią do backloga projektu do realizacji po wdrożeniu lub zostaną poprawione na etapie redesignu jeżeli słabe punkty dotykają tej materii. Można na tym etapie skusić się o zebranie heurystyk ux, lecz moim zdaniem lepiej analizować bezpośrednie stadia trudnych przypadków zauważonych podczas prototypowania.

Etap 2 – Projektowanie

Na wstępie powiem, że dzielenie prac na UX i UI jest mało efektywne w eCommerce. Sklep internetowy powinien być nadzorowany i projektowany przez Product Designera, który potrafi projektować doświadczenia klienta, nie użytkownika (front sklepu to tylko jeden z punktów styku klienta z marką). Warto zaznaczyć, że Product Designer łączy doświadczenie i wiedzę z zakresu UX, UI jak i biznesu.

W zależności od założeń można projektować wiele wersji układów: mobile/tablet/desktop/desktop hd, XS/SM/MD/LG, w podzieleniu na rozmiary ekranów itd. lub po prostu założyć dwie wersje mobile/desktop, które będą miały dynamiczny układ, który precyzyjnie zostanie zdefiniowany w Design Systemie.

Etap ten powinien stosować dobre praktyki Lean UX oraz być podzielonym na następujące części:

Część pierwsza – zaprojektowanie jednego widoku mobile oraz desktop

W części tej projektant (po dokonaniu analizy strategii) tworzy koncept widoku na zasadzie look & fele wybranego ekranu. Jeżeli proces wdrożeniowy na to pozwala zaczyna się od strony głównej. W pierwszej kolejności projektuje się widok dla układu mobile i następnie dla układu desktop aby dokonać walidacji widoku mobile. Oba widoki prezentowane są wszystkim interesariuszom i następnie poddawane są krytyce. Część ta jest bardzo ważna bo definiuje stylistykę, założenia i układ we wszystkim pozostałych częściach projektowania. Dlatego też na tym etapie warto wprowadzać szereg zmian, a w ostateczności przy braku akceptacji warto zmienić Product Designera.

Cześć druga – projektowanie widoków mobile

W części tej projektant projektuje główne widoki mobilne dla sklepu internetowego przechodząc przez jego główną ścieżkę Strona główna > Listingi (kategorie, marki, wyszukiwanie…) > Produkt > Koszyk. Następnie projektowane są widoki poboczne. Część projektowa powinna mieć jak najwięcej iteracji aby na bieżąco można było nanosić uwagi.

Cześć trzecia – prototypowanie widoków mobile

W części tej, co ważne potrzebujemy mieć zatwierdzone widoki mobile, które gotowe są do prototypowania. Prototypy powinno weryfikować się w naturalnym środowisku – w tej części na smartphonie. Znaczna część narzędzi dla projektantów umożliwia wyświetlanie projektów bezpośrednio na smartphonie jak i umożliwia nanoszenie bezpośrednio komentarzy. Im więcej interesariuszy włączy się w projekt tym lepiej, ale to Product Designer ma ostateczną i najbardziej słuszną decyzję. Przez prototypy powinno przechodzić się zgodnie z zdefiniowanymi personami w strategii jak i należy weryfikować założenia, które zostały zdefiniowane. W części tej także w sposób iteracyjny nanosi się udoskonalenia na projekcie, aż dojdzie się do momentu, kiedy projekt mobilny uznany jest za doskonały.

Cześć czwarta – przeniesienie widoków mobilnych do design systemu

Utworzone widoki mobilne przenosi się bezpośrednio do Design Systemu i dokonuje się dekompozycji widoku na części zgodne z podejściem Atomic Design. Jak można zauważyć robimy tutaj proces odwrotny, mianowicie na podstawie naszych widoków (Pages) definiujemy templatki (Templates), następnie organizmy (Organisms) chociaż lepszą definicją są komponenty. Następnie dokonujemy jeszcze większej dekompozycji tworząc molekuły (Molecules) oraz atomy (Atoms). Oczywiście wielkim skrótem bo zagadnienie Design System zasługuje na osobny cykl wydawniczy.

Część piąta – projektowanie widoku desktop

W części projektowania widoków desktopowych postępujemy dokładnie tak samo jak to ma miejsce w przypadku części drugiej. Mogę jeszcze raz pokreślić jak ważne jest podejście iteracyjne w dostarczaniu widoków, które mogą być doskonalone przez cały czas trwania części projektowej.

Część szósta – prototypowania widoków desktop

W części projektowania widoków desktopowych postępujemy dokładnie tak samo jak to ma miejsce w przypadku części trzeciej.

Część siódma – przeniesienie widoków mobilnych do design systemu

Poza przeniesieniem widoków desktopowych do Design Systemu z rozbiciem na Atomic Design warto zadbać o wszystkie inne aspekty ważne z perspektywy utrzymania Design Systemu i dostępności dla wszystkich osób, które mogą korzystać z Design Systemu w przedsiębiorstwie. Design System powinien posiadać precyzyjne informacje dla zespołu wdrożeniowego.

Testy

Etap ten zakłada przeprowadzenie pogłębionych testów z użytkownikami, które pozwolą dodatkowo upewnić się, że przygotowany projekt graficzny rozwiązuje wszystkie założenia postawione w strategii redesignu. Na tym etapie wyróżnić można następujące testy:

• Testy z użytkownikami w środowisku laboratoryjnym
• Testy z użytkownikami w środowisku laboratoryjnym z wykorzystaniem eye trackingu
• Analiza heurystyk UX
• Analiza zewnętrznego niezależnego konsultanta UX

Wdrożenie

Wdrożenie to jeden z najbardziej newralgicznych etapów powodujących sukces lub porażkę w procesie redesignu. Zdecydowanie jest to etap na kolejną część artykułu. Aby otrzymać powiadomienie o drugiej części artykułu dotyczącego redesignu sklepu internetowego koniecznie zapisz się do newslettera.