I aim to shape products, interfaces and services that mediate meaningful dialogues between people, systems and their environments within everyday life.

Bike with Me

User Research, Interaction Design, Mobile Design
Personal Project

I love to bike, explore, and discover new and interesting places in the city. Biking in the city can be a daunting and intimidating experience, but biking can also be a practical, comfortable, leisurely, and eco-friendly way of getting around. People have different reasons for biking, whether it is for commuting, keeping in shape, preventing pollution, participating in a social activity, exploring urban landscapes, or simply for the pleasure of going cycling. Although there are many cyclists in Toronto, despite limited biking infrastructure and bike paths, there still could be more people willing to brave the streets on their bikes if they had tools offering more information/confidence/encouragement/fun for their biking trip. I undertook this personal project to explore the activity of biking in order to find solutions for helping urban cyclists safely navigate and explore their city.

The idea for Bike with Me is to use knowledge from passionate cyclists and urban enthusiasts who know the city well in order to help and encourage cyclists to discover their city by bike. With information from other cyclists who know the fastest, bike-friendly routes from point A to B, Bike with Me can provide helpful recommendations for the safest or most efficient routes, allowing even everyday cyclists to discover new routes. In addition to wayfinding, Bike with Me recommends local bike events and offers city tours, enabling both local cyclists and tourists alike to discover and learn about interesting places in the city.

User Research

I went out into the wild to observe and interview other city cyclists to uncover problems related to the urban biking experience. I followed one participant, Tracy, who had encountered problems with the Bixi bike sharing system before she had even started her ride. She needed to print a passcode from the kiosk to unlock a bike, however, the machine ran out of paper and cut off just before the passcode was printed, which resulted in a call customer support for assistance. During my observations with Stephanie, she encountered road construction that obstructed the streets she was biking along, making it hazardous. Because of restricted lanes, her bike slipped into a streetcar track and Stephanie had a minor spill. Had she known about the construction, she would have taken another route to her destination.

Interviews with a few other participants who had also used Bixi bike shares complained of similar problem touchpoints: unreadable kiosk screens, unnecessarily long screen flows to simply rent a bike, misleading information signage, poor affordance for the touch keypad to unlock a bike, poor maps for locating bike stations and no real-time information about bike availability or docking vacancies.

In terms of wayfinding, most of the participants use a mobile app or Google Maps to map out an unfamiliar cycling route to determine the safest and most efficient ride from point A to B. A couple of them have gained more confidence in biking and exploring independently in the city with the use of a mobile app to direct them to safe bike routes. Only one participant did not like to rely on Google Maps to figure out her bike routes, but instead refers to a San Francisco bike map containing elevation data to avoid steep hill climbs. Generally, while riding along unfamiliar routes they experience a pattern of “go, stop, go,” usually to look up directions when they get disoriented or become unsure of where to go next.

Design & Rapid Prototyping

I decided to focus my solution on two main aspects: provide wayfinding tools allowing cyclists to route the safest bike route from their starting point to their destination and encourage urban and neighbourhood exploration through biking tours that guide visitors through different points of interest using the most bike-friendly paths. This would be in the form of a mobile app that cyclists can use on the go, ideally with a mount for the device to attach to the bicycle.

I sketched out some rough ideas for the interface and interactions required. I tried a rapid prototyping methodology over the span of a couple of weeks in which I developed a basic mobile app skeleton in jQuery to evaluate information displays and interactions. After conducting my own heuristic evaluation, I re-designed a few aspects of the tour section of the app in the form of a paper prototype. Design improvements included: separating tour details into 3 different views (Details, Places and Map views) rather than listed all on a single screen, showcasing a banner image for a place/landmark stop on the tour that can be swiped through to view more images, provide a more dynamic journey through a tour rather than simple stepping along each tour stop, and displaying a live map view to locate a user’s current location and visualize the bike route to take to get to a selected POI instead of simply getting directions to go to the next stop.

I created an evaluation plan and a questionnaire to test both my interactive prototype and paper prototype designs on users. Conducting the user testing and having the participants be able to compare two different design solutions provided some new insights for me to help me iterate and refine my designs further.

I did not have the chance to test the application in the wild (e.g. following a biker around while they physically followed an entire bike tour around the city). This would have been interesting to observe to see what breakdowns occur if users are holding the device, have it in their bag, etc. I did test on users who are urban cyclists and they provided me valuable feedback on what they would want and expect in an app from a cyclist’s perspective when they are out and about. Overall, the users preferred the alternate design illustrated in the paper prototype, which is the direction I will be moving towards in the implementation process.

  • mind_map
  • sketches