OpenGift -Jak zwiększyć konwersję o 25% w cztery miesiące?
Zobacz case projektu sklepu internetowego z gadżetami dla B2B, który zgłosił się do nas z wyzwaniem poprawy ścieżki zakupowej. Naszym zadaniem było wprowadzenie punktowych zmian (ewoluowanie), które podążą za pojawiającym się ruchem na stronie i skierują kupujących do finalnego zakupu przy najmiejszym wsparciu działań offline’owych.
OpenGift.pl jest liderem na rynku polskim, oferującym gadżety reklamowe z personalizacją dla klienta B2B. Zostaliśmy zaproszeni do przeprojektowania ścieżki zakupowej w celu jej udrożnia. To był początek szerszej współpr
Zaprojektowaliśmy kartę produktu tak, aby klienci zdawali sobie sprawę, jak na finalną cenę wpływa liczba sztuk, kolor czy znakowanie gadżetu.
Proces umożliwia klientom edycje informacji z panelu koszyka oraz czytelne i zrozumiałe przejście przez checkout.
Customer Journey Map
UX & UI
Wireframes
Warsztaty
Badania
Wyzwanie projektowe
- OpenGift ma bardzo szeroką ofertę, zarówno dla klienta B2B, jak i B2C, dlatego wyzwaniem było przejrzyste pokazanie oferty dla obu segmentów.
- Naszym zadaniem było tak ułożyć proces zakupowy, aby wspierał zarówno sprzedaż B2B jak i B2C.
- Ponieważ proces zakupu wymagał często skomplikowanej i niezrozumiałej konfiguracji, firma mierzyła się z dużą porcją zapytań od klientów i porzuconych koszyków.
Cel projektu
Podniesienie konwersji i zmniejszenie bounce rate
Poprawienie doświadczenia zakupowego klientów, szczególnie na mobile, gdzie klienci najczęściej porzucali koszyk. Zwiększenie konwersji do 2-3%
Ułatwienie zakupów online
Ułożenie architektury informacji tak, aby użytkownicy nie mieli problemu ze skonfigurowaniem produktu pod swoje potrzeby i nie zwracali się o pomoc do Customer Service
Spójny i przejrzysty design
Odświeżenie designu strony, stworzenie jasnych wytycznych zastosowania kolorystyki oraz elementów graficznych w nawigacji po stronie, przy zachowaniu obecnego charakteru marki
Współpraca na najwyższym poziomie! Dawno nie czuliśmy się tak zaopiekowani jako organizacja. Wzorowe przygotowanie do warsztatów i spotkań, a finalny projekt szczegółowo dopracowany.
Jako osoba 20 lat przebywająca w branży
e-commerce uważam poziom UX/UI za bardzo wysoki. Każdy kto chce wejść na wyższy poziom UX/UI już wie do kogo ma się zwrócić.
Proces projektowy
Audyt ekspercki
Zanim sformułowaliśmy główne założenia naszej pracy, to przeprowadziliśmy szczegółowy audyt stanu zastanego,
wsparty przez analitykę i rozmowy z interesariuszami, w tym z przedstawicielami obsługi klienta.
W ten sposób mogliśmy zidentyfikować najgorętsze bolączki klientów i zaproponować od razu tzw. quickwins – usprawnienia, które można wdrożyć od ręki, już na tym etapie poprawiając doświadczenie użytkownika.
Wnioski z audytu
01
Źle zaplanowany układ, większość informacji pod pierwszym foldem
02
Niespójny design i kolorystyka elementów strony
03
Słaba widoczność produktów w galerii04
Najważniejsze informacje na dole strony (cena)05
Layout niedostosowany do urządzeń mobile
Projektowanie
Karta produktu
Najważniejszym krokiem była reorganizacja informacji zawartych w opisie produktu. Następnie ułożenie ich w spójny flow, pozwalający krok po kroku skonfigurować produkt i dodać go do koszyka.
Organizacja informacji na stronie produktu
Złożony opis produktu wymagał wielu specyficznych informacji oraz dobrej wizualizacji. Zdecydowaliśmy się na podzielenie strony na kolumnę statyczną (galeria) i skrollowaną (opis), aby użytkownik nie tracił produktu z oczu.
Wiele możliwości konfiguracji
Największą trudność sprawiało użytkownikom złożenie zamówienia na gadżet z nadrukiem. Ułożyliśmy i zwizualizowaliśmy ten proces od nowa, uwzględniając:
- klarowną wizualizacja miejsca nadruku
- flow dodania pliku graficznego z prostą instrukcją
- wyróżnioną wizualizację ceny i wpływających na nią zmiennych
Projekt mobile
Duża ilość informacji i elementów konfiguracji wymagała starannego rozplanowania strony na urządzeniach mobile. Wprowadziliśmy nowy widok galerii i konfiguratora. Aby utrzymać najważniejsze informacje na wierzchu, zastosowaliśmy Sticky Header z informacją o cenie, przypiętą do góry ekranu.
Uspójnienie elementów wizualnych
Ponieważ audyt wskazał na niejasne dla użytkownika wizualizacje elementów, uporządkowaliśmy i uprościliśmy design. Dodaliśmy w nim zasady używania kolorów i prezentacji elementów, w tym przycisków, linków czy ikonografii.
Koszyk i Checkout
Dążąc do pełnej samodzielności użytkownika w procesie zakupu, przeprojektowaliśmy także widoki koszyka i checkout’u.
Edycja z poziomu koszyka
Ponieważ konfigurowanie produktu często wymagało zmian, ważne było danie użytkownikowi możliwości edycji i nanoszenia zmian bez konieczności wracania do karty produktu. Przy niewielkiej przestrzeni ekranu, ważne stało się staranne rozplanowanie UI, w tym podział ekranu na rozwijane sekcje, czy skrócenie nazw elementów.
Jasne przedstawienie procesu checkout’u
Dodaliśmy wyraźny podział procesu zakupu na kroki i wyodrębniliśmy ważne informacje cenowe oraz te dotyczące płatności.
Monitorowanie zmian
Po wdrożeniu nowej wersji obserwowaliśmy zachowania użytkowników
- przeglądaliśmy nagrania sesji użytkowników
- obserwowaliśmy zmiany w konwersji i działaniu koszyka
- zwróciliśmy uwagę na szczególne zachowania klientów
- zaobserwowane wnioski wprowadziliśmy do projektu
Poprawiliśmy widoczność informacji o dostawie
Dodaliśmy na poziomie widoku produktu, przewidywany koszt i orientacyjne daty dostawy. W ten sposób daliśmy użytkownikom jeszcze jaśniejszą informację, jaki będzie ostateczny koszt zakupu i dostawy.
Potrzeba informacji
Klienci dzwonią z bardzo podstawowymi pytaniami, na które nie mogą znaleźć odpowiedzi na stronie. Warto zwracać uwagę, czy treści są zrozumiałe oraz zaprojektowane tak, by ułatwiać samodzielne pozyskanie informacji.
Zaobserwowaliśmy szczególne użycia koszyka
Okazało się, że użytkownicy dodają produkty do koszyka, tworząc sobie prowizoryczną listę zakupów, a potem edytują koszyk, decydując się na ostateczny zakup. Ta obserwacja pozwoliła nam zrozumieć potrzebę konfiguracji przedmiotów już na poziomie koszyka.
Rezultaty
Wzrost konwersji o 25%
Wdrożenie nowej karty produktu podniosło konwersję dwukrotnie, czyli niemal o 25%, co pokazuje, że zmiany UX poprawiły czytelność strony.
Zwiększenie transakcji na mobile o 35%
Lepsze doświadczenie samodzielnego zakupu online podniosło liczbę transakcji na mobile o 35%
Spadek współczynnika odrzuceń o 9%
Cały proces redesignu przyniósł także spadek współczynnika odrzuceń o 9%, a także wydłużenie czasu trwania sesji pojedynczego użytkownika.