Project Overview

Synopsis
Biking is one of the most popular modes of transportation for both students and staff at UC Davis, but it comes with plenty of challenges. I tackled this problem during a design challenge hosted by Design Interactive, a UX organization at UC Davis. Working in a team of 4, I strove to create a mobile app that helps bikers navigate the city, connect with the cycling community, and buy and sell bike parts.
Check out the case study below or skip to the solution!
Role
UI/UX Lead, Visual Design, UX Research
Team
4 designers
Tools
Figma, FigJam, Google Forms
Timeline
4 weeks

The Problem

Biking is one of the most popular modes of transportation for both students and staff at UC Davis, but it comes with plenty of challenges.

Bikers have to deal with obstacles like bike thieves, flat tires, and upperclassmen who set up lawn chairs at the bike circles on the first day of school to watch the freshmen crash into each other. While there are a few resources to turn to for help, many bikers still find themselves confused when encountering these situations.
user research

Understanding the Problem

My team put together a survey on Google Forms and distributed it to undergraduate students at UC Davis to hear about their experiences with biking. We wanted to hear from a diverse range of students and discover how biking experiences differed depending on grade level, area of residence, and extracurricular activities. Our questions focused on:
  • Getting to know the user
    We wanted to know more about the type of students who would use an app like this. Where did they live? What were their grade levels? How often did they use their bikes?
  • Biking obstacles
    Davis is considered one of the most bike-friendly cities in California, but cyclists have their fair share of troubles. We wanted to find out how many students had encountered obstacles while biking? Did their bikes break down? Were parts ever stolen? How did they deal with these issues?
  • app preferences
    My team hoped to learn about any specific features that users wanted to see in a biking app for UC Davis students. Was there anything in particular they needed help with? What features would they be most likely to use?
User research

Research Insights

Our survey received 31 responses from both male and female UC Davis students of all grade levels. The survey included both multiple-choice questions and free response questions, allowing users to share their thoughts.

Survey Insights

48%
of respondents reported that their bikes had either broken down or been stolen at some point.
61%
of respondents with stolen or broken bikes were unable to repair the damage or recover their bikes.
71%
of respondents would be likely to make use of an online marketplace for bike parts.

Interview Insights

User 1
"The main issues I face while biking are long distances and theft."
User 2
"I'd like to see an interactive map and a marketplace for used bike parts."
ideation

Affinity Mapping

After doing some research, my team and I put together an affinity map on FigJam in order to narrow down potential solutions. We noticed that our survey respondents consistently reported not knowing how to fix their bikes if something went wrong and a desire for easier bike paths. These insights directed our focus to a community-sourced platform for exchanging information and buying and selling bike parts.
Ideation

Creating a User Flow

Next, we created a task flow on FigJam to map out the ways we wanted users to navigate our app. The app's initial design had 3 main tabs: a profile section, a map section for bike routes, and a social section for everything else. We wanted to make a simple layout that would make it easy for users to find what they were looking for, especially if they were using this while biking.
Iterations

Wireframing

At this point in the design process, my team disbanded, but I still wanted to finish AggieRide. I looked at our findings and began to create simple wireframes on Figma. In my initial designs, I separated the live map from the app's suggested bike routes and the marketplace from the social tab, thinking that this would enable users to find their desired feature faster.
Iterations

Mid-fi Prototype

During the design process, I decided on theme colors (UC Davis blue and gold), revamped the main tabs into 4 categories, and started to flesh out the prototype. The live map became the homepage so bikers could easily check their routes on the go, while the chat feature split from the Social tab for ease of access. The chat feature tends to be in its own distinct place on most apps, and I realized that AggieRide users would probably expect the same from my app.
iterations

Usability Tests and Revisions

Once I had developed my mid-fi prototype, I started user testing. I conducted 6 one-to-one interviews with UC Davis students and walked the participants through several scenarios.

The homepage of AggieRide featured an interactive map and 4 buttons (Favorite Routes, Add a Route, Find Bike Parking, Drop a Pin) for various features, but several users found these buttons to be somewhat redundant and counterintuitive. This feedback led me to truncate these down to 3 buttons (View Recent Routes, Find Bike Parking, Find My Bike). I integrated the user's favorite routes with Recent Routes, using a star icon to differentiate between them on the page. Secondly, I changed Drop a Pin to Find My Bike, with an option to save the user's location upon locating the bike.
In my initial designs, I had used specific shades of blue and gold throughout the app to represent UC Davis' school colors, but some users felt that the color choices made some of the text hard to read. To remedy this, I replaced my original shade of blue with a darker hue and paired it with white font. I also increased the font weight from standard to semibold on both colors of buttons.

The Final Product

After 4 weeks of researching, designing, testing, and refining, my prototype was complete.

The design challenge was over and I now had a fully interactive prototype for my mobile app.
Hi-fi prototype

The Final Design

After another week, the high-fidelity prototype of AggieRide was done! The app has two main functions: an interactive map to help cyclists navigate their way through campus and a community-based platform that allows students to buy and sell bike parts, report bike theft, and connect with each other.

Navigational Help

AggieRide’s home screen features an interactive map that shows bikers different routes and provides them with step-by-step directions to their destinations.

Finding and Parking Your Bike

On the home screen, users also have the option to pair an AirTag attached to their bike with the app in order to find and get directions to their bike. They can also mark spaces in bicycle parking lots as taken or empty in order to help others find parking.

Connecting with Other Cyclists

The Social tab has three functions, the first being a forum for users to connect with each other and give or receive advice on their bikes.

Reporting Theft

Users can use the Report Theft feature to alert other Aggies about missing bikes or bike parts, read community-sourced reports, and browse through the Davis police department's logs.

A Virtual Bike Shop

The Marketplace tab allows students to buy and sell bike parts and used bikes to each other, hassle-free. Bookmark an item to come back to later or message the seller directly!

Navigational Help

AggieRide’s home screen features an interactive map that shows bikers different routes and provides them with step-by-step directions to their destinations.

Finding and Parking Your Bike

On the home screen, users also have the option to pair an AirTag attached to their bike with the app in order to find and get directions to their bike. They can also mark spaces in bicycle parking lots as taken or empty in order to help others find parking.

Connecting with Other Cyclists

The Social tab has three functions, the first being a forum for users to connect with each other and give or receive advice on their bikes.

Reporting Theft

Users can use the Report Theft feature to alert other Aggies about missing bikes or bike parts, read community-sourced reports, and browse through the Davis police department's logs.

A Virtual Bike Shop

The Marketplace tab allows students to buy and sell bike parts and used bikes to each other, hassle-free. Bookmark an item to come back to later or message the seller directly!
Design system

School Colors

Reflection

Closing Thoughts

This project was challenging, but it was also incredibly rewarding. it was meant to be completed in two weeks, but my team quickly fell apart halfway through the sprint due to some members' busy schedules. However, I decided to take two more weeks to finish the project on my own. My primary goal was simply to complete the project, but I also wanted to create something that could actually help the huge biking community on campus. Tackling this project on my own was daunting at first, but I persisted and it paid off. It was my first time building an app prototype entirely on my own, and I gained a lot of experience with using Figma. It was also my first time conducting user testing without a teammate to help gather data, and I quickly learned how to take notes without disrupting the flow of the session.

This design sprint was difficult, but I learned to keep persevering and think introspectively about my design decisions. My user research revealed many concerns that bikers at UC Davis had, and it was tough to decide which of those concerns I should focus on the most. Going forward, I would like to expand on the bike maintenance aspect of the app. As of right now, users can primarily receive and give advice on maintaining and repairing their bikes on the forum, but I'd like to take it a step further and have a dedicated section on bike maintenance tips. I'd also like to partner with local bike shops and feature their services in the app as a way for users to get professional help if needed.
copyright © 2023 Jennifer Tso. All rights reserved.