01
Przestarzała typografia
Stare kroje i mało czytelne formatowanie obniżały czytelność i sprawiały wrażenie interfejsu nieprzystającego do branży fashion.
Case study · E-commerce · UX/UI Redesign
Top Secret
Redesign
Kompleksowy redesign platformy e-commerce jednej z najbardziej rozpoznawalnych polskich marek modowych. Od nowej architektury informacji, przez odświeżoną stronę główną i listingi, po konwertującą kartę produktu. Cel: nowoczesny, spójny interfejs, który podnosi postrzeganą wartość marki i porządkuje użyteczność serwisu. Projekt wykonywałam w ramach etatu dla firmy GREENPOINT S.A., która jest właścicielem pełni praw autorskich do projektu.
- Rola
- Lead UX/UI Designer
- Branża
- Fashion / E-commerce
- Rok
- 2024 / 2025
Punkt wyjścia
Przed i po.
Ta sama strona główna, dwa światy. Po lewej wersja zastana, po prawej projekt po redesignie. Przewiń każdą ramkę, aby porównać całą stronę.
Przed
topsecret.pl
Po
topsecret.pl
Zrzuty wersji „przed” uchwyciły gorący okres wyprzedaży, stąd agresywne, czerwone apele „Final Sale”. Audyt UX/UI ujawnił jednak głębsze, systemowe problemy, niezależne od sezonu promocyjnego.
Wyzwanie & diagnoza
Nie sezon był problemem,
tylko system.
Audyt pokazał, że problemy interfejsu istniały niezależnie od promocji. Zdiagnozowałam trzy główne obszary, od których zaczął się redesign.
02
Szum wizualny i brak hierarchii
Nawet poza wyprzedażą interfejs był przeładowany. Brak oddechu (whitespace) utrudniał skanowanie strony i skupienie na asortymencie.
03
Problemy z nawigacją
Rozbudowana struktura menu wymagała zbyt wielu kliknięć, co na urządzeniach mobilnych tworzyło realne bariery (friction points).
Dla kogo projektowałam
Dwie klientki,
dwa style zakupów.
Persony oparte na badaniach i analizie zachowań zakupowych wyznaczyły priorytety całego redesignu: hierarchię, ton i poziom szczegółowości interfejsu.
K
Karolina, 28
Specjalistka ds. marketingu · Warszawa
iPhone 14Tryb jasnySesje 5–10 minZakupy impulsywne
„Jeśli w 3 dotknięciach nie znajdę tego, czego szukam, zamykam aplikację.”
Cele
Znaleźć i kupić w kilku krokach.
Szybko filtrować po rozmiarze i cenie.
Przeglądać galerię bez zmiany chwytu telefonu.
Frustracje
Galeria bez gestu swipe, trzeba klikać małe miniatury.
Filtry ukryte w desktopowym panelu bocznym.
Trzeba wracać na górę, by dodać produkt do koszyka.
Kluczowa potrzeba: szybkość i minimum tarcia na całej ścieżce zakupu.
M
Marta, 35
Freelancerka · okolice Wrocławia
Samsung GalaxyTryb ciemnyWieczorem, bez pośpiechuZakupy planowane
„Nie chcę wracać na górę ekranu, żeby dokończyć to, co zaczęłam.”
Cele
Porównać kilka produktów przed decyzją.
Pełne opisy, materiały i tabele rozmiarów pod ręką.
Dodać do koszyka bez utraty miejsca na liście.
Frustracje
Przycisk „do koszyka” poza zasięgiem kciuka.
Paginacja numeryczna zamiast płynnego scrolla.
Trzypoziomowe menu opóźnia dojście do kategorii.
Kluczowa potrzeba: pełnia informacji i kontrola nad porównywaniem produktów.
Kluczowe rozwiązania
Czysty system,
w którym gra produkt.
Cztery filary redesignu: od nowego fundamentu wizualnego po dopracowaną kartę produktu.
Design System & Typografia
Editorial jako fundament
Nowy fundament wizualny oparty na zasadach editorial design. Elegancki krój szeryfowy dla nagłówków buduje charakter marki, a czytelny bezszeryfowy obsługuje UI, opisy i filtry. Ciężkie bloki koloru ustąpiły miejsca czystemu, minimalistycznemu tłu, które oddaje scenę produktom.
Mega Menu & architektura (IA)
Krótsza droga do asortymentu
Uporządkowana nawigacja globalna z przejrzystym mega menu ułatwia eksplorację rozbudowanego katalogu. Na stronie głównej okrągłe miniatury kategorii (Bluzki, Sukienki, Spodnie) drastycznie skracają czas dotarcia do produktu, co jest kluczowe na mobile.
Listing produktów (PLP)
Precyzja bez przytłoczenia
Uporządkowana siatka z powiększonymi miniaturami oraz zwijany system filtrów i sortowania. Pozwala precyzyjnie dobrać rozmiar i kolor, nie zasypując użytkownika opcjami i obniżając obciążenie poznawcze.
Karta produktu (PDP)
Hierarchia, która sprzedaje
Układ prowadzi wzrok od galerii wysokiej jakości, przez czytelny selektor rozmiaru, po wyraźne, przyklejone wezwanie do działania (sticky CTA). Lepiej wyeksponowana tabela rozmiarów i sekcja cross-sellingowa „Kup cały look”.
Architektura interakcji
Ścieżka użytkownika.
Zanim powstał UI, zmapowałam przepływ od wejścia na stronę do zakupu. To on wyznaczył strukturę menu, listingu i karty produktu.
Widoki desktop
Kluczowe ekrany redesignu.
Przewijaj, aby zobaczyć projekt w akcji: od strony głównej, przez mega menu i listingi, po kartę produktu i wyszukiwarkę.
Strona główna1 / 5
Podsumowanie
Interfejs jako rama dla produktu.
Redesign Top Secret pokazuje, jak strategiczna zmiana UI/UX odmienia odbiór całej marki. Zastąpienie krzykliwego interfejsu czystym design systemem z dopracowaną typografią poprawiło estetykę, ale przede wszystkim rozwiązało problemy nawigacyjne. W e-commerce fashion to produkt gra pierwsze skrzypce, a interfejs ma być dla niego jedynie niezauważalną, użyteczną i piękną ramą.