Bikeways
Design Sprints
Jobs to be Done Approach
Product Design
User Testing
Brand Identity
Overview
Hamilton offers unique challenges to cyclists. The Niagara Escarpment divides the city in two, creating a 100 metre vertical that needs to be safely navigated via a limited number of roads, stairs, and paths. Beyond the challenge of the escarpment, the lower city is a high density urban mix of residential, commercial, and industrial neighbourhoods. The upper city is primarily suburban residential and commercial, with wide 4 lane artery’s that allow vehicle traffic to easily hit 70 km’s per hour.
This was the initial focus for the development of Bikeways, How might we help cyclists travel safely and efficiently through cities?
With design thinking and research methods I sought to better understand the travel needs of cyclists outside my own experiences. The result is an app designed to take advantage of the versatility of bicycles to travel where vehicles can’t, and at speeds that outpace pedestrians.
Research Phase
During the research phase, I sought to understand how other cyclists plan their routes when interacting with the cycling infrastructure of their city. This was accomplished via user interviews and reviewing competitors in the space.
Identifying user needs
Primary Research – User Interviews
To better understand other cyclist’s behavior, I conducted research via short on-street interviews with cyclists. This process proved quite challenging as I had to both overcoming the trepidation in speaking with strangers, as well as physically locating cyclists moving at a walking pace. It helped me identify pain points and the goals of cyclists when travelling by bicycle, and was useful in focusing the scope of the final project.
Some of the questions asked included:
- Why do they prefer cycling over other methods of travel
- How long is their average ride
- Do they use an app to track their rides
A key trend revealed during user interviews is that cyclists commute via bike for the following three reasons; speed, cost, and health.
Safety wasn’t a primary concern, as most cyclists interviewed felt Toronto’s cycling infrastructure offered them efficient and safe choices for their trips. This was a surprise to me and resulted in a shift in focus, from safe routes to efficient routes.
A surprising discovery was that most of interviewee’s did not use an app to track their regular commutes, instead preferring to track casual rides, if they tracked at all.
Secondary Research – Market Research & Competitor Analysis
The primary focus of the majority of apps on the market are focused primarily on tracking rides and providing prebuilt routes. Leaving Google Maps Cycling directions as the leader in the space.
My analysis produced the following insights:
- Heavy focus on bike paths: Google maps heavily favours marked cycling paths, which can add several extra kilometres of extra travel on trips.
- Risky traffic volumes and speeds: Routes will use single lane roads with minimal/no shoulders requiring cyclists to compete with potential high speed traffic.
- Multi-modal capabilities: A lack of deeper understanding of the multi-modal capabilities of bicycles, leading to trails through parks and bike friendly stairs sometimes being ignored.
Framing the Problem
User Personas
Using the qualitative and quantitative data gathered, I created my target persona, Kenneth. A 35 year old IT Manager who is always looking to automate and optimize his team’s daily routine to allow them to focus on larger projects. He brings this trait into his daily life, looking to optimize and discover efficiencies where he can. Somewhat new to the city, he cycles the 30 minutes to work when the weather permits, as it is faster than transit and simpler than commuting by car. He typically takes the same route, but does like to occasionally check and see if there are improvements to be made.
How Might We & Jobs To Be Done
From the initial planning, cyclist interviews, and secondary research I restructured the insights into Jobs To Be Done statements. These help focus on what our target cyclist is trying to do and why, as opposed to focusing on who they are, or what they do.
An initial JBTD statement of "When I cycle, I want to find the best route so I can arrive safe and sound" evolved as I collected qualitative and quantitative data into "When I ride to work, I want to find the best route so I can arrive on time" and "When I ride for pleasure, I want to track my ride so I can remember where I traveled."
The JBTD statements were then restructured into How Might We questions
- How might we determine which routes are fastest?
- How might we find off-road paths?
- How might we best select from multiple routes?
Journey Mapping
A user journey was developed based on the feedback collected during user interviews in order to highlight cyclists goals, problem areas, and opportunities. The journey map allows us to easily visualize the process which a traveler would undergo, discover potential oversights, and begin understand their goals and barriers they may encounter.
The main user goals included:
- Searching for their destination
- Reviewing possible routes
- Navigating the selected routes
Some of the key challenges I identified are:
- Avoiding heavy traffic
- Determining whether off-road or on-street routes should be selected
- Offering feedback during the ride (ex: construction, inaccessible paths)
Brainstorming & Crazy 8’s
Reviewing the JTBD and HMWs that were developed during the previous stage, I explored short and long term goals (6 months out, 5 years out), along with potential pitfalls to better develop solutions to meet those goals and address potential pitfalls.
I then used Crazy 8’s to further explore possible solutions. As this was my first experience using Crazy 8’s as a brainstorming method, I doubled the time to 2 minutes per idea. After 16 minutes of quick ideation I selected the concepts that felt most effective.
Storyboarding
With a wealth of ideas and possible solutions, I created a storyboard to describe a cyclists experience with Bikeways to explore how the app could be used in the real world. Storyboards offer an effective way to understand how the product will be used in context.
Design & Prototyping
Branding
A style guide provided the base fonts and colours from which to begin to develop my MVP. The colour palette is a mix of cool blues with a single warm orange-red. Careful use of red helps to refine the UI as it brings focus to key UI interactions for the cyclist. The blues provide a calming contrast, intended to offer reassurance that Bikeways will get cyclists to their destinations quickly.
Readability was a key focus given the variety of lighting conditions that can be encountered during a ride, and the high probability that the app would be used while cycling. Work sans was selected due to its wide letters and generous kerning. With a generous base type size of 16px, and the majority of type larger than 20px this helps Bikeways to remain legible during most conditions. Font sizes follow a ratio of 1.333 to create a clear typographic hierarchy and ensure consistency throughout body copy, headers, and mice type.
Iconography is used to provide additional highlighting of interactions and key information. Superfluous imagery is kept to a minimum to ensure the focus remains on the UI and trip details.
Hi-Fidelity Mockups & Prototype
I began to develop high-fidelity mockups based on the brand assets and storyboard, which in this case served as a low fidelity wireframe. Bikeways allows cyclists to discover the best routes to their destination, taking full advantage of the versatility of bicycles.
The initial screen extends the mental model used in Google Maps and Waze, allowing cyclists to quickly understand how to plan their trip.
When searching for a destination the empty state displays Home and Work, with previous searches displayed below. This allows cyclists select those two common destinations, revisit past destinations if they are still unfamiliar with the route, or plan a new route to a previous destination. As cyclists begin typing, these default locations are replaced with auto completed suggestions allowing for quicker completion of the destination field.
Searching for an address in Bikeways
On the first use, cyclists are presented with 3 questions to select routes that best fit their preferences. Routes that match those preferences are displayed, with the original options reiterated below their destination. This allows cyclists to recall what options they selected, as well change their mind without restarting the process.
Setting initial preferences and route overviews
While riding, the next two steps in their route are displayed in a clear hierarchy, allowing cyclists to prepare for turns or dismounts. The distance to the next step in a route can be difficult to gauge if unfamiliar with the area, so the countdown on the navigation arrow provides cyclists with a better visual indicator of how quickly they are approaching the next transition.
Using the countdown indicator while navigating to destination.
Conclusion and Next Steps
Given the limited time, the minimum viable product focuses on the key aspects that differentiate Bikeways from other navigation apps. Next steps would be to expand user research to learn more about how and why cyclists interact with apps, additional testing of the prototype, and further refinement of the interface. Potential features could include crowdsourcing of new routes to take, addition of a wearable version for those who can’t mount their phones to their bicycles. Ideally interactions with the app could be accomplished completely hands-free, allowing cyclists to navigate simply by speaking during a ride.
More Work
Contact Me
I am always open to hearing about new opportunities where I can apply my skills, share my knowledge, and continue to grow in the field.