GraingGold — UX that improves the conversion to mobile in the furniture store

Entering the project with GrainGold, we took a bird's-eye view of the entire customer experience and decided to redesign part of the processes. For e-commerce, where 80% of customers buy via mobile devices, in the specific German-Austrian market, it was important above all to present the product precisely.

581

working hours

designers

months

miesięcy opieki przy wdrożeniu

Industry:

e-commerce

Branża:

Furniture store

Market:

Niemcy, Austria, Polska

Produkt:

Website

Graingold.de

Registration and login system

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.

Streamlining the buying path

It meant changing the purchasing path -starting with the listing, through the product card. We are currently working on improving the shopping cart.

Visual redesign of the store

Organizing the interface for consistency and creating a System Design for its components.

Range

Expert UX audit
Construction of information architecture
UX & UI
Product Analytics
Sistema de diseño
Deployment support

Model: Design Team on Subscription

Duration: 11 months

Context of the project

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.

Michal Witkowski

Founder of [ation] center

Winter has successfully designed a new design for our site that both improves and simplifies the UX of our platform.

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

For whom?

Recognize users of language learning applications, their habits and expectations. Who is our persona? Who most often learns the language on the phone?

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.

Design process

‍The design was divided into phases: 

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.

Innovation in everyday language learning is necessary

The younger generations are bluntly saying that the traditional method of teaching a language by reading and repeating does not work for them. They need more engaging experiences and a hands-on view of learning. Therefore, when designing the interface in Ailoom, we decided to eliminate unnecessary elements and focus on the conversation itself.

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.