ADD-ON FEATURE

Google Maps

An add-on feature that enables users to take alternative, more scenic routes.

View Prototype

Google Maps thumbnail
⚡️ NOTE

This is one of the projects I completed for Designlab's UX Academy. Despite not being a real app, the research is genuine, as well as my mentor's and student's feedback. I'm proud of this project and just wanted to be transparent with you.

Overview

My goal was to uncover what users want out of their navigational apps and how they discover new places while traveling. Using those insights, I designed a new feature, Scenic Route, that lets users take a more picturesque way instead of the default route, displaying roadside attractions and scenic overlooks that they can add to their journeys.

Google Maps Hero Image

Research

I began by conducting secondary research about navigational apps, and the motivations people have for using them. There are many similar features in these applications, but none of them do everything. It will now be a matter of determining what feature would benefit Google Maps the most. 

Competitive Analysis
Feature Comparison

User Interviews

After understanding the competitors and their features, I conducted some user interviews and empathized with them. I interviewed four participants who have previously gone on road trips and currently use Google Maps as their primary navigation tool. 

  • The most memorable part of the road trip is the unexpected stops and occurrences experienced along the journey.
  • Word of mouth and Google searches are two of the most common ways people discover new places to visit
  • Users find the act of adding a stop to their route frustrating because they cannot safely do it while they are driving.
  • People only want to drive to attractions that are close in proximity to their routes.
  • Most people prefer to plan out where they want to stop while they are driving.
  • People want to see national parks, state parks, scenic overlooks, historical sites, local restaurants, hotels, and natural wonders on road trips.
  • Everyone thought a scenic route feature would be a great addition to the Google Maps app.

Problem Statement

Google Maps is one of the most widely used navigation tools worldwide. The app efficiently gets users to their destinations as quickly as possible. However, users not worried about time might want more of an adventurous drive. How can we enable users to discover and explore more beautiful sights along the way?

Define

With the scenic route feature in mind, I created a user persona based directly on the user interviews. This reference tool would help keep me aligned with user goals and allow me to solve their problems. Additionally, I created an empathy map based on the notes from my interviews to understand better what Katie sees, hears, and thinks.

User Persona
Katie's user persona
Empathy Map
Katie's Empathy Map

Application Map

With my user’s voices defined, it was time to build an application map. This would help me identify and visualize the app’s underlying infrastructure, enabling me to determine the optimal place/s to inject the new scenic route feature (Green indicates new screens I would be adding for this feature).

App Map
Application Map

Task Flows

Using Whimsical, I created task flows for every user's action to access the feature. As a result, this served as an outline for the required wireframes' screens.

Task flows
Task Flows

Design

​​Once I worked out the task flows and application map, I began sketching out some low-fidelity wireframes on my iPad. I sketched out the key screens that would showcase the new scenic route feature. 

Low Fidelity Wireframes
Low-Fidelity wireframe sketches

⚡️ CHALLENGE

There needs to be a way for users to turn the scenic route feature on and off quickly. More importantly, there needs to be a button with an icon that is easily comprehensible and not cluttered with extraneous detail. Finally, this icon should fit into Google's existing iconography system. 

✅ SOLUTION

Scenic Route Button

I created an icon similar to a road sign's intent of directing a user toward it. The icon features a mountain range identical to Google's mountain icon but has a road carving through it.

High Fidelity Screens

Using the Google Maps app and Google's Material Design System, I went straight to creating high-fidelity screens.

1 - Explore
Explore screen
Scenic routes nearby
Scenic routes nearby
Map of scenic routes nearby
Map of nearby scenic routes
Old flowers road
A scenic route screen
Route Overview
Default route overview
Default route
scenic route nav after delay
Scenic route enabled
Scenic route overview
Scenic route overview

Test

Next, I created a prototype in Figma and conducted a series of usability tests to ensure the scenic route feature made sense to users. I instructed and observed participants as they worked through two tasks.

Task 1: Explore nearby scenic routes and then save one

TASK INSTRUCTIONS

You just moved to a new town. You want to check out some scenic drives nearby. How would you look for some scenic routes nearby? Find the scenic route named Old Flower Road and then save it to your “Want to go” list. 

TASK NOTES

There were no major issues found during this task. All of the users responded positively to the scenic route icon. The placement of the scenic routes button positively impacted the feature’s usability. One user mentioned that they were surprised that this isn't already a feature.

TASK COMPLETION RATE

100%

Task 2: Convert a standard route into a scenic route

TASK INSTRUCTIONS

You are driving to Montana today and discovered that you have some extra time to burn. Please route yourself to Missoula, MT, and then convert the route into a scenic one.

TASK NOTES

The testing of this task revealed no significant issues. Users were able to convert the route into a scenic one relatively quickly. Nevertheless, some users felt the scenic route button is prone to be accidentally activated on the navigational screen. Users also requested that the route line changes to a different color or pattern when the scenic route is enabled. 

TASK COMPLETION RATE

100%

Affinity Map

In order to organize my notes from the usability tests, I made an affinity map. I sorted any patterns I discovered into successes, concerns, and suggestions.

Affinity Map
Affinity Map

Iterations

While the users successfully completed the tasks asked of them, I uncovered some areas of improvement. Below are the significant changes I made to my high-fidelity screens.

Old Version
Figure 1
New Version
Figure 2

Problem (Figure 1)

Users suggested that the scenic route line look visually different from the standard route line to help differentiate them apart.

✅ Solution (Figure 2)

My solution was simply altering the route's line color to help differentiate the scenic route from the standard route. I chose to use Google's green color because it had the best contrast against the map. 

Problem (Figure 3)

Users felt the scenic route button was prone to being accidentally activated and that it may be too accessible in the navigational window. 

✅ Solution (Figure 4)

My solution was to make the route’s line the same green color. I also removed the scenic route button from this screen. This will force users to only engage the scenic route feature in the previous route overview screen. 

Old Version
Figure 3
New Version
Figure 4

What I learned

Overall, this project taught me how to work appropriately within an established design system and its patterns. It was vital for me to design components that blend in with components. Otherwise, the user could suffer. I also learned the power of letting research guide the project. By conducting a feature comparison, I was able to narrow down gaps in popular navigational apps, which led me to discover the scenic route feature.

More Projects