Van Bike is a route-planning app that helps novice bikers plan a safe route in Vancouver. It allows users to select their desired route based on their experience level and road type preferences. This project aims to create a comfortable biking experience, encouraging people in the city to bike more to meet the city's goal of sustainability.
This was originally an Android App development project with my teammate Keith Leung, but the scope was small due to our technical limitations. I decided to redesign the app to create an integrated user experience.
The city strives to make transportation more sustainable. The plan includes creating a safe biking experience for the citizens because many people are unwilling to bike due to safety concerns like complex road conditions and heavy traffic.
To begin with, I discussed with CityStudio staff to understand their objectives and challenges. From this conversation, I learned one big reason that stops citizens from biking is their lack of experience and guidance. I decided to narrow the scope down to helping novice bikers since the stakeholders believe these amateur bikers will benefit the most from the guidance of route planning.
As the city says: “We want to prove it’s easier than you think to get to your friend's house by bike.”
To understand why the city needs a dedicated cycling app, I analyzed 3 popular route planning apps for cyclists. As a result, current route-planning apps don’t provide the route that is tailored for different experience levels. Most apps have no detailed information like the road types, which creates uncertainty when following a route.
Then, I interviewed 3 novice bikers. Since finding participants who matched the demographics was difficult in this process, I did more secondary research by reading articles and blogs from online cycling communities (like Vancouver HUB) to reduce the bias caused by this small sample group.
The key takeaways from the research include:
1. The lack of separation from cars and dangerous road conditions (like unpaved roads and hills) are the most important factors that make bikers feel unsafe.
2. Existing apps don’t provide localized data. For example, Google Maps might lead them to an unpaved road.
As an inexperienced biker, Robin needs to plan a reliable route so he can travel from point A to B safely.
1. How Might We inform the users of the details like road types and potential dangers on the route.
2. How Might We allow the users to avoid specific roads based on their comfort level for each road type.
I started with wireframes that focused on informing users of the road types and general route information. Also, I ideated the interaction of selecting a preferred route and the map navigation.
After searching for the destination, the user can click the “Direct” button to generate the suggested route. Since road type impacts bikers’ experience significantly, the route displays a summary of the included road types, distance, and duration.
By studying CityStudio's documents, I learned there are 6 categories of road types. Some road types are safe (protected bike lanes), while some are relatively dangerous (shared lanes) for bikers. I displayed the road types included in each route to inform the bikers, so they can select the route based on their comfort level.
To ensure the hazard alarm is current and accurate, the report function allows the bikers to update the hazards they witnessed on the road. After an internal review of the city, other app users can use this information to avoid potential danger.
The interface will display hazard reports on the road of the selected route. Once checked the hazard report, the user can generate new routes by detouring the dangerous location, ensuring the route is safe.
During the usability testing with severa users, they all reported the issues with this feature. For example, they questioned what if there are multiple hazards on this route, does the user need to detour individually for each one?
The testing result indicates the edge case that I neglected when designing the interaction. With the feedback, I redesigned the interaction flow to address these problems.
Also, some participants mentioned that the road types’ color-coding with different shades of blue is not memorable. To reduce the user's cognitive load, I simplified the road types’ color-coding: blue for regular road types (shared lanes/unpaved roads) and yellow for the dangerous ones.
In the iterations, the insights gathered from the testing spot many flaws of the app usability. For example, when integrating the detour function, the feedback allows me to refine the interface to make it understandable. Also, I practiced looking at the design from the user’s perspective, so I could trim off complex interactions to make the interaction flow intuitive. Overall, I believe the design answers the project requirement and provides a feasible solution for safe biking.
One mistake I made was not paying attention to accessibility. In an outdoor environment, the low color contrast (yellow in white) makes it difficult to view the text under bright sunlight.
For future improvement, I believe it will be helpful to do a field study to understand how bikers react to different challenges on the road. One thing I could do is to integrate audio support and voice recognition to give users more ways to access the route information while biking on the road.
