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%

Co robimy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

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ółpr

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Nasz zespół pracował w modelu projektowym

Agata ChmielewskaAgata Chmielewska
Agata Chmielewska
UX Designer
Iryna MamaiIryna Mamai
Iryna Mamai
UI Designer
Radek RejselRadek Rejsel
Radek Rejsel
Co-Owner | Strategy Designer
zima design projekt yestersen

Zaprojektujmy  to razem!

Podczas 15-minutowej rozmowy z ekspertem możesz porozmawiać między innymi o tym, jak poprawić zadowolenie Twoich klientów, zaprojektować i przetestować MVP, stworzyć atrakcyjny i konkurencyjny design produktu, przeprowadzić audyt UX, UI, czy też usprawnić ścieżkę zakupową.

Przeczytaj