SVStefan Vukotić
Back to home
Case study · Mobile app · Concept

A cycling app for the saddle, not the sofa.

Pedal Pro plans the route, rides it with you and keeps the moment worth sharing. Designed for sunlight, gloves and 30 km/h, then redesigned from my own first version.

Self-initiated concept. Pedal Pro is not a client project. It started as a 2023 exploration and was rebuilt with a new identity, a ride-first interface and fixes for everything the first version got wrong.
RoleProduct designer · solo
TypeSelf-initiated concept
PlatformiOS · Android
Timeline2023 · redesigned 2026
ScopeResearch · UX · UI · Brand
ToolsFigma · FigJam
01 · Context

Cycling apps are built for after the ride.

Most cycling apps are dashboards. They are great for reading charts on the sofa and hard to use on the bike: small numbers, glare, buttons too small for gloves, and maps that eat the screen.

The goal: one app for the three moments that matter. Choosing a ride, riding it safely, and finishing with something worth sharing.

MV
Primary persona

Marco Vittorino

32 · Milan, ItalyMarketing managerCommutes by bike, explores on weekendsOwns a high-end road bike

"Pedal through life, explore new paths, connect, embrace adventure."

Wants & needs

  • Weather he can plan around
  • Navigation and route planning
  • Fitness tracking
  • Community and social rides

Frustrations

  • Inaccurate maps and navigation
  • Outdated social features
  • High subscription costs
  • No support for his language

Motivation

  • Exploration
  • Fitness and health
  • Community and connection
  • Efficiency and convenience

Apps he loves

  • Google Maps for getting places
  • Instagram for sharing moments
  • Airbnb for weekend trips
02 · Identity

Signal orange on asphalt.

The colour comes from high-visibility cycling gear: the one colour you can't miss on a grey road. On a near-black interface it stays readable in direct sunlight, and it is used for one thing only, the next action. The mark is a rider in one swoosh, leaning into the bars on two wheels: you know what the app does before you read its name.

Pedal Pro
Primary lockup
Signal#FF5A1F
Asphalt#0E1013
Surface#1F2228
Chalk#F5F6F7
Personal best#3DDC97
Water#5AB8FF

App icon

Home screen
Settings
Notification

One shape, recognisable from the home screen down to a notification.

Built for sunlight

Chalk on asphalt17.6 : 1
Signal on asphalt6.1 : 1
Ink on signal6.4 : 1

Every pairing passes WCAG AA, and the ride numbers pass AAA.

Type

Aa
28.4 km/h

Inter Tight Black Italic for the brand, Inter Tight Bold with tabular figures for numbers that change every second.

03 · Key decisions

Six screens, one ride.

Each screen answers one of Marco's frustrations. Together they cover the ride from the first coffee to the last kudos.

Home

Today's ride, not yesterday's stats.

Home opens with the best riding window of the day, the weekly goal and one route that fits both. Planning a ride takes one glance instead of three apps.

  • Hour-by-hour riding window with wind
  • Weekly distance goal as a ring
  • One suggested route, ready to start
Route detail

Know the climb before you start.

Accurate maps were Marco's first frustration. The route shows its elevation profile, surface type and the forecast for the hours you'll actually be riding, and it is saved for offline use automatically.

  • Elevation profile with the main climb named
  • Forecast matched to the ride time
  • Offline-ready badge before you leave
Ride mode

Readable at 30 km/h.

On the bike, the screen shows three numbers and the next turn. Speed is 120 px tall, buttons are 72 px for gloves, and the screen locks against pocket taps. Pure black saves battery on OLED screens.

  • Next turn as a full-width cue
  • Speed first, distance and time second
  • Glove-sized Pause and Lap
Summary · Group rides

A finish worth sharing.

Personal bests are celebrated, not buried in a table. Sharing the ride or joining the next group ride is one tap away, which answers Marco's complaint about outdated social features.

  • Personal best called out at the top
  • Speed chart with the record segment
  • Group rides nearby, with friends and clubs
Offline & languages

Free where it matters.

High subscription prices and missing languages were two of Marco's frustrations. Offline regions and voice cues in six languages are part of the free plan, because getting lost should never be a premium problem.

  • Offline map regions with clear storage use
  • Voice cues in six languages
  • Downloads resume when the signal returns
04 · Redesign

Version one, honestly reviewed.

The first Pedal Pro had a map that filled the screen and a ride timer as the biggest number. Looking at it on a bike made the problems obvious, so the ride screen was rebuilt from what a rider needs at speed.

2023 version
  • The map fills the screen; the numbers are small
  • Elapsed time is the biggest number, speed is hidden
  • Buttons sized for fingertips, not gloves
2026 redesign
  • Speed first, 120 px tall
  • The next turn as a full-width cue
  • 72 px glove-sized buttons and a screen lock
05 · Outcome

What the redesign delivers.

As a concept, Pedal Pro is measured by what it makes possible. The next step is a ride test with real cyclists: three routes, gloves on, phones on the handlebars.

3Numbers on the ride screen, down from six. Everything else waits until you stop.
72 pxTouch targets for Pause and Lap, big enough for winter gloves.
17.6:1Contrast for ride numbers, readable in direct sunlight.
Learning

Design in context

A screen that looks fine at a desk can fail at 30 km/h. Testing on the bike changed more than any review.

Learning

Fewer numbers, more trust

Showing less during the ride made the numbers that remain easier to believe.

Next

Apple Watch and Wear OS

Ride mode's three-number layout is ready for the wrist.

Next project

Tura →

Concept · Booking app
© 2026 Stefan VukotićPedal Pro is a self-initiated concept.