GraingGold – 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
2
projektantów
6
miesięcy pracy projektowej
5
miesięcy opieki przy wdrożeniu

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

O projekcieGłó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: Desgin 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.

name
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Co robimy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3 mln $ pozyskanego dofinansowania

Projekt PoC pozwolił naszemu klientowi na pozyskanie finansowania w wysokości 3 000 000 $ na zbudowanie MVP i dalszy rozwój.

MVP zostało wprowadzone na rynek australijski

Dzięki finansowaniu, zbudawane zostało MVP, które zostało wprowadzone na rynek australijski i obecnie piwotuje w celu uzyskania Product-Market Fit.

Nagroda na EXAW Experience Awards

Nasz projekt został nagrodzony w pierwszym w Polsce konkursie UXowym – EXAW Experience Awards, zdobywając drugą nagrodę.

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.

Nasz zespół pracował w modelu projektowym

Joanna AzjaJoanna Azja
Joanna Azja
UX Designer
Iryna MamaiIryna Mamai
Iryna Mamai
UI Designer
Magdalena BarwińskaMagdalena Barwińska
Magdalena Barwińska
UX 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