STUDIUM PRZYPADKU UX/UI · PIERWSZA APLIKACJA MOBILNA

Top Secret:
Pierwsza aplikacja
mobilna marki

Projekt pierwszej aplikacji mobilnej marki Top Secret zrealizowałam w ramach pracy na etacie dla GREENPOINT S.A. — właściciela praw autorskich do projektu. Za całościową wizję odpowiadałam jako UX/UI Graphic Designer: od pierwszych makiet i architektury informacji po finalny interfejs. Był to jednak efekt pracy zespołowej — przez 6 tygodni ściśle współpracowałam z zespołem deweloperskim oraz Dyrektorem e-commerce, wspólnie rozwiązując problemy techniczne i prowadząc projekt od koncepcji aż po pomyślne wdrożenie.

ROLA
UX/UI Graphic Designer
CZAS REALIZACJI
6 tygodni
ROK
2023
PLATFORMA
iOS i Android
BRANŻA
Fashion
PRZEWIŃ W DÓŁ
01 / WYZWANIE I CEL BIZNESOWY

Wyzwanie i cel biznesowy

DNA MARKI
Przystępna moda w dobrej cenie
Kobiecość i romantyzmPowszechna dostępność cenowaOtwartość na różne styleEmocje i autentycznośćOdwaga i wyrazistość

Punkt wyjścia

Marka Top Secret opierała sprzedaż cyfrową wyłącznie na stronie WWW. Użytkownicy mobilni mierzyli się z wolnym ładowaniem serwisu, brakiem powiadomień push oraz skomplikowanym procesem finalizacji zamówienia, co zniechęcało do dokańczania zakupów na telefonie.

Brak dedykowanej aplikacji mobilnej
Częste porzucanie koszyka na etapie finalizacji
Brak personalizacji i powiadomień push
Konkurencja (Reserved, Mohito, H&M) obecna już w App Store

Cel projektu

Zaprojektowanie intuicyjnej, szybkiej i angażującej aplikacji mobilnej iOS i Android. Głównym wyzwaniem było stworzenie jednego interfejsu, który odpowie na nawyki zakupowe i poziom zaawansowania technologicznego trzech skrajnie różnych grup klientek.

Uproszczona ścieżka od odkrycia do zakupu
Modal wyboru rozmiaru — kluczowy pain point
Trzy persony: Gen X, Millenialsek i Gen Z
Język korzyści, prosty i bezpośredni
02 / Proces UX — od danych do decyzji

Proces UX: od danych do decyzji

Na podstawie briefu marki zidentyfikowałam trzy rzeczywiste persony klientek Top Secret — różniące się wiekiem, zachowaniem i relacją z technologią. Każda z nich przełożyła się na konkretną decyzję projektową.

Cechy wspólne wszystkich person:
Lubią czuć się kobieco
Dom i rodzina są ważne
Zwracają uwagę na cenę
Stawiają na wygodę i komfort
Są wrażliwe na promocje
Polskie korzenie marki
Beata
45–54 lat · Pokolenie X · Poukładana i praktyczna
Miasto średniej wielkości
Dochód
Przeciętny
Zakupy
Sklep stacjonarny
Social media
Facebook
Wrażliwość cenowa
Bardzo wysoka

Kieruje się ceną i praktycznością. Kupuje impulsywnie — zasada «podoba mi się». W szafie mix stylów, wzorów i kolorów. Musi dotknąć ubranie przed zakupem, ale przegląda www.

Cele zakupowe
›Znaleźć ubranie pasujące na różne okazje
›Sprawdzić dostępność w sklepie stacjonarnym
›Korzystać z promocji SALE i OUTLET
Frustracje w aplikacji
Aplikacja zbyt skomplikowana — woli prostotę
Chce zobaczyć produkt 'na żywo' przed zamówieniem
Niepewność co do rozmiaru bez możliwości przymierzenia

"Lubię wejść, zobaczyć co ładnego i od razu kupić. Nie chcę się zastanawiać."

Cena > JakośćStyl: mixImpulsywna
Moja decyzja projektowa

Zaprojektowałam maksymalnie uproszczony proces logowania oraz wyeksponowałam sekcję Promocje i Sale bezpośrednio na ekranie głównym.

Główna persona
Ania
35–44 lat · Starszy Millennial · Ponadczasowa i klasyczna
Małe miasto
Dochód
Przeciętny
Zakupy
Online i stacjonarny
Social media
Facebook, YouTube, Instagram
Wrażliwość cenowa
Umiarkowana

Aktywna zawodowo mama, ceni czas dla siebie. Uwielbia klasykę i ponadczasowe kroje. Stawia na delikatną elegancję do pracy i na co dzień. Śledzi trendy, ale nie są głównym wyznacznikiem zakupów.

Cele zakupowe
›Szybko znaleźć stylizację na co dzień i do pracy
›Wygodne zakupy online z możliwością zwrotu
›Śledzić nowe kolekcje i wyprzedaże sezonowe
Frustracje w aplikacji
Zbyt wiele kroków do finalizacji zamówienia
Brak przejrzystego filtru po okazji/stylu
Konieczność logowania przy każdej wizycie

"Cenię wygodę zakupów online, ale ważna jest też możliwość kontaktu z ubraniem na żywo."

Klasyczna elegancjaOnline + offlineMillennial
Moja decyzja projektowa

Wprowadziłam funkcję „Sprawdź dostępność w sklepie stacjonarnym” bezpośrednio na karcie produktu.

Eryka
25–34 lat · Młodszy Millennial / Gen Z · Kobieca i romantyczna
Mała miejscowość
Dochód
Przeciętny
Zakupy
Sklep online (mała miejscowość)
Social media
Instagram, TikTok, Pinterest
Mobile-first
Zdecydowanie

Młoda mama ceniąca wygodę i kobiecość. Wybiera sukienki kwiatowe, falbany i urocze dodatki. Lubi slow life i chwile z rodziną. Mieszka daleko od galerii — tylko sklep online.

Cele zakupowe
›Przeglądać nowości kolekcji na telefonie
›Łatwo zamówić z dostawą do domu
›Śledzić inspiracje i tworzyć listy życzeń
Frustracje w aplikacji
Mała galeria handlowa — zależy na zakupach online
Trudność w doborze rozmiaru bez przymierzenia
Wolne ładowanie strony www na telefonie

"Mieszkam daleko od sklepu, więc aplikacja musi mi pokazać ubranie tak, jakbym je trzymała w rękach."

Slow lifeKwiatowe wzoryGen Z / Millennial
Moja decyzja projektowa

Postawiłam na dynamiczne, wielkoformatowe zdjęcia ubrań oraz płynne gesty przeglądania kolekcji.

Archetyp marki
Wielbiciel

Ceni piękno, a zmysłowość to jego drugie imię. Miłość jest dla niego niezwykle ważna — zarówno ta romantyczna, jak i rodzicielska czy przyjacielska.

«Jesteś jedyny i wyjątkowy"
03 / ARCHITEKTURA I EWOLUCJA PROJEKTU

Architektura i ewolucja projektu

A

User Flow

Zanim przeszłam do projektowania ekranów, rozrysowałam pełną architekturę informacji oraz User Flow kluczowych procesów — od strony głównej po koszyk. Diagram odwzorowuje osiem ścieżek użytkownika i jeden punkt decyzyjny, dbając o to, by użytkownik nigdy nie trafił w ślepy zaułek.

Case study · User flow

Architektura nowej aplikacji mobilnej Top Secret

Osiem ścieżek użytkownika prowadzących z ekranu głównego do kluczowych zadań: zakupu, wyszukiwania, skanowania produktów w sklepie i budowania listy ulubionych.

8 ścieżek 23 ekrany i elementy 1 punkt decyzyjny
StartStrona główna

  • Ścieżka zakupowa

    przeglądaj nowości
    EkranKarta produktu (nowości)
    kliknij produkt
    EkranSzczegóły produktu
    wybierz rozmiar
    AkcjaDodaj do koszyka
    dodaj produkt
    CelKoszyk zakupowy

  • Wyszukiwanie

    kliknij pasek
    Element UIPasek „Szukaj”
    wpisz frazę
    CelWidok wyszukiwania / ostatnie

  • Skaner kodów

    kliknij ikonę
    Element UIIkona kodu kreskowego
    skanuj kod
    CelEkran skanera (aparat)

  • Kategorie

    wybierz kategorię
    Element UIIkona kategorii
    filtruj listę
    CelLista produktów: kategoria

  • Kampania

    kliknij baner
    Element UIGłówny baner (hero)
    otwórz kampanię
    CelStrona kampanii / lookbook

  • Wyprzedaż

    kliknij SALE
    Element UICzerwony baner SALE
    pokaż oferty
    CelLista produktów: wyprzedaż

  • Ulubione

    kliknij serduszko
    Element UIIkona serduszka
    sprawdź status
    DecyzjaCzy zalogowany?
    Tak
    CelDodano do ulubionych
    Nie
    EkranLogowanie / rejestracja

  • Nawigacja dolna

    stale na dole
    Element UIDolny pasek nawigacji
    ikona listyPełne menu kategorii
    ikona serduszkaUlubione
    ikona koszykaKoszyk zakupowy
    ikona ludzikaPanel użytkownika / profil
Punkt startowy Ekran / element interfejsu Cel ścieżki Punkt decyzyjny Akcja użytkownika

Przewiń w poziomie, aby zobaczyć wszystkie ścieżki · najedź na węzeł, by go wyróżnić

B

Wireframes

Pracę nad interfejsem zaczęłam od szybkich makiet niskiej wierności. Poniżej ewolucja myślenia: szary wireframe Lo-Fi zestawiony bezpośrednio z finalnym ekranem High-Fidelity.

LO-FI WIREFRAMESzkic strony głównej
Szkic strony głównej

Rozmieszczenie bloków, hierarchia i priorytety — bez koloru i typografii.

HIGH-FIDELITY
Ekran główny aplikacji Top Secret
Finalny ekran i komponenty

Ekran główny w pełnej tożsamości wizualnej marki, złożony z gotowych komponentów design systemu.

04 / WARSZTAT TECHNICZNY I DOSTĘPNOŚĆ

Warsztat techniczny i dostępność

Projekt opiera się na nowoczesnej, minimalistycznej palecie barw Pure White i Pure Black, uzupełnionej neutralną szarością i przełamanej energetycznym akcentem Coral (#F05C4E). Wszystkie elementy zamknęłam w spójny system komponentów w Figmie.

UPS MARKI — PODSTAWA DECYZJI PROJEKTOWYCH
1
Dobra relacja ceny do jakości
2
Trendy za przystępną cenę
3
Dostępność oferty blisko Ciebie
4
Szeroka rozmiarówka
5
Modna i kobieca elegancja
PALETA KOLORÓW APLIKACJI
Coral
#F05C4E
Akcent główny
Neutral Grey
#5E5E5E
Tekst pomocniczy
Pure White
#FFFFFF
Tło i powierzchnie
Pure Black
#000000
Tekst główny
SKALA TYPOGRAFICZNA — URBANIST
Display
TOP SECRET
28px
Heading
Nowa kolekcja SS25
19px
Title
Sukienki i bluzki damskie
14px
Body
Odkryj przystępną modę w dobrej cenie
13px
Caption
NOWOŚCI · SALE · OUTLET
11px
Przewodnik krok po kroku

Makiety wysokiej wierności

13 ekranów aplikacji · pełna ścieżka od odkrycia po zarządzanie kontem

Ekran startowy — plansza powitalna z logo marki

Ekran startowy — plansza powitalna z logo marki

Strona główna — wyszukiwarka, baner kolekcji i kategorie w kółkach

Strona główna — wyszukiwarka, baner kolekcji i kategorie w kółkach

Strona główna (przewinięta) — siatka Nowości i baner SALE

Strona główna (przewinięta) — siatka Nowości i baner SALE

Ekrany 1–3 z 13
06 / WPŁYW PROJEKTU I WYNIKI

Wpływ projektu i wyniki

Mniej porzuceń koszyka

Uproszczona finalizacja i natywny modal wyboru rozmiaru usuwają największe tarcie ścieżki zakupowej.

Prostsza ścieżka zakupowa

Krótsza droga od produktu do potwierdzenia zamówienia niż w mobilnej wersji strony WWW.

Wyższa konwersja mobile

Natywne doświadczenie zaprojektowane pod zakupy jedną ręką i realne nawyki mobilne klientek.

Pozytywne testy z użytkownikami

Kierunek projektu potwierdzony w testach koncepcji z osobami odpowiadającymi personom marki.

PROCES PROJEKTOWY · 6 TYGODNI · DOUBLE DIAMOND
TYDZIEŃ 1
Odkryj

Analiza briefu, badanie person, audyt konkurencji (Reserved, Mohito, H&M)

TYDZIEŃ 2
Zdefiniuj

Mapy podróży 3 person, przepływy użytkownika, architektura informacji

TYDZIEŃ 3–5
Zaprojektuj

Wireframy, prototyp, system komponentów, iteracje z zespołem deweloperskim

TYDZIEŃ 6
Dostarcz

Makiety HD, testy, dokumentacja i handoff do wdrożenia

Wnioski

Projekt nauczył mnie, jak optymalizować design pod techniczne ograniczenia i efektywnie współpracować z deweloperami przy przekazywaniu specyfikacji (Developer Handoff). Najważniejsze pozostają dla mnie nowoczesność i wydajność — dostarczone doświadczenie ma być nie tylko piękne, ale też szybkie i gotowe do wdrożenia.