top of page
Mobile-first responsive website: biking navigation

Safebike

Hero (13).png
Project

Mobile-first responsive website

Duration

5 weeks

Role

UX/UI designer, researcher

Tools

Figma, Material Design 3, Google Workspace

1. Research & Synthesis
2. Roadmapping
3. Testing & Iteration

Competitor analysis

Interviews

Affinity map

Personas

Feature prioritization

User flow

Lo-fi / Mid-fi wireframes

Mid-fi testing

Hi-fi wireframes

Hi-fi testing

Design iterations

UI kit

The problem

How might we help cyclists bike in safer and less congested travel routes? 🚲

Although there are several digital maps that help cyclists navigate from Point A to B, they usually prioritize travel time over safety, exposing cyclists to a higher risk of injury by putting them on roads with mixed traffic. Especially to infrequent cyclists, cycling can feel dangerous due to unknown routes and heavy traffic, so they are deterred from cycling as a form of transportation.

1. Research & Synthesis

First, a competitor analysis was conducted to observe industry standards and uncover opportunity gaps, then I carried out interviews to identify specific pain points with regards to biking as a form of transportation. An affinity map was used to synthesize interview data and draw trends, and finally a persona was created to represent target user groups.

Competitor analysis

None of the map products on the market offer the package deal: labeling of bike lanes + safety-first suggested routes + turn-by-turn navigation

Google Maps
Screenshot 2024-06-18 at 16.42.32.png

Main strength

Powerful turn-by-turn navigation; leader in mapping platforms

Main weakness

Only prioritizes distance, not allowing users to prioritize safety

Chicago Bike Routes
Screenshot 2024-06-18 at 16.46.45.png

Main strength

Detailed labeling of streets from a biking perspective

 

Main weakness

Does not support turn-by-turn navigation; user would have to memorize the route

Mellow Bike Map
Screenshot 2024-06-18 at 16.55.00.png

Main strength

Simple categorizations of streets from a biking perspective

Main weakness

Many inaccurate labeling of bike paths

Interviews

I interviewed 5 people separately via Google Meet, each ~30 minutes.

2 people currently bike as a form of transportation.

Participant 2 (6).png
Participant 4 (5).png

3 people do not currently bike as a form of transportation.

Particiapnt 1.png
Participant 3 (5).png
Participant 5 (3).png

2 have had experiences biking as a transportation and for leisure in the past.

1 has not and does not want to.

Particiapnt 1.png
Participant 3 (5).png

Safety is their biggest concern; they didn't like sharing lanes with traffic.

Participant 2 (6).png
Participant 4 (5).png

Seasoned bikers rely on their memory for navigation. Safety is also a consideration for them when choosing where to bike and how they bike.

Affinity map
Affinity map.png
Willing to bike 2 - chill.png
Willing to bike 1 - fear.png
Biker 1 - explaining.png
Biker 2 - calm_edited.png

Insight #1: When talking about biking safety, 4 out of 5 participants bring up other traffic on the road and bike lane infrastructures.

Insight #2: 3 out of 5 participants deliberately said that they prefer to bike on calmer streets.

It seems clear that people, bikers and non bikers alike, find heavy traffic on the road a pain point, and prefer to bike on calmer streets and in protected bike lanes.

Persona

With data from interview and affinity mapping in mind, I created a persona who represent a user of my product. This persona helped me empathize with users' needs and identify with the audience I am designing for.

Mark.png

2. Roadmapping

With my focus centered on specific user pain points and needs, I prioritized features to decide what exactly will go on the MVP. User flows were built to help me design a seamless experience for users, and some lo-fi wireframes were developed on Figma, which were tested to discover areas of improvement.

Feature set

Knowing that there are practical constraints to the project, I grouped my ideas into Must have's, Nice to have's, Surprising and delightful's, and Can come later's. For the rest of the project, I prioritized the Must have's for the MVP.

Must-have
  • Turn-by-turn navigation: Providing visual instructions on a chosen route could help cyclists reach their destination with minimal navigation mistakes.

  • Map for route-showing and navigation: Vectorized digital map to help users seamlessly zoom in and out, and to provide holistic view of their routes as well as turn-by-turn navigation.

  • Direction search bars: Users can input the locations of their journey and get suggested bike routes.

  • Suggested bike routes: Bike routes that prioritize safety, suggesting the safest type of bike lanes (i.e., neighborhood pathways and protected bike lanes) for users' journey.

  • Estimated time of traveling: An estimated time of traveling that shows users how long they will spend on the road.

  • Estimated time of arrival: An ETA that shows users their arrival time at their destination.

  • Bike lane / path labels: Labels that explain different types of bike lanes and paths. 

Nice to have
  • Audio direction during turn-by-turn navigation: Providing audio instructions along with visual instruction during navigation.

  • Auto completion for direction search: Users can make typos or type in the name of the location (instead of the actual address), and the direction search bar can auto complete the correct info.

  • Route customization: Users can choose to bike only in certain types of bike lanes, and the map plans routes accordingly.

  • Favorites: Saving certain locations or routes for quick find and navigation.

  • Live traffic information: Providing more safety information on suggested routes.

Surprising and delightful
  • Bus and train stations: The location of bus and train stations in the city are labeled on the map to support multi-modal transportation.

  • Bike parking racks: Showing parking locations can further support users traveling by bike.

  • Avoid zones: Users can tell the map to avoid certain locations while planning their route.

  • Multi-destination routes: Users can add several destinations during their journey, instead of just being navigated from Point A to B.

Can come later
  • Fast bike routes: Bike routes that prioritize efficiency / short distance.

  • Immersive view: This feature shows users a 3D view of their entire route to help with building expectations for the journey.

  • Multilingual UI: To serve the diverse populations, having the interface and audio direction in different languages can expand user base.

User flow - user inputs destination and follows navigation

After receiving feedback from my mentor to include additional features to set up a user profile, I created a user flow to see how every step fit together and make sure the they flowed seamlessly, considering unhappy paths and decision points.