UX/UI Case Study | The Pedaler



About the Pedaler

The Problem


Mounted Phone

UX Design Process


Domain Research

Competitive/Comparative Analysis

Competitive Comparative Analysis

Survey Results

  • How do you primarily check for directions while self navigating?
  • When planning a bike route or trail, which details do you find most important?
  • How would you like to receive directions while self-navigating? (ie. reading, audio, or visual cues)
How do you check for directions while self-navigating?
When planning a bike route or trail, which three details do you find most important?

Contextual Inquiry

Interview Shops
  • Majority of bike rental customers were tourists with friends or family
  • If people get lost it’s rare but when do they call the shop
  • City Cycle has the same physical map service as The Pedaler in place
  • They miss directions while cycling with their current self-guided navigation method due to late warning
  • The most important features were elevation, duration, distance, and surface type
  • 90% of all customers were tourists



Affinity Diagramming

Overall Affinity Diagram
Affinity Diagramming for User Persona


  • Wants to learn about Victoria at his own pace
  • Wants to bond and get activity with his girlfriend
  • Afraid of getting lost
  • Can’t hear audio self-navigating on his bike

Feature List and Matrixes

User Scenario

User Flow

Design and Testing

Low-Fidelity Paper Prototyping

  • The first notification ding when you hit an 100 meter radius (one block) of the turn
  • The second ding when you have to turn at that moment
  • The third ding when you have missed a turn
Rough Paper Prototype
Paper Prototype Overview
Difficult Turn Picture Overlay

Paper Prototype Testing

Design Progression

Final Paper Prototype

Paper Prototype Full Overview

Mid-Fidelity Sketch

Removed Details
Hidden Details
Coloured notifications

Usability Testing Key Findings

  • Extra elements take away from the navigation aspect.
  • Hiding unnecessary details from the live navigation, to increase focus on navigational features such as the map and turn by turn directions.
  • Increased visibility for directions using colour changes, popups, and audio
  • Adding a pause button to allow users to stop during their ride to look at other interesting sites.
  • Adding a custom notification feature to highlight difficult turns, to further prevent the user from missing them.

User Interface Design

Mood and Colour Palette

Voice and Tone



High-Fidelity Prototype

Future Considerations of the App

  • Add colour coated lines of specific surface types (ie. Shared road, dirt road, single road) in the map overview. This gives the user a better idea of what to expect along their route.
  • Add a popup that shows construction ahead so that the user is more aware.
  • Add an educational and historic aspect to the landmark information.
  • Add a landscape mode so the user can turn the phone and get a wider view.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store