Top Secret:
Redesign ścieżki
zakupowej mobile
Audyt UX obecnej wersji mobilnej topsecret.pl i projekt koncepcyjny aplikacji, która usuwa siedem barier stojących między klientką a zakupem.
Siedem barier na
ścieżce do zakupu.
Audyt heurystyczny mobilnej wersji topsecret.pl — bezpośrednia analiza aktualnej strony — ujawnił siedem wzorców, które na dotykowym ekranie stają się realnymi barierami zakupowymi. To nie błędy techniczne, lecz decyzje architektoniczne przeniesione wprost z desktopu.
Wzorzec przeniesiony wprost z desktopu — na dotykowym ekranie zamienia się w ukryty hamburger albo panel nakrywający listing. Natywny bottom sheet jest tu nieobecny.
Zdjęcie, badge, nazwa, miniatury kolorów, rozmiary i cena upchnięte na ok. 160 px szerokości — przeciążenie informacyjne trudne do obsłużenia kciukiem.
Dziesiątki ponumerowanych stron zamiast infinite scroll lub „Załaduj więcej” — standardu, jakiego oczekuje klientka na telefonie.
Miniatury tej wielkości na ekranie 390 px są za małe do precyzyjnego tapnięcia kciukiem podczas przeglądania szczegółów produktu.
„Dodaj do koszyka” nie jest przyklejony do dołu ekranu — po przejrzeniu galerii i opisu trzeba przewinąć z powrotem w górę.
Hierarchia kolekcja → 9 kolekcji tematycznych → kategorie. Na mobile każdy poziom to osobny overlay do zamknięcia.
Przy takiej skali asortymentu brak natywnego bottom sheet z filtrowaniem to krytyczna blokada ścieżki zakupowej.
Aktualna aplikacja topsecret.pl
8 realnych ekranów z bieżącej wersji mobilnej — punkt wyjścia do redesignu
Strona główna — baner SALE i kategorie dostępne dopiero po przewinięciu w dół
Zakładka Kategorie — pierwszy z trzech poziomów menu (P6)
Listing „Sukienki”, 240 produktów — filtry i sortowanie stłoczone w jednym rzędzie (P1, P2)
Double Diamond,
nie estetyczna intuicja.
Dwie fazy rozbieżności i zbieżności w czterech etapach — tak, by każda decyzja projektowa wynikała z badań, nie z preferencji estetycznej.
Analiza topsecret.pl, benchmarking (H&M, Zalando, Reserved), audyt heurystyczny, persony UX.
User flow, architektura informacji, hierarchia problemów P1–P7, cele projektowe.
Wireframy odręczne (lo-fi), koncepcje kluczowych ekranów, design system, 12 komponentów.
Testy użyteczności w Maze, wnioski i rekomendacje wdrożeniowe dla zespołu produktowego.
Kto stoi po drugiej
stronie ekranu.
Dwie persony reprezentujące główny segment klientek mobilnych — obie kupują regularnie przez telefon, obie trafiają na inny fragment tych samych siedmiu barier.
Kupuje impulsywnie w wolnej chwili — na przystanku, w przerwie w pracy. Oczekuje błyskawicznego filtrowania i czytelnej, dużej galerii produktu.
"Jeśli w 3 dotknięciach nie znajdę tego, czego szukam, zamykam aplikację."
Planuje zakupy z wyprzedzeniem, czyta opisy i porównuje warianty. Oczekuje kompletnej karty produktu i wygodnego, przewidywalnego koszyka.
"Nie chcę się cofać na górę ekranu, żeby dokończyć to, co zaczęłam."
Benchmarking trzech platform z czołówki polskiego i globalnego fashion e-commerce wskazał konkretne wzorce do adaptacji.
Kategorie jako ikony w poziomym scrollu na Home — jeden tap zamiast trzech poziomów menu. Chip selektory przy wyborze rozmiaru zamiast rozwijanych list.
Galeria produktu jako natywny swipe z dot indicators. Aktywne filtry widoczne jako chipy nad siatką listingu. Infinite scroll bez paginacji.
Płytka, 2-poziomowa nawigacja. Szybkie filtrowanie po rozmiarze bezpośrednio nad siatką produktów, bez wchodzenia w osobny panel.
Struktura przed
estetyką.
Cztery kluczowe widoki naszkicowane odręcznie, by przetestować hierarchię treści i przepływ, zanim pojawi się warstwa wizualna.
Od lewej: Strona główna → Listing z filtrami w bottom sheet → Karta produktu ze sticky CTA → Koszyk
Każda decyzja
odpowiada na problem.
Pięć rozwiązań, które wprost adresują zdiagnozowane bariery P1–P7 — bez zbędnych ozdobników.
Filtry wywoływane jednym tapem, nie ukryte za bocznym panelem z desktopu. Aktywne filtry widoczne jako chipy nad siatką produktów.
Natywny swipe z dot indicators zastępuje 8 miniatur 40×40 px — przeglądanie produktu jednym kciukiem, bez precyzyjnego celowania.
„Dodaj do koszyka” przyklejony do dołu ekranu razem z wyborem rozmiaru — zero przewijania z powrotem w górę.
Produkty doładowują się podczas przewijania listingu — bez tapania w małe numerki stron.
Kategoria → lista produktów. Kolekcje tematyczne jako banery na stronie głównej, nie osobny poziom menu.
Tokeny zgodne
z marką.
Paleta i typografia wyprowadzone z rzeczywistej identyfikacji Top Secret — czerń, biel i sygnałowa czerwień promocji — a nie z estetycznej preferencji projektanta.
Co pokazały testy
użyteczności.
Testy użyteczności w Maze na prototypie klikalnym — zadania obejmowały znalezienie produktu przez filtry, dodanie do koszyka i nawigację do kategorii.
szybciej znalezienie produktu przez filtry vs. obecna strona
task success rate przy dodawaniu produktu do koszyka bez błędu
uczestniczek zagubionych w nawigacji (vs. większość na oryginale)
średnia ocena satysfakcji z przeglądania galerii produktu
konceptualnych ekranów zaprojektowanych z pełną specyfikacją
komponentów (atomów) gotowych do dalszej rozbudowy
"Największą zmianą nie była estetyka, lecz architektura interakcji. Przeniesienie filtrów z bocznego panelu do bottom sheetu i dodanie sticky CTA na karcie produktu — dwie decyzje, które usunęły główne bariery zakupowe na mobile."