Projektowanie lepszego doświadczenia dla zawodowych kolarzy

Klient: Startup, Szwajcaria
Rola: UI, UX, Graphic Design, Research
Zespół: Project Manager, Designer (ja)
Rok: 2021

Celem projektu było wymyślenie na nowo sposobu, w jaki rowerzyści współpracują ze sobą. Produkt kierowany był zarówno do zawodowych sportowców, jak i pasjonatów kolarstwa. Misją jest poprawa doświadczenia związanego z posiadaniem roweru, poprzez ułatwienie wymiany części oraz naprawy sprzętu.

Problem

Posiadanie profesjonalnego roweru często wiąże się z istotnymi wyzwaniami, zwłaszcza w zakresie pozyskiwania specyficznych części lub znalezienia godnego zaufania serwisu. Nasze wstępne analizy ujawniły kilka kluczowych pain points:

Trudność w pozyskaniu części: Rowerzyści często zmagają się z problemem znalezienia rzadkich, przystępnych cenowo lub szybko dostępnych komponentów.

Koszt i dostępność napraw: Profesjonalne naprawy bywają kosztowne i mało wygodne.

Mobile app interface for buying a bike, showing price range selector, preferred bike brands (Roadster, Trek Bikes, Redline), and a detail submission screen with a close-up photo of a modern mountain bike. The screenshot demonstrates a user-friendly bicycle shopping experience with budget filters and step-by-step guidance.

Etap badań: decyzje wizualne oparte na danych

Przeprowadziłem dogłębne badania nad stylami wizualnymi najlepiej komunikującymi charakter produktu, opierając je na solidnych podstawach naukowych. Jednym z kluczowych obszarów analizy był kolor.

Z naukowych źródeł wynika, że bardziej nasycone kolory przyciągają wzrok silniej, ale jednocześnie mogą tworzyć wrażenie niższej jakości. Co ciekawe, z perspektywy psychologicznej większe znaczenie mają nasycenie i jasność koloru niż sam odcień. Źródło znajduje się poniżej.

Color psychology with two green color variants.

Wilms L, Oberfeld D. Color and emotion: effects of hue, saturation, and brightness. Psychol Res. 2018 Sep;82(5):896-914. doi: 10.1007/s00426-017-0880-8. Epub 2017 Jun 13. PMID: 28612080.

Propozycje palet kolorystycznych

Po przeprowadzeniu fundamentalnych badań przystąpiłem do tworzenia palety kolorów dla produktu. Moje dwie główne koncepcje oparte były na następujących skojarzeniach:

Niebieski: Technologia i zaufanie.

Zielony: Natura i rozwój.

Figjam board showcasing three project color versions

Rozmowy z klientem doprowadziły nas do wyboru połączenia zieleni i czerni. Zieleń symbolizuje naturę i rozwój, zgodnie z misją aplikacji wspierającej entuzjastów rowerów w ich naprawach. Czerń dodaje profesjonalizmu, idealnie pasując do naszej głównej grupy docelowej. A przy okazji – wiele rowerów jest po prostu czarnych.

Finalna identyfikacja wizualna, złożona historia opowiedziana prostotą

Logo łączy okrąg i znak checkmark, aby opowiedzieć narracje marki. Okrąg symbolizuje koło roweru oraz cykl życia, naprawę i odnowę. Checkmark reprezentuje rozwiązany problem i zakończone zadanie.

Bikecheck logo design featuring a bold checkmark inside a circle, with the word ‘bikecheck’ in modern lowercase font. The branding is displayed on teal, white, and black backgrounds, highlighting a professional bicycle verification and bike check service identity

Etap projektowania UI

Wyniki wcześniejszych badań zostały przekształcone w core user personas, które stały się strategiczną bazą dla kolejnego etapu – projektowania interfejsu.

Stworzyłem user flows dla „buyer” i „seller”, które następnie wykorzystano w testach z użytkownikami oraz podczas prezentacji dla klienta.

Two user persona cards for a cycling app, featuring Sarah Turner, a practical and adventurous freelance designer from Sydney, and David Miller, a competitive and resourceful professional road cyclist from Zurich, with summarized bios, goals, pain points, behaviors, personality traits, and profile photos in a modern, accessible UI layout
Buyer user flow diagram for a bike marketplace app, showing a step-by-step mobile interface journey from creating a listing and inventory selection to setting a budget, filtering bike options, viewing bike details, messaging sellers, and finalizing the match, with clear annotated connections between each screen and process step

Rezultaty

Końcowy design stanowił syntezę wszystkich analiz i decyzji podjętych we wcześniejszych etapach. Logika działania została przetestowana, a nawet tak pozornie subtelne elementy jak kolor oparto na konkretnych danych badawczych.

Three mobile screens from a bike marketplace app showing an onboarding welcome screen with illustration, a bike marketplace feed listing a used road bike for $699, and a secure chat interface where a buyer contacts seller User #3442 for more information about a bike listing