Overview.
Google Maps has features that help users to commute more efficiently, whether by car, public transit, bike or just walking, to discover local restaurants, shopping, services, attractions, and much more. This project focused on the navigation aspect of the app and in ways to improve user’s experience while using the app to get directions for bicycling.  
The Challenge.
To add a feature to a widely used and mature app such as Google Maps is a challenge by itself. The main goal was to create a feature that would improve user's experience when getting bicycling directions, using the existing design system and without changing the app's core essence.
VIEW PROTOTYPE
Research Phase.

Competitive Analysis

I started my research with a competitive analysis of similar bicycle navigation apps:

  • Maps (Apple)
  • City Mapper
  • Moovit
  • Transit (Canada)

Key Findings

  • Google Maps is the app that offers the highest number of bicycle navigation features.
  • Moovit and Transit have limited bicycle navigation features. But they are efficient in providing public transit information.
  • Maps is the only app that provides information regarding the type of path in bicycle suggested routes and the option to avoid hills or busy roads.

1:1 User Interview

Following the competitive analysis, I interviewed two users to discover more about their needs, expectations and frustrations while using Google Maps for getting bicycle directions. With the interview findings I was able to define a persona, and also a journey map to identify in which phase of the experience using the app were the pain points and opportunities.

Problem vs Solution.

Framing the Problem

The user interviews and the journey map were key to identifying in which phase of the experience users got more frustrated and why. The findings showed that the struggles started to appear once the users got the suggested route(s).

Main common pain points were:

  • Not knowing which parts of the route had bike lanes or how bike friendly they were.
  • Not being able to know if the route was too busy with cars or in which type of surface and roads they would be riding in.
  • Having doubts about the reliability of the suggested route regarding safety and precision.
"Biking is a way of transport to me, so while using the app I just want to get reliable directions to go from point A to B safely. It is so frustrating that I can't see if there are bike lanes or dock stations on the route."

Brainstorming Solutions

With the main common pain points identified, I used a How Might We framework to brainstorm a few solutions, keeping in mind two main focuses:

  • To increase the level of trust on suggested bicycle routes.
  • To provide users with the ability to choose the best bicycle route for them according to their needs.
User Flows.
‍After brainstorming solutions, I decided to focus on three new features:
  • Adding more route options filters and a highlighted indication of bike lanes along the route;
  • Adding types of surface and road information on the steps-by-step screen;
  • Adding a feature to combine bicycle directions with public transit for farther routes.

I used Whimsical and print screens of the current app to design the user flows and identify where the new screens should be added.

Point A to point B selecting bike lanes as priority

Sketching Solutions.
‍‍After defining the screens I needed to add or change in the existing flow to add both bike lane priority routes and bike + transit feature, I started to sketch solutions using pen and paper. All options followed existing patterns and UI elements of the Google Maps app for iOS.

Adding bike lane priority and route options filters

Annotations

  • Sketch 1: Route filters with horizontal scrolling on top + Route suggestion labels on map
  • Sketch 2: Suggested routes displayed in a list format with toggles to apply filters.
  • Sketch 3: filters + type of bicycle selection at the bottom.
  • Sketch 4: filters + type of bicycle selection at the top.
  • Sketch 5: suggested routes displayed on map and in a list format (swipe up) / filters + type of bicycle selection at the top.
  • Sketch 6: same as sketch 5, but with filters on top and type of bicycle selection at the bottom.

Adding road classification to steps screen

Wireframes.
‍After sketching a few solutions I started wireframing the ideas I thought would be more likely to be easily integrated in the current flow and design system. For that I used print screens and added a few elements to the screens.
View all wireframes

Bike + Transit feature

For the bicycle + public transit feature, I chose to follow the pattern used in the public transit tab, displaying all route options available in a list format.

Hi-Fidelity Screens.

For each element I added to the hi-fidelity screens I followed the existing design system and patterns:

  • I used material design to define the colours for the highlighted bike lane route, as well as the road classification on the steps-by-step;
  • The icons used for the bike + transit feature were also from Google Maps existing iconography;
  • For the bike + transit route options screen, I combined elements from the public transit navigation tab and the bike share tab.

View Figma file.

Testing the Prototype.

Method: unmonitored test using Maze, followed by a quick chat with a few testers. 12 valid answers.

Goals

Since Google Maps is a widely used app, my main goal was to:

  • Check if testers would immediately notice the highlighted bike lane route on map
  • Test the bike + transit route flow.

Key Findings

  • 73% of testers noticed the highlighted bike lane route
  • 50% of testers failed to select the bike lane filter on first attempt, which a later found out by talking to a few of them that they were expecting the app to prioritize bike lanes
  • Only 30% of testers noticed the type of surface and road info on the steps screen.
  • 80% of testers completed the second task with no misclicks..
  • Two testers found the amount of information on the bike + transit steps screen a bit too much.

"It took me a while to realize that there was a specific icon [filter] for the bike lanes, but as soon as I saw it highlighted, the next steps became very easy."

Ideating solutions

I used a How Might We framework to brainstorm a few solutions to the problems encountered in the usability testing.

Iterations.

Based on the usability testing results I did three main iterations on the prototype:

Bike lanes by default

The tests results showed at least 50% of users expected to see suggested bike routes prioritizing bike lanes by default, so I changed the default display from fastest to bike lanes and hid the filters under options, following the current app's filtering pattern.

Bike + transit steps screen

As two testers found the amount of information on the bike + transit steps screen overwhelming, I hid the bicycle directions details under a dropdown menu, following the app pattern for displaying additional public transit details.

Road Classification

Most testers didn't notice the road classification on the steps screen. In this round of iteration I also changed the colours for each type of road. For the wording, I used the bike lanes classification system used in Canada.

Key Takeaways.

Learnings

  • By adding a feature to an existing product I've learned how to design with constraints and within an existing design system.
  • The importance of keeping consistency throughout the design and minimizing user's effort.

Next Steps

  • Test prototype again after iterations.
  • A/B testing would be interesting to test better filtering options, and steps screen visuals.
More Projects.
Tennis Circle
Ortaliza
Kaus Insurance

Get in touch.

Powered by Webflow
LinkedInDribbble