Swift

An app that provides cyclists with personalized route planning, advanced features while riding, and a way to track and exceed goals.

Timeline
1 month
Role
UX Research, UX Design, UI Design
Tools
Figma, Miro
img

The Problem

Despite the increasing popularity of cycling as a mode of transportation and a recreational activity, cyclists often face challenges related to safety, efficient route planning, and a lack of comprehensive tools that cater to various cycling preferences, skill levels, and goals.

The Solution

Swift provides cyclists with personalized route planning, advanced features while riding, and a way to track and exceed goals.

Research Plan

Research Goals
- Create personas that focus on user needs and wants.
- Identify the most challenging part of cycling and aim to solve or make those issues less painful.
- Understand typical usage patterns of daily users.
- Identify any usability issues with the proposed interface solution.
- Learn about features that would be the most helpful.

Assumptions
- Users aren't happy with current cycling mobile apps.
- Sometimes cyclists are in unknown areas.
- Internet could be an issue for mobile app functionality.
- Safety is a concern.
- The user base has a range of skill level, therefore needing a variety of integrated features.
- Long rides could drain phone battery.

Methodologies 
- Market Research/Competitive Analysis
- User Surveys
- Affinity Mapping

Participants
- Individuals who cycle at least 10 miles a week

Competitive Analysis

Starting off the research plan, I downloaded and examined four existing cycling apps. Bikemap, Strava, Komoot, and Mapmyride. I mainly was looking for opportunities and pain points to improve upon. I listed out some of the features that stood out to me that I wanted to keep in mind for planning this app.

img

Provisional Personas

To get a better idea of who I’m designing for, I created provisional personas based on assumptions. These personas represent the ideal target audience. These personas will be refined and updated as the research process continues and data becomes available.

img

Survey Questions

Screening
1. How frequently do you cycle?
2. What type of cycling do you primarily do?

Main Questions
1. Do you typically cycle alone or with others?
2. What are your goals when cycling?
3. What is the most challenging part of cycling?
4. When you cycle, is there an app that you use to aid your ride? If Yes, which app do you use and how helpful is it?
5. Is there anything you wish was different or better about the current app you use?
6. Do you have any comments or additional information you'd like to share?

Affinity Mapping

After gathering responses from the survey, I created digital sticky notes using one color for each participant. I then began grouping the pieces of data together and noticing clusters. The clusters were labeled based off of the similarities they had. This exercise ultimately led me to recognize themes and the common occurances.

img
img

Empathy Map

I created an empathy map to gain a deeper understanding of users’ thoughts, feelings, and experiences. The empathy map keeps me accountable to creating a user-centered design

img

Research Findings

Findings
- Most cyclists bike alone and on roads.
- Motivators are to have a good time and improve on metrics.
- The biggest concern is safety.
- The largest challenge is hills.
- Some less important factors are weather, time, mental/physical health.

Research Backed Personas

Research backed personas were developed based on the survey results and understandings of the findings. The goal of these personas is to create accurate representations of the target audience, ensuring that design decisions are based by actual user needs and behaviors.

img

Product Roadmap

img

User Flows

Visualizing the steps a user takes to complete a task helps me identify any potential pain points or areas that may need extra attention. I created two flows: Onboarding and Completing a Ride. This exercise overall makes the design more user-centric.

Onboarding

img

Completing a ride

img

Information Architecture

I organized the application’s structure to ensure that all features are easy for user’s to find, understand, and interact with. This architecture map also helped me ensure the navigation of the app was efficient.

img

Interface Inspiration

To spark creativity and to explore innovative design ideas, I collected screenshots from Dribbble and Mobbin that stood out to me in terms of the interface.

img

Style Guide

To ensure a cohesive and consistent design, I created guidelines for typography, spacing, colors, and common components.

img

Sketches

Before diving into wireframes, I started with some sketches with pen and paper. This allowed me to easily change up ideas as I went.

img

Wireframes

Focusing on the fundamental structure and functionality, I created the layouts of the wireframes.

img

High Fidelity - Home

The home screen contains four key elements: the daily activity tracker, filters, stats, and recent rides. This screen serves as a sort of dashboard for the user to check daily.

img

High Fidelity - Curate a Ride

A main feature of this app is to allow the user to curate their rides. Below, the left screen consists of filters: mileage, cycle type, and safety features. Once the filters are selected, Swift will suggest rides based off the criteria.

img

High Fidelity - Active Ride

Another main feature of this app is seen when the ride is active. Instead of just tracking time, distance, and speed; there are integrations that allow the user to check on factors such as weather, nearby bike parking, bike shops, or metrics such as heart rate. Since safety is a key consideration of this app, the user can access these integrations by using voice control.

img

High Fidelity - Ride History & Details

Ride history shows recent rides that can be filtered by Today, This Week, and This Month. When an individual ride is clicked into, the user will be taken to a detailed page that outlines their ride.

img