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.

+25%

wzrost konwersji

+35%

zwiększenie transakcji na mobile

-9%

spadek współczynnika odrzuceń o 9%

Branża:

Gadżety

Rynek:

Polska

Produkt:

Website

opengift.pl

O projekcie

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ółpracy.

Czytelna karta produktu

Zaprojektowaliśmy kartę produktu tak, aby klienci zdawali sobie sprawę, jak na finalną cenę wpływa liczba sztuk, kolor czy znakowanie gadżetu.

Zrozumiały proces zakupowy

Proces umożliwia klientom edycje informacji z panelu koszyka oraz czytelne i zrozumiałe przejście przez checkout.

Zakres

Customer Journey Map
UX & UI
Wireframes
Warsztaty
Badania

Model projektowy

Czas: 4 miesiące

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

Paweł Friske

właściciel Open Gift

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 galerii
04
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

Klarowna wycena

Ponieważ cena jednostkowa produktu zależy od liczby zamówionych gadżetów, ważne było przejrzyste pokazanie relacji między ceną za sztukę, a ich liczbą. Przenieśliśmy tabelkę cenową wyżej i zintegrowaliśmy widoki oraz kontrolki wyboru liczby sztuk.

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.