Realizacja

Kokosek: audyt UX sklepu z odzieżą dziecięcą przed redesignem

Sklep premium Kokosek czekał na redesign i trzeba było ustalić, co w obecnej wersji pomaga w zakupach, a co przeszkadza. Przeprowadziliśmy audyt UX łączący dane z Google Analytics i Hotjar, benchmarking i analizę heurystyczną. Raport liczący około 40 stron stał się podstawą redesignu.

Dla Kokosek przeprowadziliśmy audyt UX, który połączył analizę danych ilościowych i jakościowych, benchmarking i ocenę heurystyczną kluczowych ścieżek zakupowych. Raport liczący około 40 stron, z listą problemów i rekomendacjami, stał się fundamentem kompletnego redesignu sklepu.

Typ produktu
Audyt UX sklepu internetowego
Rynek
E-commerce / odzież dziecięca premium
Technologie
  • e-commerce
  • Product discovery
Najważniejsze fakty
  • Dane o ruchu i zachowaniach z Google Analytics i Hotjar
  • Mapy cieplne i analiza przewijania
  • Benchmarking na podstawie materiałów Baymard Institute i NN Group
  • Analiza heurystyczna filtrowania, karty produktu i koszyka
  • Raport liczący około 40 stron
  • Audyt jako podstawa kompletnego redesignu sklepu

Zanim powstał nowy projekt sklepu, sprawdziliśmy na danych i dobrych praktykach, co przeszkadza klientom w zakupach.

Schemat procesu audytu UX sklepu Kokosek

Cele

  • 01

    Obraz zachowań klientów

    Sprawdzić na danych z Google Analytics i Hotjar, jak klienci poruszają się po sklepie i w których miejscach go opuszczają.

  • 02

    Punkt odniesienia

    Ocenić sklep na tle konkurencji i dobrych praktyk e-commerce opisanych przez Baymard Institute i NN Group.

  • 03

    Fundament redesignu

    Przygotować listę problemów i rekomendacji, na której da się oprzeć przeprojektowanie sklepu.

Proces

Discover Define Develop Deliver
  1. Zakres audytu
    Zakres audytu

    Obszary do poprawy w doświadczeniu użytkowników jako punkt wyjścia do redesignu sklepu.

  2. Zbieranie danych
    Zbieranie danych

    Ruch i zachowania użytkowników z Google Analytics i Hotjar.

  3. Mapy cieplne
    Mapy cieplne

    Mapy cieplne i analiza przewijania: które sekcje przyciągają uwagę, a gdzie użytkownicy wychodzą ze strony.

  4. Benchmarking
    Benchmarking

    Porównanie z dobrymi praktykami w branży na podstawie materiałów Baymard Institute i NN Group.

  5. Analiza heurystyczna
    Analiza heurystyczna

    Filtrowanie produktów, karta produktu i przejście przez koszyk sprawdzone pod kątem barier.

  6. Raport
    Raport

    Około 40 stron: wyniki, mapy cieplne, kluczowe problemy i rekomendacje.

Wykresy urządzeń i przeglądarek użytkowników sklepu
Dane o ruchu w sklepie: liczba użytkowników i czas sesji

Co dostarczyliśmy

Raport, od którego zaczął się kolejny etap projektu: kompletny redesign sklepu.

  • Raport szczegółowy - około 40 stron z wynikami wszystkich etapów analizy.
  • Mapy cieplne i analiza przewijania - sekcje, które przyciągają najwięcej uwagi, i miejsca, w których użytkownicy najczęściej opuszczają witrynę.
  • Benchmarking - ocena sklepu na tle konkurencji i dobrych praktyk z materiałów Baymard Institute i NN Group.
  • Kluczowe problemy - elementy filtrowania, karty produktu i koszyka, które mogą utrudniać zakup.
  • Rekomendacje - propozycje poprawy UX, które posłużyły jako podstawa redesignu.
Mapa cieplna strony głównej sklepu Kokosek
Mapy przewijania stron sklepu z odzieżą dziecięcą

Wyzwanie: ustalić fakty przed redesignem sklepu

Kokosek to jeden z wiodących sklepów premium z odzieżą dziecięcą. Sklep czekał na redesign, a przed nim trzeba było ustalić, co w obecnej wersji pomaga w zakupach, a co przeszkadza.

Rekomendacje musiały opierać się na tym, jak klienci naprawdę korzystają z witryny, i być zgodne z dobrymi praktykami w branży. Dlatego audyt łączył dane z narzędzi analitycznych, porównanie z konkurencją i ocenę heurystyczną. Celem były zmiany, które zwiększą zaangażowanie i konwersję.

Audyt miał dać redesignowi fundament: wiedzieć, co poprawić, zanim powstanie pierwszy ekran.

Benchmark karty produktu z wytycznymi Baymard Institute
Benchmark galerii zdjęć na karcie produktu

Analiza: dane, benchmarking i ocena heurystyczna

Audyt prowadziliśmy na trzech poziomach: dane o zachowaniu użytkowników, porównanie z dobrymi praktykami i ocena heurystyczna kluczowych ścieżek.

Mapy cieplne i analiza przewijania z Hotjar pokazały, które sekcje stron przyciągają najwięcej uwagi i gdzie użytkownicy najczęściej opuszczają witrynę. Benchmarking na podstawie materiałów Baymard Institute i NN Group pozwolił ocenić, jak Kokosek wypada na tle konkurencji i które elementy warto zoptymalizować.

Ścieżka zakupowa pod lupą

W analizie heurystycznej przeszliśmy przez filtrowanie produktów, oglądanie karty produktu i proces koszyka. Szukaliśmy elementów, które stanowią barierę dla użytkownika i utrudniają konwersję.

Analiza nawigacji na stronie sklepu Kokosek
Mobilne ekrany sklepu Kokosek z oznaczonymi problemami

Efekty: raport, od którego zaczął się redesign

Zespół Kokosek dostał raport liczący około 40 stron: wyniki analizy, mapy cieplne, kluczowe problemy i rekomendacje poprawy UX.

Raport posłużył jako fundament kolejnego etapu projektu, którym był kompletny redesign sklepu. Projektowanie zaczynało się od listy konkretnych problemów popartych danymi i dobrymi praktykami branżowymi.

Menu sklepu z opisanymi problemami nawigacji
Lista produktów z uwagą o niedopasowanych zdjęciach

Opracowanie: Publikacja: Aktualizacja:

Redesign sklepu warto zacząć od audytu.

Sprawdzamy dane, ścieżkę zakupową i dobre praktyki, zanim powstanie nowy projekt.

Porozmawiajmy