Stimeo
Projekt sklepu internetowy z domkami drewnianymi z zaawansowanym konfiguratorem
sklep internetowy oparty na PrestaShop w którym można kupić domki drewniane, szklarnie, pergole i ogrody zimowe. Utworzyłam projekt (ux + ui), który pomoże w łatwej nawigacji i przeprowadzi klienta przez wybranie, skonfigurowanie i zamówienie jego wymarzonego domku.
Pozwól, że przedstawię Ci proces kreacji tego projektu. Najpierw…
Discover
Zdefiniowałam potrzeby klienta i kupujących. Po przeprowadzonej analizie, wyróżniłam personę, która pozwoliła empatyzować z typowym klientem sklepu.
Radek, 46 lat
Radek to mąż Ani (35l), ojciec Antosia (5l), mieszka z nimi w bloku, w mieście wojewódzkim. Radek jest zawodowym kierowcą. Ma działkę pod miastem, na której spędza wolny czas razem z rodziną.
Cele:
- Chce rozbudować swoją działkę
- Chce znaleźć najbardziej optymalną cenowo i jakościowo ofertę
Potrzeby:
- Zobaczenie produktu w kontekście działki (zdjęcia)
- Dopasowanie wymiarów produktu do jego działki
- Opcja kontaktu telefonicznego z przedstawicielem
Trudności i obawy:
- Nie wie, czy może zaufać temu sklepowi
- Czuje się przytłoczony ilością możliwości w konfiguratorze
- Obawia się o możliwości finansowania domku
Service safari
Przeanalizowałam bezpośrednią konkurencję stimeo-domki, żeby odkryć wady i zalety w ich e-commerce.
To skrócona wersja wybranych szczegółów.
DomkiEkoArchitektura:
Domki Sodas:
Define
Wraz z klientem, określiliśmy wyzwania związane z prezentacją szczegółów produktu.
Oto, w jaki sposób je rozwiązałam.
Prezentacja kafelka produktu
Dużym wyzwaniem było pokazanie wielu informacji (wymiary domku, wysokość, powierzchnia, kąt dachu) na jednym kafelku. Przy pomocy odpowiednio dobranej typografii osiągnęłam wizualną separację pomiędzy szczegółami a tytułem i ceną domku. Przeanalizowałam heatmapy stron produktów, żeby dowiedzieć się, które z informacji warto wyciągnąć.
Podział informacji w konfiguratorze
Kolejnym rozwiązaniem do zaprojektowania był konfigurator domku drewnianego. Tego rodzaju produkt wyróżnia się dużą ilością bardzo detalicznych opcji, więc zasugerowałam zgrupowanie ich w odpowiednie foldery (maksymalnie liczba Millera), takie jak: „ogólne, ocieplenie i ogrzewanie, rozmiar, wykończenie, instalacje”. Nie tylko zdjęcia zamiast ikonek ale i tooltipy obok nich pomagają dokładnie opisać konkretne opcje konfiguratora. (Heuresyka Nielsena: Pokaż, zamiast zmuszać do pamiętania).
Skomplikowane koncepty w ikonkach
Do sklepu internetowego stworzyłam zestaw ikonek wektorowych opisujący cechy produktów. Domki drewniane, pergole, szklarnie i ogrody zimowe mają bardzo specyficzne i różniące się od siebie cechy. Oczywiście, dla lepszej czytelności i dla accessibility, każda z ikonek gdy jest prezentowana na stronie jest podpisana.
Develop
Uzbrojona w poniższe informacje zaprojektowałam ekrany w figmie.
Przejrzyj proszę mockupy i zobacz moje rozwiązania.
