← Wróć do portfolio
JMKFLOW / PRODUCT CASE 01

KROSS / UX · UI · E-commerce

Nie katalog.
System decyzji.

Redesign ścieżki zakupu roweru premium: od pytania „jak chcesz jeździć?”, przez shortlistę, porównanie i dopasowanie rozmiaru, po dostawę oraz checkout bez utraty kontekstu.

RolaProduct / UI·UX Designer ZakresDiscovery → Checkout PlatformyDesktop + Mobile
Zobacz logikę projektu
KROSS Vento 8.0 Graphite Black, premium karta produktowa
01 / 03VENTO 8.0 / Graphite BlackTen sam model. Trzy warianty kolorystyczne.

01 / Problem

Rower ma dziesiątki parametrów.
Użytkownik ma jedną decyzję.

Głównym problemem nie jest brak informacji, tylko brak hierarchii: użytkownik musi sam przełożyć specyfikację na odpowiedź „czy ten rower jest dla mnie?”.

Projekt porządkuje decyzję wokół intencji, dopasowania i pewności zakupu, zamiast zmuszać odbiorcę do pamiętania technicznych różnic między modelami.

01

Za dużo wiedzy wejściowej

Kategorie i osprzęt wymagają znajomości języka produktowego jeszcze przed wyborem.

02

Porównanie bez priorytetów

Parametry są równie ważne wizualnie, mimo że nie wszystkie wpływają na konkretny styl jazdy.

03

Niepewność rozmiaru

CTA zakupu pojawia się szybciej niż odpowiedź na pytanie: „czy ten rozmiar naprawdę będzie dobry?”.

04

Utrata kontekstu

Kolor, dostępność, dostawa i checkout powinny kontynuować decyzję, a nie zaczynać ją od nowa.

Transparentność case study: to projekt koncepcyjny. Powyższe punkty są hipotezami projektowymi do walidacji w badaniach i analityce. Nie udaję wyników z produkcji, których nie mam.

02 / UX strategy

Flow zbudowany wokół pewności decyzji.

Każdy etap odpowiada na jedno pytanie i przekazuje stan dalej. Dzięki temu użytkownik nie musi ponownie wybierać wariantu, rozmiaru ani sposobu odbioru.

01

Need

Jak i gdzie chcę jeździć?

Intencja zamiast kategorii
02

Shortlist

Które 2–3 modele pasują?

Rekomendacja z powodem
03

Compare

Co realnie je różni?

Tylko różnice
04

Fit

Czy ten wariant jest dla mnie?

Rozmiar + dostępność
05

Checkout

Czy mogę bezpiecznie domknąć zakup?

Jednoznaczny next step
Rozpoznawanie zamiast przypominania

Użytkownik rozpoznaje swój styl jazdy, zamiast przypominać sobie różnice między grupami osprzętu.

Stopniowe ujawnianie informacji

Specyfikacja pojawia się wtedy, gdy może wpłynąć na wybór, nie jako ściana danych na wejściu.

Zachowanie stanu

Wybrany model, kolor, rozmiar i dostawa są zachowane w kolejnych krokach.

03 / Measurement plan

Nie deklaruję sukcesu.
Definiuję, jak go zmierzyć.

W projekcie koncepcyjnym nie ma wiarygodnych „+27% conversion”. Zamiast wymyślać wynik, wskazuję metryki, które sprawdziłyby czy redesign faktycznie zmniejsza niepewność i tarcie.

01Ukończenie wyszukiwania

Czy użytkownik kończy discovery i przechodzi do rekomendacji?

Lejek / rezygnacje przy pytaniach
02Porównanie → karta produktu (PDP)

Czy porównanie pomaga zawęzić wybór zamiast generować kolejne otwarcia kart?

Wskaźnik wyboru / czas do decyzji
03Pewność dopasowania

Czy po skorzystaniu z fit assistanta spada liczba zmian rozmiaru i porzuceń przy CTA?

Użycie przewodnika / zmiany rozmiaru / zwroty
04Tarcia przy finalizacji zamówienia

Gdzie użytkownik zatrzymuje się od koszyka do potwierdzenia?

Wskaźnik błędów / porzucenia / ukończenia

03 / Discovery

Najpierw pytam o jazdę.
Nie o osprzęt.

Krótki finder ogranicza wybór do sensownej shortlisty. Użytkownik widzi postęp, może cofnąć się bez utraty odpowiedzi i dostaje rekomendację z uzasadnieniem, nie „magiczny” wynik.

ZNAJDŹ SWÓJ ROWER01 / 03
Twój styl jazdy

Gdzie jeździsz najczęściej?

Wybierz sytuację, która najlepiej opisuje większość Twoich tras.

REKOMENDACJAna podstawie odpowiedzi
Rekomendowany KROSS ESKER 7.0
Najlepsze dopasowanie

ESKER 7.0

Gravelowa geometria, karbonowa rama i Shimano GRX wspierają długi dystans oraz jazdę po zróżnicowanej nawierzchni.

04 / Compare

Trzy modele. Trzy różne potrzeby jazdy.

Porównanie zestawia szosowy Vento 8.0, gravelowy Esker 7.0 i terenowy Level X 9.0. Różnice są opisane językiem decyzji: dyscyplina, napęd, masa i charakter jazdy, zamiast samą listą parametrów.

3 modele · 3 scenariuszeRoad · Gravel · MTB
PORÓWNANIECo zmienia wybór?
Wybrany modelKROSS Vento 8.0

VENTO 8.0

Road / Performance
KROSS ESKER 7.0, Gravel / Adventure

ESKER 7.0

Gravel / Adventure
KROSS LEVEL X 9.0, MTB / XC

LEVEL X 9.0

MTB / XC
DyscyplinaRoad / PerformanceGravel / AdventureMTB / XC
ModelVento 8.0Esker 7.0Level X 9.0
RamaCarbonCarbonCarbon
NapędShimano 105Shimano GRXSRAM GX
Masa8,5 kg9,7 kg11,4 kg
Charakter jazdySzybkość / asfaltEksploracja / mixed surfaceKontrola / teren

05 / Product decision

PDP nie tylko prezentuje.
Usuwa ryzyko zakupu.

W jednym widoku łączę wybór wariantu, fit, dostępność i dostawę. Najważniejsze informacje są blisko CTA, a stany nie opierają się wyłącznie na kolorze.

INTERACTIVE PRODUCT VIEW · BOK
KROSS Vento 8.0, widok z boku

06 / Visual direction

Jeden Vento 8.0.
Trzy kolory, jeden system.

Wszystkie materiały pokazują dokładnie ten sam model roweru. Zmienia się wyłącznie kolor ramy, dzięki czemu galeria jest wiarygodna produktowo i spójna wizualnie.

KROSS Vento 8.0 Graphite Black
01 / 03Graphite BlackVENTO 8.0 · Carbon · 8,5 kg · Shimano 105
KROSS Vento 8.0 Racing Red
02 / 03Racing RedVENTO 8.0 · Carbon · 8,5 kg · Shimano 105
KROSS Vento 8.0 Electric Blue
03 / 03Electric BlueVENTO 8.0 · Carbon · 8,5 kg · Shimano 105

07 / Checkout

Checkout kontynuuje wybór.
Nie resetuje go.

Wariant, rozmiar i sposób odbioru pozostają widoczne. Koszty są ujawnione przed płatnością, a wskaźnik postępu pokazuje dokładnie, gdzie użytkownik jest i co zostało.

KROSSBezpieczny checkoutPomoc: 800 000 000
  1. Koszyk
  2. Dostawa
  3. Płatność
  4. Potwierdzenie
02

Dostawa

Wybierz sposób, który jest dostępny dla Twojego wariantu.

Nie musisz zakładać konta.Zakup gościnny jest dostępny do końca procesu.

08 / Responsive UI

Mobile prowadzi do zakupu.
Nie jest miniaturą desktopu.

Na małym ekranie produkt, kluczowe parametry, wariant, rozmiar i CTA tworzą jedną sekwencję. Najważniejsza akcja pozostaje w zasięgu kciuka, a wybory mają jednoznaczne stany.

Mobilny ekran produktu KROSS Vento 8.0 Racing Red
PRODUCT / MOBILEVENTO 8.0 · PDPKolor, rozmiar i zakup w jednym ciągłym flow.
01
Hierarchia dla obsługi kciukiem

Przycisk działania i wybór rozmiaru znajdują się w dolnej części widoku, bez konieczności wracania do góry.

02
Ciągłość wariantu

Zmiana koloru aktualizuje ten sam Vento 8.0. Nazwa, cena i specyfikacja pozostają stabilne.

03
Dopasowanie przed decyzją

Dobór rozmiaru jest dostępny bezpośrednio przy selektorze i przed głównym przyciskiem działania.

04
Stała informacja zwrotna

Wybrany wariant i rozmiar są widoczne także po przejściu do koszyka i finalizacji zamówienia.

09 / UI system

Spójność nie bierze się z mockupów.
Bierze się z systemu.

FOUNDATIONS / COLOR

Carbon / Racing red / Warm paper

#111618#E23D35#F5F3EF#FFFFFF
FOUNDATIONS / TYPEVENTO 8.0

Jedna bezszeryfowa typografia utrzymuje spójny, czytelny rytm całego interfejsu. Wyraźny kontrast wielkości pomaga szybko uporządkować informacje i kieruje uwagę na najważniejsze decyzje.

COMPONENTS / STATES
✓ DostępnyNajlepsze dopasowanie2 dni
ACCESSIBILITY / QA
  • Min. 44×44 px dla interaktywnych celów
  • Stan aktywny: kolor + kształt + tekst
  • Widoczny focus i obsługa klawiaturą
  • Reduced motion i brak krytycznej informacji w animacji

10 / UX rationale

Każdy efekt wizualny ma zadanie.

Motion wskazuje zmianę stanu, sticky CTA skraca drogę do akcji, a duża fotografia produktu jest kotwicą orientacji. Dekoracja nie konkuruje z decyzją.

01
Informacja zwrotna ≤ 100 ms

Stan kliknięcia i wyboru pojawia się natychmiast, nawet jeśli asset produktu dopiero się przełącza.

02
Błędy przy źródle

Błąd rozmiaru, dostawy lub płatności powinien pojawić się przy polu, z instrukcją naprawy.

03
Bez ślepych zaułków

Każdy etap ma jasny następny krok oraz możliwość cofnięcia bez utraty stanu.

04
Jedno główne działanie

Na każdym ekranie dominuje jedno CTA; działania poboczne mają niższą hierarchię.

06 / Warsztat

Narzędzia dobieram do problemu, nie do efektu.

Projekt łączy projektowanie interfejsu, prototypowanie, animacje oraz implementacyjny prototyp koncepcji. Dzięki temu mogę ocenić nie tylko wygląd ekranu, ale też jego zachowanie w realnym środowisku.

DESIGN SYSTEM / PROTOTYPING

Figma

Architektura informacji, wireframes, komponenty, prototypy i final UI.

01
PROTOTYPE / IMPLEMENTATION

Codex

Wsparcie implementacji, szybkie iteracje front-endu i weryfikacja zachowania komponentów.

02
MOTION / MICROINTERACTIONS

Adobe After Effects

Studia ruchu, timing interakcji i kierunek animacji wspierających feedback.

03

07 / Wniosek

Dobry UI nie pokazuje, ile pracy kosztował. Po prostu prowadzi.

W tym koncepcie najważniejsza była nie liczba ekranów, ale spójność decyzji: od pierwszego pytania użytkownika po finalne potwierdzenie zakupu.

UX strategyProduct UIResponsiveMotionPrototype
Plansza case study KROSS Vento 8.0 z mobilnym procesem zakupowym

Masz produkt, który potrzebuje lepszego doświadczenia?

Zaprojektujmy system, który wygląda świetnie i prowadzi do decyzji.

Porozmawiajmy ↗Wróć do portfolio