Oliver Knickrehm
Google Maps for Gen Z
Google Maps for Gen Z
This project won Best in Design
at the Capstone showcase
Senior Capstone project sponsored by Google finished in June 2022. Planning began in January 2022. This project was completed with a group of 4 HCDE students with the guidance of the UX Design Lead for Google Maps and a second Google Maps UX designer.
​
Overview
The goal of this project was to research the way that Gen Z differs from other generations and design a Google Maps experience that meets their needs. The research and designs focused on how Gen Z users parse information, how they understand the "vibe" of a location on the map and how to create a personalized Google Maps Experience.
​
​
Role
UX Designer, UX Researcher and
Project Manager​
User Research, Codesign, Wireframing, Prototyping, User Testing
Tools: Figma, Illustrator, Miro
​
January 2022 - June 2022
​
​
Proposed design question : How might we design a more personalized, contextual Google Maps experience for Global Youth (18-24 y/o) users?
On This Page
The Problem
Gen Z users possess different characteristics from other generations. Google Maps struggles to reach Gen Z users and wants to improve engagement within this user group through the implementation of new features. ​
​
​
​
1. A redesigned explore page
​
2. A media centered approach to displaying establishments
​
3. Personalized plans to connect users while keeping Maps a utility
​
How we solved it
Three new features created for Gen Z users.​
​
​
​
1
2
3
Our Process
Our design process began with a review of the Gen-AZ research that Google had completed previously. We then completed our own research phase, ideation phase, evaluation phase and finally implemented our work into a Hi-Fidelity Figma Prototype
01/ Research
Review of research on provided by Google Generation Z
Survey of urban college students
Codesign sessions with urban college students
Understanding Gen Z and the Global Youth
-
Global Youth are digital natives with unique user experience expectations and perceptions of authenticity.
-
Global Youth are drawn to parsable forms of content (ex. ephemeral videos and audio).
-
Global Youth are content creators that contribute to both public and private spaces of the internet.
01/ Research
Review of research on provided by Google Generation Z
Survey of urban college students
Codesign sessions with urban college students
Understanding Gen Z and the Global Youth
-
Global Youth are digital natives with unique user experience expectations and perceptions of authenticity.
-
Global Youth are drawn to parsable forms of content (ex. ephemeral videos and audio).
-
Global Youth are content creators that contribute to both public and private spaces of the internet.
Refined Design Question: How might we design a more personalized Google Maps experience for Urban College Students in the United States that conveys the “vibe” of an area?​
​
Research Questions​
-
How do Global Youth parse information on the map?
-
What separates Gen Z from other generations?
-
What information helps them discover new places and make decisions about where to go? (For example, how can Google Maps better communicate the vibe of an area? What types of media best convey vibe?)
-
Should the map communicate the voice of the community? If so, how?
Survey
Sent out to slack channels
10 questions with 27 responses
Questions explored assumptions about Gen Z's perception of "vibe"
Overview
​
Inclusive Criteria
-
Between the age range 18 to 24 years old
-
Reside in an urban area
-
Google Maps user
​
​
Exclusive Criteria
-
Outside the age range 18 to 24 years old
-
Reside in a rural or suburban area
-
Do not use Google Maps
Questions: Multiple Choice, Free Response, Ranking
​
Results
-
​Seeing how to get somewhere and choosing the best way is the most important feature for our users
-
Photos and reviews are essential to our users when looking for a new place to try
-
Price and distance are important when deciding on an establishment
-
Parking/parking options was a recurrent mention from our users when asked about going to a new/unfamiliar location
Codesign
2 different sessions with 6 total participants
Further explored perception of "vibe" and how to represent it on a map
Generated an array of ideas and led to several key findings
​Overview
Participants: 6 Participants recruited from our survey
Session length: 2 hours
Test setting: University of Washington classroom
Materials provided: Pens, pencils, stickynotes blank paper, blank map interfaces
Session Plan
Each session that we conducted consisted of 5 activities for participants to complete​. In the first session I acted as a participant in order to help guide participants through tasks and understand any flaws in our codesign process. During the second session I was a facilitator.
Each activity included a scenario, task and allotted amount of time. The first two tasks acted as warm ups to get participants thinking about how images convey "vibe" and how they would convey "vibe" to others.
_JPG.jpg)
Results
Both of our codesign sessions went smoothly and generated ​a variety of ideas that helped us understand the ways that Gen Z users think about "vibe." Our next step was to take the designs that our participants created and find themes to move forward with.
I was in charge of activity 5 so I went through every participants work they completed for activity 5 and wrote down ideas they had come up with. I then grouped those ideas into themes and added them to our affinity diagram along with all of the activities.
Key Research Findings
1. Vibe is Dynamic
From our survey and co-design, we found that our participants understand that vibe fluctuates depending on factors like time of day, day of the week, etc. This led to our participants emphasizing the need for up to date or live media. In our co-design, participants frequently discussed incorporating photos, videos, reviews, price, crowdedness and décor to help the user decipher the vibe of a location.
2. Prioritization of Current Media
The results from our survey and co-design showed participants prioritizing media and emphasizing the importance of up to date media when deciding on a location and understanding that location's vibe. Our codesign participants had ideas for implementing photos and videos with timestamps along with virtual tours of locations directly on the map to give more context to a hotspot. Many of our participants discussed incorporating sharing features between friends to see what they are doing and collaborative planning features for a group excursion.
3. Customization of Maps
Our codesign participants considered different things when deciding on a location on the map. Different participant preferences led to customizable interfaces and features on the map. One participant designed a feature around personal profiles that allowed the users to set up a filtered search on the map to get more personalized results to explore. The idea of customization within Maps would allow users to efficiently decipher the vibe of a location and make an informed decision from information that is useful to their user profile.
02/ Ideation
Brainstorming and crazy 8's sessions
Finalizing paper sketches
Creating lo-fi interfaces in Figma
Brainstorming
For the ideation phase I had the roll of Project Manager along with being a UX Designer. My mindset entering the ideation phase was to come up with as many different ideas as possible and to begin narrowing our ideas down until we felt we had a clear direction as a group. In order to generate a variety of unique ideas, we began brainstorming individually then came together as a group and shared our ideas.
Crazy 8's: Crazy 8's is the process of folding a piece of letter paper into 8 sections, each roughly the size of a phone screen, and iterating different ideas on each screen. We chose crazy 8s because it is a low stakes way to begin iterating and encourages creative ideas by eliminating the time commitment of creating designs in Figma
My Process​
1. Generate initial ideas individually on paper using lists and sketches
2. Create crazy 8's boards
3. Share ideas and thought process with the team
4. Give feedback to team members
5. Discuss as a team and decide narrow the direction for the next brainstorming session
6. Repeat
​
As the project manager, I led each of these sessions. My goal was to create an environment where everyone felt like their ideas would be valued and where everyone felt comfortable critiquing other team member's ideas. I also focused on solidifying the next steps as a team each time so each team member had a clear direction to continue ideating on.
The brainstorming process detailed above generated a wide variety of ideas ideas, made team members rethink their ideas, gave team members new ideas to ideate on and helped the team stay on the same page come to a consensus on the main ideas that we wanted to bring into Figma. Once we reached this point, each team member created a final group of sketches and shared them with the team.
Low Fidelity Prototypes in Figma
Creating a variety of simple screens in Figma
Developing a user flow while narrowing down ideas
Working towards a prototype for usability testing
My roll: As the team member with the most Figma experience, I took the responsibility of creating most of the frames and helping other members with Figma features. I worked on all of the features we created but the main features that I worked on were the saved searches and personalized chips.
SAVED SEARCHES AND PERSONALIZED CHIPS
Existing Google feature called "chips" are like premade shortcut searches
Research from Google showed average attention span for Gen Z is 8 seconds
Co-design results revealed Gen Z users are interested in personalized features.
Response was to created feature allowing users to save searches as personalized chips
Searches save user's filters and preferences
Personalized chips are located on user's explore page for quick and easy access
MEDIA LAYER
Codesign revealed that Gen Z users prioritize visual media when exploring new areas
New display of establishments takes media centered approach
Carousel allows users to scroll through establishments and glance at thumbnail image
Gives users a better sense of the "vibe" of a location
PLANNING FEATURE
Research showed interest in a feature allowing users to connect and plan with friends
Planning feature aims to solve this
Allows users to select locations and add them to a plan
Users can add friends as collaborators
Location sharing is incorporated to create a smooth planning experience
03/ Usability Testing
8 user tests completed with Gen Z users
3 tasks for users to complete corresponding to each new feature
Recorded qualitative and quantitative data
​Overview
Participants: 8 participants from the University of Washington
Session length: 45 min
Test setting: University of Washington classroom or Zoom meeting
Data Gathered: time on task, number of taps, number of wrong taps, number of wrong directions
​
Tasks
CHIP CUSTOMIZATION
CHOOSE AN ESTABLISHMENT
CREATE A PLAN
Findings
CONFUSION AROUND SAVE SEARCH TOGGLE
Difficulty saving a search using the save search toggle
Failure to see the save search toggle and use of flag icon to try and save a search with a tap
Interest in receiving more feedback when a search has been saved
LOCATION REPRESENTATION
Prioritization of media and the increased size of images received positive feedback
Location of establishments not as important to users but bubbles cover up the map
Users voiced the desire for easy access to the menu
"DONE" INTERACTION
Participants missed the "DONE" button under the price filter
Confusion around what the "DONE" button was for
The button was modeled after Google's current interaction so the lack of color could have been an issue
04/ High Fidelity Prototype
Usable Figma prototype matching Google Maps UI
Incorporates findings and feedback from user testing
Solidifies three high fidelity features and user flows
My roll: I was again in charge of the customized searches and chips features but was involved with all designs. I did the majority of the work in Figma as the most experienced member. I taught team members advanced Figma features so we could work together on the document and create a quality prototype.
Final Prototype Features
SAVED SEARCHES AND CUSTOMIZED CHIPS
A REDESIGNED EXPLORE PAGE
​
New explore page includes a dropdown under the search bar for saved searches and plans
Blue represents a saved search and purple represents a saved plan
Plans include a calendar emoji with their planned date
Plans "pulse" to signify that they are active and in use
SAVE A SEARCH​
​
Users can save a search with their filters
Save search interaction updated from Lo-Fi prototypes based on user testing results
Save button moved next to search bar as a circular button with a bookmark icon
Users can now rename search when saving as a custom chip
Searching for Italian
Renaming saved search
New name confirmed
A New Way to Display Establishments ​
PHOTOS TO REPRESENT RESTAURANTS​
​
Photos included on the map to represent restaurants
Allows users to understand "vibe" of an establishment without clicking
Custom chip clicked
MEDIA CENTERED APROACH TO DISPLAYING
ESTABLISHMENTS​
​
Photos increased in size and prioritized in description
Menu in upper left corner for visibility
Ability to add restaurant to list or plan
Connecting users without making Maps too social
​
​
​
Personalized Plans
​
CREATING A PLAN
​
Create a new plan from the planning home page
Add locations and a starting time and date
Share with friends through IOS sharing like iMessage
Piatti clicked on
Planning home page
Creating a plan
Sharing plan
RECEIVING A PLAN INVITE TEXT​
​
User receives text with plan overview and notes
User clicks on plan which opens it in Maps
User can RSVP "yes" or "no" and see others who have been invited
Text with plan received
Text clicked on
05/ Capstone Showcase
Winner of Best in Design
Every HCDE Capstone set up for judges and guests
Display included poster, video run through of prototype and video prototype for the project
My Role: For the Capstone showcase I created the layout and visual design of our poster, filmed the video run through of our prototype and helped create the video prototype. At the showcase I focused on explaining the features I was in charge of and the ideation phase of the project.
The showcase went well and we received the award for Best in Design for Bachelors students. We received a lot of positive feedback on our ideas and had great conversations with judges and guests.
Capstone Showcase Poster
Next Steps
The next steps of this project would be to explore each aspect of the design more deeply. We created three, fairly large features that we developed into high fidelity prototypes but each of these features could have been our entire project if explored more deeply. There are many little interactions and aspects of the user flow that would need to be explored and designed if these features were to be implemented. This process would likely begin more usability testing and continue to be iterated on.