RoadRunner

UX/UI Design
The Brief
Create a basic app in one week
Role
Research
UX/UI Design
User Interviews & Testing
Prototyping
Tools
Figma
Adobe Illustrator
Duration
1 week
Project Overview
RoadRunner is an app designed to make the urban running experience more enjoyable by helping users find their ideal routes. I challenged myself to a design sprint and gave myself a limit of one week to complete a basic prototype.

The Problem

"How might we make outdoor running more enjoyable for urban runners?"

The Solution

RoadRunner is a route finder and activity tracker for urban runners. The app aims to help urban runners find better routes by allowing them to find routes based on training criteria (like distance and elevation), and environmental criteria (like terrain or surface, geographic features, construction and traffic).

Exploring the Problem

I began by brainstorming factors that impact a runner's experience during their run in an urban environment. I conducted quick survey of 5 friends who also run to gather a wider range of user data.
Competitive analysis
Next I explored route finding apps that already existed on the market. All apps had both web and mobile versions and allowed users to browse community shared routes. Strava was the only app that generated routes for users but they don't have criteria for urban factors such as traffic and construction. No apps targeted urban runners.

Proto Personas

Time constraints inhibited collecting the data needed for full personas so I used the data I was able to collect to create proto personas. These proto personas could also be as a starting point for future user testing.
New Girl Nelly
"Running in the city feels so hectic. I wish I could explore my neighborhood without worrying about where I'm going"
Nelly just moved downtown and is nervous about starting to run in the city. She doesn’t know her way around the city but doesn’t want to disrupt her running schedule trying to find a good route. She feels overwhelmed by the traffic and it seems like there’s construction on every corner.
Goals
  • Find some easy routes that are not busy with traffic and avoid construction
  • Get to know her neighborhood a bit better
Personality
  • Optimistic
  • Health Conscious
  • Easy going
Pain Points
  • Overwhelmed by traffic and construction
  • She isn’t full oriented in her neighborhood yet, worries she might get lost
Level Up Larry
"I'm improving quickly but finding new routes to keep up with my training is a pain"
Larry is training for a half-marathon. He’s familiar with the city and a regular runner but since he started training for the race his training criteria has changed and his usual routes are no longer suitable. He doesn’t mind traffic and noise but is looking for longer routes and elevation gains to challenge himself.
Goals
  • Find new routes that he can use and repeat during training
  • Find new routes that match his progress week-to-week
Personality
  • Determined
  • Focused
  • Tenacious
  • Goal-oriented
Pain Points
  • Overwhelmed by traffic and construction
  • She isn’t full oriented in her neighborhood yet, worries she might get lost

Requirements

Next, I created a list of requirements, including the priority of functions using MoSCoW analysis, in order to determine the MVP. Time constraints only allowed for the most essential functions so this step was crucial.
MVP Features
Find Route
Search for routes based on criteria such as distance, elevation, traffic, construction, terrain
Run Tracker
Track and record data such as time, distance, and pace
Audio Directions
Follow audio prompts for directions on runs

Site Map

Based on the requirements, I planned out site maps and user flows. These went through multiple iterations as I made improvements through the process.

Low- and Mid-Fidelity Wireframes

I began by creating low-fidelity wireframes on paper then moved to mid-fidelity in Figma. Screens were based on the screen map I laid out earlier.

Key Features

Search for routes
Users can search for routes with criteria specifically made for urban running, such as avoiding traffic and choosing between paved and unpaved roads.
Save Routes
Users can save their favourite routes for easy access anytime. The app also displays route details such as elevation and records run activity.
Track Your Runs
Users can track time, distance and pace during their runs. The app also gives audio directions for easy navigation.
map overlays
Users are able to see detailed breakdowns of traffic or surface type on their running routes.

Live Prototype

Visual Design and Style Guide

The goal of the app was to help users have more enjoyable runs in the city and I wanted to create a visual style that facilitated that goal. I chose a bright, upbeat orange as the primary color and a versatile yet friendly sans serif.

The logo is an illustration of a road runner bird running. It's pose is energetic but relaxed and it rounded corners and curves make the logo feel approachable. The wordmark is adapted from Montserrat.

Research Plan

Research goals
Research methods
For this study, I would like to conduct a 30 minute usability test to evaluate our user’s experience of the app. Users will be given a series of tasks to complete in a moderated environment. A secondary method will be to conduct one-on-one user interviews to better understand our user's needs and pain points both in the context of the app and their overall route finding and urban running experiences.
Target users

Reflection

Overall this was a great learning experience the limited time forced me to be extremely vigilant with my personal time management and project management skills. On the other hand, there were several features that I felt I had to compromise on. It was a good lesson in prioritization. Here are some of my major takeaways.
Project Reflections
LinkedinInstagram