Cycle Wayfinder: Mobile App

Cycle Wayfinder is an app that aims to find the safest cycling route possible in Toronto.

Image of 4 screens from the app on a smartphone

Problem

For this project, the objective was to identify a design problem found within transportation in Toronto. I chose to explore the pain point cyclists have around safety. Each cyclist has their own level of comfort when it comes to staying safe while riding their bike, so I wanted to create an app that would cater to all.

Goal

The goal was to design a mobile app that all cyclists could use to find a cycling route to their chosen destination that meets all of their chosen safety criteria.

I am a cyclist, and one of the biggest reasons that I like to cycle is the way it ensures that I get exercise into my day. People often comment that although they would love to get around by bike, the lack of safety really holds them back. I feel that safety on the roads is a problem that the City of Toronto hasn’t fully tackled, and so I hope that this app is one way that I can start to think about solutions.

My Process

Because the project requirements were already set out to create an app around an abstract transit problem, I used the 5 Planes of UX Methodology. I started by exploring and building my knowledge of the abstract problem, moving towards a concrete understanding as I worked through each plane, and ultimately built a solution that best serves the user's need.

1: Strategy
Defining user needs and business objectives

In order to understand the habits and measures that Toronto cyclists take to ensure their own safety, I created a survey that I circulated as widely as possible in order to gather quantitative data. I posted on local neighbourhood facebook pages asking for cyclists to participate, and on Twitter using the #BikeTO hashtag to access the city-wide cycling community.

My survey results showed that Toronto cyclists are very safety-conscious, with a strong desire to reduce risks by wearing a helmet and sometimes high-visibility reflective clothing, using lights while riding at night, and choosing routes along quiet side streets and bike lanes first. Many people noted that they generally avoided streets without bike lanes, and that some of the greatest safety hazards while biking are cars parked in bike lanes and a general lack of respect for bike lanes by car drivers. From this information, I built three user personas to help me focus on my users’ needs, experiences, and behaviours.

text describing persona #1: Anthony text describing persona #2: Sarah text describing persona #3: Kev

I also discovered that the only common resource that cyclists in this city use is the printed cycling roadmap published by the city of Toronto. There was not a single website or application that was mentioned in all of the survey responses. Based on these two key findings, I ran a design sprint to understand how we could improve cycling safety on our streets, and what tech resources cyclists might find useful for this goal. I focused my How Might We question on safety and planning:

How Might We Provide Toronto Cyclists With A Way To Quickly And Easilly Find The Safest Route?

2: Scope
Defining functional and content requirements

In order to define the functional and content requirements, I ran a competitive analysis to gain insight into the fitness app landscape. Although the tech resources for cyclists are extremely limited, I was able to look at other popular fitness apps like RunKeeper to understand the types of features and capabilities that other sport apps had incorporated, and what their users found useful. Being able to save and share a successful route added a level of community and functionality beyond just searching and choosing a route.

I also found that colour scheme and typography choices were overall very simple and neutral. I wanted to use that thinking to appeal to the widest audience, as my survey had identified that the cycling community covered all age ranges, genders, and fitness levels.

This competitive analysis provided insight into the commonalities between the various fitness apps, what features my users might be used to using, and want they might want to see in my app.

3: Structure
Interaction design and information architecture

Mapping out a simple initial user journey helped to identify the key stages of the search process, and drill down to the most important concepts within my “How Might We” question. I discovered which pieces of the user journey were vital for the app to be able to deliver what the user needed; to successfully input their search criteria and receive a route that met their needs, I needed to focus the most energy on crafting a search and results page that was as seamless and intuitive as possible.

User Journey Map

From there, I considered which features would be appropriate, and created a new user journey to ensure a successful outcome.

Features to be included in the app:

  1. a search engine allowing the user to find a route based on what types of bike lanes they are comfortable using, what types of terrain they might want to avoid (such as hills), and if they have time constraints;
  2. the ability to select the best route out of multiple results that meets their needs most accurately;
  3. a map with audible directions to help them follow the selected route as they are cycling;
  4. a “Saved Routes” feature so that the user can save and share their favourite routes.
4: Skeleton
Defining the visual form

From here, I moved into sketches of what these key screens might look like and how they would be structured. Before starting on low fidelity wireframes, I first used the crazy-8 technique to come up with as many different layout options as possible.

After fine-tuning the designs for the three key screens identified in the user journey, I moved into Sketch and Illustrator to create wireframes and eventually the prototype. I went through several iterations at this stage after multiple rounds of user testing. I discovered that the icons that I had created to replace text and save space onscreen were not as intuitive or explanatory as I had hoped. Users were not able to decipher what the icons in each section were referring to, and therefore not able to complete the search. I tweaked the icons slightly so they were simpler and easier to identify, and found that I was able to label the icons for each section only on the search page. The user could then identify and understand what these icons meant in subsequent screens without needing text anymore.

5: Surface
Defining the visual style

To ensure that the search page was simple and easy to use and understand, I was keen to integrate UI design from existing design models such as Google Material Design to incorporate actions that users are already so used to.

I chose a neutral colour palette and a sans serif font for easy viewing onscreen.

I conducted another round of user testing with my prototype and made some important discoveries about the placement of buttons, and what their expectations were compared to how the prototype behaved. Using Sketch to build the second prototype, I started to apply Google Master Design guidelines to the overall navigation, icons, and colour scheme of the app.

Version 1 of Cycle Wayfinder prototype
Prototype 1
Version 2 of Cycle Wayfinder prototype
Prototype 2

I made changes to the buttons and the flow between features, particularly when they move from the map into Saved Routes. One user noted that the way it flowed previously, they were forced to save the route regardless of whether or not they wanted to. I adjusted this so that once the route is complete, the cyclist can either save the route, or abandon that route completely and search for something new.

And finally, I used Google Material Design for the third high-fidelity prototype to develop an intuitive and polished UI.

Version 3 of Cycle Wayfinder prototype

Solution

Cycle Wayfinder!

An app that allows you to quickly find the safest cycling route to your destination according to your own safety needs. If you want to find a route that is completely off-road, choose that from the bike-lane options on the search page and only off-road bike routes will show up. Like your favourite fitness apps, you can save your favourite routes, make notes, and share them with your Wayfinder community.

Future Considerations

The question around why there is a lack of cycling apps on the market was a piece that I also included during the final round of user testing, and discovered that one of the reasons was the clumsiness and likelihood of becoming distracted if a cyclist were to use their phone while cycling. I incorporated the audio feature into the map so that directions could be heard while the cyclist is enroute, however this doesn’t solve the problem of having a phone out while riding and possibly damaging the phone or becoming distracted.

Searching on a smartphone is still the easiest way to find and choose a route, but perhaps building a version of the app for an Apple Watch might be more useful for a cyclist. It could also be built so that the user can send that route to the watch would ultimately provide cyclists with a safer, more integrated way of using the app on the go. This would also incorporate nicely with the Apple Watch’s ability to track heart rate and breathing and provide an additional feature.

The next step would be to research how I could build a smartphone app that is able to communicate with an Apple watch, and apply the 5 Plans of UX Methodology to develop a secondary app!