Przeprojektowanie karty produktu
sklepu internetowego

logo portfolio

Opis projektu:

 

Wyzwanie polegało na przeprojektowaniu karty produktu w sklepie internetowym tak, aby znacząco zmniejszyć ilość porzuceń karty i podnieść wyniki sprzedażowe. 

Po przeanalizowaniu danych zastanych i przeprowadzeniu badań z użytkownikami, zaproponowałam nowy wygląd mobilny karty produktu. 


Projekt powstał w ramach kursu UX designu.


Czas trwania projektu: 3 miesiące

Moja rola:

Brałam aktywny udział we wszystkich etapach przeprojektowania karty produktu. Pierwszy etap zbierania informacji o użytkowniku, przeprowadzania wywiadów oraz tworzenia persony wykonałam wspólnie z osobą, która była ze mną w grupie. Zebrane dane są zatem naszą wspólną pracą. Makietowanie, iteracje oraz końcowy wygląd makiety Hi-FI wykonałam samodzielnie. 

Opis problemu:

Klientem był sklep ze sprzętem elektronicznym, którego głównym źródłem dochodu jest kanał online.

Największym problemem z jakim mierzył się klient była duża ilość porzuceń na etapie przeglądania karty produktu (dane z google analytics).

Z danych z help desku wiemy również, że klienci sklepu mieli duży problem z szybkim znalezieniem szczegółowych informacji na temat konkretnego modelu telefonu oraz ograniczone zaufanie co do przedstawianych produktów. 

Główną grupą docelową sklepu są młodzi użytkownicy, zwracający uwagę w szczególności na cenę oraz popularność danego modelu.

Cele:

  • Zidentyfikować wszystkie słabe elementy karty produktu, które mogą przyczyniać się do krótkich sesji i częstych porzuceń strony;
  • Wyeksponować ważne dla naszej grupy docelowej elementy oferty (popularność, cena, łatwość wyszukiwania);

Badania:

Wywiady z użytkownikami dostarczyły cennych informacji na temat słabych elementów karty produktu i ogólnego wrażenia strony. Analiza danych pozwoliła wyodrębnić takie elementy jak:

  • brak mobilnej wersji strony internetowej;
  • brak wyszukiwarki opcji konkretnych modeli telefonów;
  • słaba czytelność strony,
  • przedstawione produkty nie wzbudzały zaufania (mała ilość zdjęć słabej jakości, opinie pochodzące z nieznanego źródła).

Stworzenie persony pozwoliło jeszcze lepiej zrozumieć potrzeby i motywacje użytkownika. 

Persona użytkownika

Zmienne, które porównywałam podczas analizy konkurencji:

  • wyszukiwarka opcji produktu (model, kolor, pamięć);
  • Ilość i jakość zdjęć produktów;
  • dostępność danych technicznych;
  • opis produktu i jego prezentacja;
  • cena i jej przedstawienie;
  • opcje porównania;
  • opinie;
  • polecane produkty;

Sklepy z elektroniką będące konkurencją bezpośrednią: 

  • media markt;
  • morele.net;
  • media expert;
  • x-com;

Sklepy będące konkurencją pośrednią: 

  • refurbed.pl;
  • alliexpress;

Ideacja:

Zestawiłam ze sobą różne możliwe rozwiązania, skupiając się na kluczowych elementach, które pozwoliłyby rozwiązać najbardziej palące problemy użytkowników. Jednocześnie, miałam na uwadze konieczność realizowania biznesowych założeń sklepu.

Chciałam aby karta produktu z jednej strony wspierała użytkowników w uzyskaniu wszystkich najważniejszych informacji o produkcie a z drugiej, zachęcała do zakupu. 

Pierwsze pomysły powstały na papierze:

Walidacja:

W kolejnym kroku przygotowałam klikalny prototyp (zobacz prototyp), który miał zweryfikować ogólną koncepcję produktu, zrozumiałość nawigacji oraz intuicyjność większości rozwiązań. W szczególności chciałam sprawdzić: 

  • czy karta produktu jest czytelna, łatwa do poruszania się?
  • jak szybko użytkownik odnajdzie konkretny model telefonu?
  • czy karta produktu wzbudza zaufanie?
  • czy użytkownik potrafi z łatwością wybrać telefon i wrzucić go do koszyka?

Osoby badane otrzymały zadanie walidacyjne (odnaleźć konkretną wersję telefonu), krótką ankietę oraz zadanie dodatkowe polegające na przesłaniu do mnie zdjęcia ekranu z testowanym prototypem. Prototyp został przetestowany przez 10 osób. 

Analiza po pierwszych testach była obiecująca. Wszystkie hipotezy zostały pozytywnie zwalidowane. 

Iteracje:

Pierwsza walidacja przyniosła interesujące wnioski. Dowiedziałam się z niej, że wielkość elementów rozwijanych mogłaby być trochę większa aby zredukować potencjalne obawy „czy trafię w odpowiednie okienko”

Dodatkowo, po konsultacjach z mentorem, pojawiły się kolejne obszary do poprawy.

uwagi na prototypie

Cały proces miał formę szybkiego iteracyjnego testu użyteczności. Poprawki wprowadzałam na bieżąco a następnie dalej testowałam. To rozwiązanie było w przypadku tego projektu najlepsze.

Pozwalało mi, jako osobie z małym doświadczeniem projektowym na bieżąco weryfikować moje pomysły, rozwiązania i wprowadzone funkcjonalności oraz poprawiać błędy.

Po wielu korektach powstał końcowy produkt, który adresuje wszystkie kluczowe funkcjonalności, jest czytelny i użyteczny. 

Główne decyzje projektowe:

  • wyszukiwarka opcji znajduje się w górnej części (zależało mi na maksymalnej widoczności tych opcji w związku z częstymi informacjami zwrotnymi od klientów, że nie potrafią ich znaleźć);
  • live chat jako funkcjonalność, którą sklep posiada, i z której klienci chętnie korzystają;
  • podkreślenie popularności produktu oraz jego promocyjnej ceny poprzez zastosowanie znaczników;
  • możliwość udostępnienia strony oraz ikona social media (facebook) – klient ma dobrze funkcjonujący fanpage, który generuje spory ruch w sklepie;
  • Łatwy dostęp do opinii w górnej części ekranu, która podnosi poziom zaufania do strony;

 

mock up karta produktu

Retrospekcja:

Cały proces był dla mnie dużym wyzwaniem, ponieważ to na nim poznawałam zasady UX designu. 

Najwięcej wysiłku kosztował mnie proces iteracji. Dopasowywanie funkcjonalności do wersji mobilnej, ograniczenia związane z czasem przeznaczonym na projekt i duża ilość poprawek do wdrożenia sprawiały wrażenie, że zamiast przybliżać się do pożądanego efektu, oddalam się od niego. 

Na pewno czeka mnie jeszcze dużo pracy nad poprawą UI designu. Stworzenie większej ilości widoków wraz z dodatkowymi funkcjonalnościami jest na mojej liście do wdrożenia. 

Dziękuję, że poświęciłeś/-aś czas na zapoznanie się z tym projektem!

 

Jeśli masz ochotę udzielić mi feedbacku lub zaprosić do wspólnego projektu, napisz do mnie! 

dagmara.barczyk@gmail.com

Mój linkedin