GrainGold – UX, który poprawia konwersję na mobile w sklepie meblowym

Wchodząc w projekt z GrainGold spojrzeliśmy z lotu ptaka na całość doświadczenia klienta i zdecydowaliśmy się na redesign części procesów. Dla e-commerce, którego 80% klientów kupuje przez urządzenia mobile, na specyficznym rynku Niemiecko-Austriackim, ważne było przede wszystkim precyzyjne zaprezentowanie produktu.

581

godzin pracy

projektantów

miesięcy pracy projektowej

miesięcy opieki przy wdrożeniu

Rynek:

Niemcy, Austria, Polska

Branża:

Sklep meblowy

Model biznesowy:

e-commerce

Produkt:

Website

Graingold.de

O projekcie

Głównym celem projektu była poprawa doświadczeń użytkowników sklepu internetowego, a także optymalizacja sklepu na urządzenia mobile. Mnogość informacji na temat produktów sprawiała, że widoki mobile były odbierane przez użytkowników sklepu jako nieczytelne i trudne w nawigacji.  Towarzyszyliśmy też klientowi w procesie wdrożenia zmian w produkcie oraz wspieraliśmy współpracę z deweloperami.

Usprawnienie ścieżki zakupowej

Oznaczało zmianę ścieżki zakupowej -zaczynając od listingu, przez kartę produktu. Obecnie pracujemy nad usprawnieniem koszyka zakupowego.

Redesign wizualny sklepu

Uporządkowanie interfejsu pod kątem spójności i stworzenie Design Systemu dla jego komponentów.

Zakres

Audyt ekspercki UX
Budowa architektury informacji
UX & UI
Analityka produktowa
Design System
Wsparcie przy wdrożeniu

Model: Design Team w Subskrypcji

Czas: 11 miesięcy

Kontekst projektu

Firma zwróciła się do nas z zadaniem przeprojektowania sklepu internetowego, zbudowanego na platformie IdoSell. GrainGold to sklep sprzedający głównie łóżka. Założyliśmy, że wybór łóżka na stronie internetowej, to wymagające wyzwanie dla kupującego. Łóżko łączy funkcje komfortu, stylu i zdrowia, jest też kluczowym elementem wizualnym sypialni, który wpływa także na jakość snu. Po analizie sklepu internetowego i ścieżek użytkownika zauważyliśmy, że potrzebne jest więc uproszczenie procesu zakupowego, klarowna prezentacja produktów, jasność zasad dostawy i płatności oraz dostosowanie sklepu w wersji mobilnej, by wspierać konwersję w tym kanale.

Karol Ociepa

Właściciel GrainGold

Po nawiązaniu współpracy z Zima UX, UI & Design Strategy odnieśliśmy sukces w zakresie czytelności, przejrzystości i współczynnika konwersji.

Zima UX, UI & Design Strategy pracowała szybko i terminowo. Zespół spotykał się z nami wirtualnie.

Problem projektowy

Przy sprzedaży produktów o wysokiej wartości, jakimi są meble, zaufanie do sprzedawcy jest bardzo ważne. Dlatego GrainGold zdecydował się wyczyścić i usprawnić procesy sprzedażowe, dając użytkownikom komfort wyboru i decyzji. Ponieważ sklep korzystał z gotowej platformy e-commerce, przy redesignie braliśmy pod uwagę:

analizę i poprawę procesu zakupowego;
uspójnienie struktury informacji;dobry UX strony mobilnej;
ograniczenia wdrożeniowe platformy oraz jak można je ominąć.

Co zostało wypracowane

Architektura informacji i nowa nawigacja (w szczególności wersja mobile), która pozwala łatwiej poruszać się po sklepie i szukać wymarzonych mebli.

Nowy wygląd sklepu - design został odświeżony, unowocześniony, ale utrzymany w oparciu o istniejącą tożsamość marki. Zbudowaliśmy też nowy i kompletny Design System.

Ułatwienie ścieżki zakupowej klienta: od wyszukiwania produktu, po jego podgląd i proces zakupu.

Audyt ekspercki

‍Obejmował analizę konkurencji, krótkie wywiady z klientem niemieckim oraz audyt strony sklepu w oparciu o heurystyki UX.

Audyt objął nawigację sklepu, ze szczególnym uwzględnieniem nawigacji mobile, ścieżki poznawania produktów przez klienta (karta produktu), proces wyszukiwania produktu i jego zakupu. Jednocześnie zwróciliśmy uwagę na potrzeby naszego klienta w kontekście SEO, wspierając w budowaniu podstron tematycznych i struktury copy.

Podejście „mobile first”

Analiza sklepu wskazała nam, że konieczne jest projektowanie „mobile first”. Tutaj wyzwaniem okazał się bogaty asortyment sklepu (dużo pozycji w katalogu, zróżnicowane produkty) a także spójna nawigacja po ofercie sklepu.

Zmiany w katalogu produktu

Pierwszym krokiem było przeprojektowanie architektury informacji oraz uspójnienie nawigacji.

Katalog sklepu GrainGold był bardzo obszerny i wymagał takiego przemyślenia struktury, aby użytkownik mógł łatwo odnaleźć szukany przedmiot. W wersji desktopowej skupiliśmy się na tym, by podział na sekcje tematyczne był dobrze oddany w warstwie graficznej i ułatwiał szybkie odnalezienie poszukiwanej kategorii. W wersji mobilnej postawiliśmy jednak na uproszczony, kompaktowy katalog.

Dedykowana nawigacja dla wersji mobilnej

Projekt UX zakładał uproszczenie górnego paska, tzw. headera i zmianę wyświetlania nawigacji. W ten sposób uzyskaliśmy na ekranie więcej miejsca na prezentację produktu.

Zmiany kosmetyczne, które wprowadziliśmy w górnej części ekranu: (zmniejszenie logo, uproszczenie headera), dału użytkownikowi większą przestrzeń na wyświetlanie produktów.

Biorąc pod uwagę potrzeby użytkowników i schemat ich poruszania się na stronie, wypracowaliśmy koncept dolnego menu na mobile, zawierający skróty do najbardziej pożądanych funkcji sklepu:

katalogu produktów
koszyka
ulubionych produktów
konta użytkownika

Zmiany na karcie produktu

Szukając idealnej drogi do prezentacji produktu wzięliśmy pod uwagę, że głównym źródłem zysku GrainGold jest sprzedaż łóżek i narożników, jednak oferta sklepu zawiera także tzw. meble twarde czyli np. szafy czy stoliki. Dlatego UX strony mobilnej musiał stanowić uniwersalne podejście do prezentacji asortymentu sklepu.

W projektowaniu widoku karty produktu musieliśmy brać pod uwagę takie wyzwania:

mała przestrzeń ekranu na mobile
mnogość detali dotyczących każdego produktu
różne opcje konfiguracji produktów w zależności od typu mebla oraz ilości wariantów
łatwość dodawania do koszyka
transparentne pokazywanie cen produktów

Konfiguracja produktu

Kupując mebel trzeba doprecyzować wiele jego parametrów - rozmiar, kolor czy materiał z którego jest wykonany. A kupując przez internet, wszystko to należy wybrać jeszcze przed dodaniem mebla do koszyka. Powstaje wyzwanie: jak sprawić, by użytkownicy nie zgubili się w trakcie procesu zakupowego i nie porzucili zakupu?

Aby odpowiedzieć na tę potrzebę, przede wszystkim zaprojektowaliśmy kilka rodzajów konfiguratorów wiedząc, że inaczej wygląda proces zakupu łóżka, a inaczej zakupienia szafy. Każdy typ produktu ma dedykowaną listę elementów do konfiguracji. Dodatkowo postawiliśmy ma czytelną prezentację graficzną dostępnych kolorów i tkaniny. Wykorzystaliśmy ikony, zamiast opisywać opcje do wyboru, a dzięki temu interfejs zyskał na czytelności i przejrzystości.

Dla użytkownika niezwykle ważne okazały się opcje płatności i dostawy

Wielokrotnie analizowaliśmy oraz iterowaliśmy prezentację tych informacji, aby zbadać, która wersja płatności najlepiej sprawdzi się dla klientów.

‍

Redesign wizualny sklepu

GrainGold przez kilka lat swojego istnienia wypracował wizerunek marki, którego nie chcieliśmy drastycznie zmieniać.

W procesie odświeżenia designu postawiliśmy na jego unowocześnienie, uspójnienie i poprawienie widoczności elementów. Zbudowaliśmy też Design System, dzięki któremy łatwiej będzie zachować spójność wizualną także w przyszłości.

Odświeżona typografia i kolorystyka
Design system
Graficzna tożsamość sklepu
Prezentacja produktów

Nadzór nad wdrożeniem

‍

Przy wdrażaniu designu konieczna była z naszej strony silna współpraca z deweloperami przy kolejnych iteracjach. Reagowaliśmy na zachowania użytkowników, ale także na wyzwania związane z pracą na gotowej platformie sprzedażowej. Wypracowaliśmy formułę cotygodniowych spotkań statusowych i stałej komunikacji z klientem oraz zespołem deweloperskim.