Google Maps

Enabling users to take the scenic route with a feature add-on to the most popular navigation app
Project Date: October 2020
Company: Google
My Role: Research, personas, POV/HMW statements + brainstorming, empathy mapping, sitemap/user flows, sketching, wireframing, prototyping, user testing
Team: Product Manager, Group Crit Peers
X.png
X.png

Overview

Project Background

Recent studies have shown that due to the pandemic, public transportation ridership has decreased significantly in large urban cities as people have turned to walking and biking as their primary mode of transportation - both activities also doubling as exercise methods due to gyms closing. Cities have adapted by creating pedestrian-only streets and creating extra cycle lanes to encourage social distancing and create more space for this new mode of transportation.

The Challenge

The primary use case of Google Maps is for logistical reasons - how to get from point A to point B in the most efficient way. How might we encourage users of Google Maps to discover and explore more in a world where more and more people are finding ways to get outdoors?

Objectives

Create an add-on feature to Google Maps that enhances the existing Google Maps app experience while adhering to Google's Material Design system to create a seamless experience.

Process

Process

For this project, I decided to follow IDEO’s Human-Centered Design Thinking process to ensure that my design decisions are backed by research and user feedback.

 

Empathize

Why

Using various research methods to understand and empathize with the user's experience of various mapping / navigational apps / sites in order to identify their goals and frustrations.

How
  • Research Ramp-Up: Secondary Research & Competitive Analyses, Provisional Personas

  • 3 Interviews (1 hr per interview)

  • Empathy Map

Competitive Analysis & Provisional Personas

To begin research for Google Maps, it was important to understand the app's direct competitors in order to get a good understanding of their differences and why a user might turn to a competitor to solve problems that Google Maps doesn't solve for them. It was also essential to identify indirect competitors such as Lyft for the user-friendly interface and Citibike integration and Roadtrippers for the map customization and detour/travel features to better understand why these apps appeal to a specific group of users.

 

I then created provisional personas for the types of users of Google Maps so that I may keep them in mind when conducting user interviews.

Research Ramp-Up Findings

After identifying the strengths and weaknesses of Google Map's direct and indirect competitors, the below points are what I learned:

 

What I learned:

  • The more customization capabilities there are, the more popular a mapping app is amongst users - Google Maps & Waze both offer extensive filters and customization in their app

  • Simple is better - simple and clear UI is essential in navigation apps because safety and convenience is the #1 priority when users are always on the go while using the app

  • Offline maps - The limited feature of offline maps for Google Maps is a common frustration for users, so they turn to other apps to supplement their navigation. This is common especially when users lose signal and among those who may not live in an area that Google Maps has a lot of data on.

  • Accommodating Walkers & Bikers - most navigational apps are geared towards drivers (most filters, real-time route updates and customizations are available only for driving), and since more people are walking & biking, popular navigation apps should design for these users.

Interviews

After understanding competitors in the industry, it was time to dig into the habits of users and empathize with them through 1-on-1 interviews, each one lasting up to 1 hour. I interviewed 3 users, 2 of which I did in person and 1 over video call. All users use Google Maps as their primary navigation/map app.

To prepare for interviews, I drafted up a script that included an introduction to the project I'm working on, a screening question for whether or not they use Google Maps, followed by specific questions on their experience with Google Maps as well as what other apps they may use and why. I asked for their age and occupation at the end of the interview. I transcribed each interview and had 7 pages of interview material to work with for my empathy map in the next step.

Empathy Map

To summarize my interview findings, I organized notes from my interviews into an empathy map to understand what the user says, thinks, does and feels. My goal for creating a multiple-user empathy map was to help me create a singular persona for Google Maps during the Define stage (up next).

Google Maps Empathy Map (1).png
 

Define

Why

To leverage all previous research to define high level goals and identify priorities for the feature add-on.

How
  • User Persona

  • POV/How Might We Statements

  • Feature Roadmap

User Persona

By creating an empathy map, a user persona began to form for the ideal user of this Google Maps feature add-on. This is Sarah, a 25 year old young professional that lives in New York. She's looking for ways to stay active during quarantine and explore her own neighborhood.

"I like to be prepared when I travel and I'm always trying to fit everything into my schedule!"

– Sarah

Sarah Persona (1).png
POV/HMW Statements

I presented Sarah, my user persona to a group crit and the idea of coming up with POV/HMW statements was a suggestion I decided to take up because it was a way for me to brainstorm quick-fire ideas. I created a total of 4 POV statements and HMW statements to supplement them.

POV:HMW Statements Google Maps.png
Screen Shot 2020-10-28 at 12.12.36 PM.pn
Feature Roadmap

Referring to the HMW/POV Statement document, I prioritized the best solutions in a feature roadmap below, organized by Must-Have, Nice to have, and Surprising and delightful.

Screen Shot 2020-10-28 at 12.35.13 PM.pn
 

Ideate

Why

With my personas and must have features defined, it was time to ideate and visualize how my feature would be integrated into Google Maps.

How
  • Sitemap

  • User Flow

  • Wireframe Sketches

Sitemap & User Flow

Using Whimsical, I created an app map for Google Maps, laying out all the screens that would be relevant to the scenic route feature add-on, and where the feature could be implemented seamlessly. I've used yellow to highlight where the new feature would go.

Using the same tool, I created a user flow for all the actions a user could take to access the feature and its functions (search, save, add a route).

Google Maps@2x.png
Google Maps@2x (1).png
Sketching Wireframes

Using the Procreate app on my iPad, I began sketching out my wireframes. I referred to my sitemap and user flow to decide on which screens to sketch out, highlighting in green wherever the new feature is added.

Sketched screens:

  1. Main page - scenic route exists in a quick search button beneath the search bar, and in a floating action button to the bottom right that triggers a pop-up so users can choose to find routes, go to saved routes, create route, or record a route

  2. Explore Page (bottom sheet on main page) - scenic route exists in two different cards, small one on the top row that works similarly to the quick search button, and a larger card under "Featured Lists" that features curated routes by the community

  3. List view of nearby scenic routes

  4. Curated list of routes

  5. Search for directions to a route

  6. Route details

  7. Saved routes in the Saved tab

  8. Add route in the Contribute tab

  9. Recommended routes in Updates tab

  10. Create a route screen + details form

Untitled_Artwork 11.png
Digitizing  Wireframes

Because the UI and design systems are already spelled out for me with the existing Google Maps app and Google's Material Design, I went straight to transforming my sketches into a high-fidelity wireframe.

 

One major change I made was to the floating action button (FAB) I had sketched out on the homepage in which I created a third FAB. After studying Material Design's rules on FABs, which discouraged having more than one FAB on a single screen, but allows for two FABs to be used occasionally, if they perform distinct, yet equally important, actions, I decided against including it in my digitized wireframe. This decision also nixed the screen I had where a pop-up would be trigged by that extra FAB so I came up with ideas on how to incorporate those actions within other screens.

1.png
2.png
3.png
10.png
12.png
 

Prototype

Why

With the high fidelity wireframes ready to go, the next step was to test my assumptions for the user flows. I worked directly in the Figma file to create a click-through prototype with basic interactions/animations.

How
  • High-fidelity click-through prototype

Screen Shot 2020-10-27 at 6.19.02 PM.png
 

Test

Why

With my prototype up and running, it was time to validate and test my product and make any necessary revisions.

How
  • Usability Testing

  • Affinity Map

  • Priority Revisions Matrix

Usability Testing

I conducted user testing with 4 total participants, 2 of which were individuals that I interviewed for this project, and the other 2 who were not involved in the beginning but both avid users of Google Maps. 3 interviews were in person and 1 was over Google Hangouts, each lasting up to 1.5hrs. The goal was to test my assumptions of how users would navigate the site and if users would find certain features delightful.

 

There were 4 tasks each user had to complete. After a user completes 1 task, I would follow up with questions specific to that task to gain a deeper understanding of their actions, expectations, frustrations and general impressions. I transcribed every user testing session and had 16 pages of material to work with.

See the four tasks/scenarios outlined below:

  1. You have been sitting at your desk for too long while working from home and have been taking walks outside to break up your day. However, you’re running out of ideas of where to go and so you open up Google Maps and use the scenic route feature to take a look at your options. How would you look for some scenic routes?

  2. You are browsing around routes and see one for Brooklyn & Manhattan bridge that you’re interested in so you save it for later. Later, you want to access the route you saved. How would you do this?

  3. You are out for a stroll and find your walk very pleasant, so you want to record it so you can access it in the future when you want to do the route again. How would you go about recording your route?

  4. You’re at home and want to plan a running route around FiDi, how would you add/create a route?

Screen Shot 2020-10-23 at 10.02.16 AM.pn
IMG_3924.HEIC
Affinity Map

I created an Affinity Map on Figma by looking over my transcripts, pulling out quotes and arranging them into sticky notes organized by Successes, Concerns, and Observations/Suggestions, and color coding the notes by which screen they refer to. This exercise helped me organize my notes and transcript, and identify any patterns in successes and more importantly, concerns. 

Affinity Map.png
Affinity Map

Every user was able to complete the tasks given to them - tasks 1 & 2 were a breeze, but tasks 3 & 4 were a challenge to do at first because it was hard to find. Task 3 required users to know that clicking on the "current location" button would create a secondary view of the map and reveal small FABs on the screen, including the record button. Task 4 required users to be familiar with the Contribute tab, an action the majority of Google Maps users do not use unless they have added a place, wrote a review, or updated information on a location/business.

Some pain points were:

  1. The distance usually indicates the distance to the location, so having one singular distance is confusing for a route - users were not sure if it mean the distance of the route itself or the distance of the route plus the distance between them and the route

  2. Finding the record button was challenging because it is hidden away, and users thought it was more intuitive to click on the Contribute tab to find it when they couldn't easily find it in the main page

  3. For some users, it wasn't intuitive to go to the Contribute tab to "add a route" because it wasn't a tab they frequently use. These users thought the option to "add a route" would exist where "recording a route" would be

  4. Users mentioned that knowing the distance & time of what they had just recorded, or created would be helpful and informational as they record or create a route

Additional screens to design/prototype:

  1. All users wanted to click on "Directions" to see the final step, so designing and prototyping this screen is priority

  2. Users were curious as to what "add a note" means when saving a route - they mentioned that it isn't a function they normally feel the need to use, but are more likely to use for routes since it isn't as straightforward as restaurants or clothing stores

Priority Revisions Matrix

The next step was selecting which concerns and suggestions to act on. By organizing the stickies that fell under the "Concerns" and "Suggestions" sections in my Affinity Map in a priority revisions matrix that measured user value against (my) effort to implement, I was able to quickly prioritize which problems to immediately address (high value, low effort), which problems I can tackle next (high value, high effort), and which ones not to focus on at all if they were one-off problems/suggestions with low user value.

Priority Revisions Matrix.png
 

Iterate

Why

Based on user testing feedback, improve the usability of my product.

Revisions

See below for major changes I made to my wireframes.

Distance 1.png
Round Recording.png
Distance.png
Stop Recording.png

The Problem:

There are two distances to measure, the distance of the route itself and the distance between the user and the route

The Solution:

Added "Distance Away" to differentiate and clarify what the distance measures

The Problem:

It was a bit confusing that pressing record again stops the recording

The Solution:

Changed the record button to a stop button to better differentiate button states

5.png
9.png
8.png
6.png

The Problem:

User wants to click on "Directions" and see what happens

The Solution:

Designed & prototyped a new screen for what happens after users tap "Directions"

The Problem:

Users suggested a useful feature to have was to know certain points of interests

The Solution:

Created a distinct pin to represent "Point of interest" and implemented it into the route & step-by-step directions

12.png
X.png
7.png
add route.png

The Problem:

Users wondered if there was a way to add a stop to an already existing route

The Problem:

Users had trouble finding where to record a route via the homepage - they expected to find it in the Contribute tab

The Problem:

Gestures were unclear here of what to do to draw a line vs move the map with one finger

The Problem:

Users can't see the distance and time when they are recording or creating a route

The Solution:

Added a new screen - under the "more" button on the top right, added the option to duplicate route. This menu also includes the new "Download route" button for those that worry about losing service in a scenario like hiking

The Solution:

When users click on the "add route" button, a new page asks them to make a choice between recording a route and create a route

The Solution:

Edited the copy to add "2 fingers to zoom" to differentiate between 1 finger to draw and 2 to move map

The Solution:

Added a bottom bar that informs users the distance & estimated time it takes to walk

Other Revisions

There were two problems that fell under the high user value + high effort tier in the priority revisions matrix that I did not make changes for. My reasoning below:

The Problem:

Every user found it challenging to find where they can record their route and their instinct was to find it in the Contribute tab.

The Reasoning:

The only change I made to this was create an add route options screen so users can choose which action to take. Whether or not this function of the feature deserves more visibility in the homepage would require significant testing amongst Google Maps users. I also want to point out that if this were a real feature add-on, there would probably be marketing around it and user onboarding for this new feature when Google Maps pushes out an update.

The Problem:

Users wondered if it was possible that a route is generated based on their saved/pinned spots.

The Reasoning:

An itinerary/route generator was originally one of the functions I wanted to build into my feature add-on, but I quickly realized that it was out of scope for the basic tasks I wanted this feature to accomplish. Logistically, this function would be quite challenging because it's hard to say how Google Maps can create an itinerary/route if a user has many of the same kinds of things bookmarked/saved (i.e. 5 breakfast spots).

 

Though automatically generating a route is challenging, this need can be met by the feature that I did create, which was the ability to create your own route. Users can draw their ideal route around place they have saved.

Final Prototype

Last but not least, please enjoy my final prototype!

 

Keep in mind the 4 tasks as follows as you go through my prototype:

  1. Explore scenic routes

  2. Save a scenic route (Brooklyn & Manhattan Bridge Loop)

  3. Record a route

  4. Create a route

Next Steps

 
Conclusion

Overall, the prototype was a success because I let the research inform what feature to create rather than go into this project with a feature in mind. The end result was a successful product that users find useful and can see themselves using at different capacities. Though I only tested 4 individuals, their responses were diverse and each user were inclined to use one function more than the other. All participants expressed that this feature add-on encourages them to think of Google Maps differently. When they used to rely on it for purely logistical reasons, they now see it as an exploratory application.

"I wish I was the kind of person that takes walks for leisurely purposes and I can see this feature making that an easier habit to start doing."

– Andrew

Future Considerations

Because this project was created in a 2-week sprint, there are a few things I would do differently if I had the time and resources:

  • Interviewing a larger, more diverse group of Google Maps users

  • Conduct user testing with more people

  • Conduct user testing after making revisions to continue iterating and improving the product

This project is a personal exploration of Google Maps and I am not associated with nor have I been compensated by Google to create this project.