User Research

UX Design

Usability Testing

Interface Design

Visual Design

Context

Duration

March - May 2021 (3 months)

Tools

Figma

Adobe illustrator

Adobe photoshop

Adobe indesign

PROBLEM

Cyclists are forced to switch between different navigation apps in order to gain an adequate amount of information when planning their trips. Because the most well-used navigational apps, such as Google Map are designed primarily for automobiles. As a result of this repetitive process, some are stressed about cycling and eventually quit. In addition, some suffer from injuries because of poorly planned routes.

BACKGROUNDS

To commute or explore the city, cyclists are often frustrated by the vast gap between real-world experience of cycling on the road and what they expected when Google Maps planned their routes. As Unclimbable Slopes, Missing Bike Lanes, Prolonged Journeys, and Wrong/Dangerous Routes are issues frequently brought up by participants.

How might we design a mobile experience that informs cyclists with adequate information during the trip planning stage to minimize the gap between pre-planning virtually versus actually riding on the road and thus encourage cyclists to ride confidently?

CHALLENGE

As cyclists are fully exposed to the environment, the level of protection offered and sensory input from surrounding environment (environmental sounds, wind, humidity, temperature) differ drastically from vehicle drivers protected within a mental frame.

• Bike types drastically influence the cycling experience 

• Weather is essential for a pleasant journey which is overlooked by the majority of navigation apps

• Maps are not best at keeping up with temporary road closures or roadside building renovation/construction

• Bike maintenance is essential for a safe trip

• Cycling routes consisting of various lane types can either result in a pleasant trip or bicycle-related injuries and sometimes death.

Intuitive Planning

Stay informed while planning, then Ride stress-free with essential information such as weather, amplitude change, estimated duration, etc.

Customize your cycling experience

For recreational tours or commune to work, choose routes based on your needs with the route planner option and add additional stops to customize your experience.

Inform others

Keeping track of road construction every time you cycle is challenging.

Report something that might obscure the cycling experience whenever you see one.

Plan ahead and Go discover

Personalized routes and hot spots with amplitude, distance, bike types, and difficulty levels help users decide where they want to go next.

Track and record

Intuitive analytics charts detailing every ride you made and a separate bike maintenance history for reference when visiting your bike mechanics for checkups or updates. Ride safely!

RESEARCH OVERVIEW

In the research stage, the goal was to understand frustrations encountered by cyclists before, during, and after the cycling experience and later identify the causes of the frustrations through questionnaires, secondary research, and semi-structured interview. 

USER RESEARCH

surveys and interviews

To gain a deeper understanding of obstacles cyclists face, I did one-to-one interviews and questionnaires with 6+ users with an average of 8 years+ of cycling experience to better understand the problems they encountered during cycling.

ALIGN USER INTERVIEW INSIGHTS WITH FUNCTIONS

INFORMATION ARCHITECTURE

KEY FINDINGS

The key takeaway from the research stage is that cyclists often feel stressed and anxious when cycling on new routes. Opposite to driving, that is way less stressful. Interviewees often summarized it as hopping in and opening google Maps since a significant part of them are drivers also. 

The primary anxiety for cyclists comes from a lack of mental map/model of the route planned by google map. Since google map oftentimes leads them to main roads and busy roads that are literal death traps for cyclists. The lack of bike center routes option, inadequate information on planned routes, and lack of customization of planned routes are the top reasons that cyclists feel anxious when venturing out.

TESTING & ITERATION

In this stage, I did two rounds of user testing with both experienced and novice cyclists to ensure the design made sense to users.

01 Provide additional information about the trip

Throughout the testing phase, both experienced & novice cyclists complain that they have to click through the card to gain basic information such as distance, amplitude change, and bike type to understand the route more. A repetitive process since they need to constantly click back and forth to determine a route that fit their needs.

In 2nd round of testing, users preferred additional information provided below. One experienced cyclist specifically mentioned that it would be better if the difficulty level was provided so that he could have a better understanding of the upcoming journey.

Adding related information (distance, amplitude, recommended bike type) under each card on the discover page to help users select routes they want to explore.

02 Switch hierarchy for activity and maintenance log (my bike)

Activity is a major function, while bike maintenance log is under profile as active cyclists cycle daily and want to track their stats.

In the 1st draft, the bike maintenance log takes an individual page, as I intended to emphasize maintenance, which is often overlooked. 

However, interviewees mentioned during testing that bike maintenance generally happens monthly or quarterly. However, active cyclists cycle daily and want to track their stats. Therefore, I put the maintenance log under the profile page and redesigned an entire page for activity with various charts to offer detailed information. 

Further, as suggested by one of the interviewees, the name for the maintenance log changed from my gear to my bike to provide a sense of familiarity and make it less intimidating for novice cyclists.

FINAL DESIGN

I started this project because I often face difficulties when cycling and am also a product designer. I gained more insights about cycling by researching, designing, and talking to my fellow cyclists. The fear of being hit by a vehicle is a constant theme that my interviewees and myself brought up. Additionally, the road is noisy for commute cyclists, and they have to be extra vigilant as they ride during rush hours on busy roads. How can I make navigation more accessible for cyclists is an issue that I think of often. Because plug both ears with headphones for directions is dangerous as cyclists lack awareness of the road situation nearby, whereas plugging a single headphone makes the voiceover almost inaudible. Font size also plays an important role. During the navigation, bigger fonts make it more legible, but it also reduces the information density for phones with smaller screen sizes, Take an iPhone 8 plus, for example. How we can make responsive typography for a constantly moving display is a topic that I am interested in and will work on.

Solo portfolio project