Google Maps Affinity Highlighter
This add-on feature will allow users to identify businesses that align with their social priorities and increase consumer support for businesses owned by members of underrepresented communities.
Timeline:
Collaboration:
2-week project
Self-Initiated
Involvement:
UX Design
Research
Usability Testing
Prototyping
TL;DR
I conducted market research to solidify if this was a valid project. Then I moved forward to conduct User Research including a Google Survey, User Interviews, and User Observations.
Understanding Research
I synthesized the research into Empathy Maps and 2 User Personas. These were used to create the feature prior to testing and iteration. Designs are at the end of the case study.
Uncovering Opportunities
BACKGROUND
Where did this come from?
• In June of 2022, I opened my email just like every year to be inundated with messages to support LGBTQIA+ businesses.
• While planning to order takeout, I decided to see if there was a local business that was owned by a member of the LGBTQIA+ community.
• There was no way to easily identify businesses owned by underrepresented communities.
My hypothesis: Users want an easy way to delineate whether a business is owned by an underrepresented community when making reservations for a restaurant.
How might we make this more evident to users?
RESEARCH
Exploration:
Am I just missing something?
Is this actually available and I have just missed it?
I started with Google Maps and researched 4 other popular location and/or restaurant ordering applications for information on any underrepresented community owners.
• Google Maps
• Apple Maps
• Yelp
• Resy
• Open Table
None had an option to easily identify a business that was owned by a member of an underrepresented community.
I made the decision here to narrow my focus to restaurants since that was the original pain point I had discovered.
Due to its immense popularity, I chose to focus on Google Maps. I want to see, “Just how difficult is this?”
Steps to find if a restaurant has self-identified as being owned by a member of an underrepresented community:
1. Click the “Restaurants” button
2. Swipe or scroll on the map to find a business
3. Click a business on the map or the card that is shown
4. Swipe to the “About” button
5. Click the “About” button
6. Scroll down the about section to find the information
7. If they aren’t identified, start again...
Methods:
While exploring this problem, I did comparative research, so I chose to move forward to get a stronger data set and confirm the viability of the product:
Market Research
User Survey
User Interviews
User Observation
This will allow me to create personas to empathize with the users and not just make assumptions based on my opinions.
Market Research:
First, I want to uncover:
Is this an actual need users have? Do people care? So, I did some online research:
• According to a 2021 McKinsey study, Consumers care more than ever about making sure their purchase decisions represent their values, especially younger generations. Ninety percent of Gen Zers believe companies should address racial equality.
• 5W Consumer Culture Report states that 83% of consumers 18-34 and 73% of consumers 35-52 feel it is important that companies they buy from align with their values
• Users care about who owns the businesses they frequent. 65% of consumers 18-34 and 59% of consumers 35-50 have boycotted a business they used to frequent due to the business’s stance on a social issue
User Survey:
Now I know people care about supporting underrepresented businesses, but how can I create something to do this? By creating a Google Survey, I was able to get insight from 38 participants about their restaurant habits and how they feel about supporting businesses owned by members of underrepresented communities.
97%
100%
79%
62%
52%
56%
of participants feel that businesses we patronize should support our values
of participants would frequent more minority-owned and operated businesses if they were easier to locate
of participants would, or do, go out of their way to patronize minority-owned and operated businesses
of participants prefer to order their food from the restaurant directly
of participants use Google Maps to find a restaurant when looking for any business to patronize
of participants find restaurants they patronize from Google Maps
User Interviews and Observations:
What do people really want? To get a clearer picture, I interviewed four users and observed them in their search for a restaurant using Google Maps. I was able to gain insight into their priorities and how they search for restaurants.
• All participants want to be able to find information about underrepresented communities. While this is something they want to do, the systems currently in place do not allow for an effortless experience so it has not been able to be prioritized.
• Those who have prioritized this have done so for specific events or stuck with businesses they know to be supporting underrepresented business owners.
• Finding new businesses owned by members of underrepresented communities has fallen to makeshift lists and community databases that have been created to fill the gap.
“If I have the option, if this business has the same product as that business, I am more likely to buy the product from the minority-run business than anywhere else.”
“I try to be intentional about where my money is going”
“I don’t think [I support businesses owned by an underrepresented community] as much because… I need to click into it… it makes it difficult.”
DEFINE
Research Synthesis:
Empathy Maps:
Problem Statement:
A user feels frustrated trying to find a restaurant owned by a person of an underrepresented community and needs an easy way to identify which businesses are nearby.
Personas:
Two personas were created to empathize with users and understand the design that was needed. These two different users both need a solution for this challenge. Meet Matt and Brianna.
Project Goals:
1. Reduce Interaction Cost
-Currently, it takes at least 3 clicks and 3 movements after the restaurant has been chosen
2. Remove the frustration of clicking into a business to find it does not meet the specifications
3. Preserve Geo-location options to see all businesses nearby
4. Ensure easy learnability
Solution -ish?:
There are a number of ways to remedy the problem, so I chose to try a few with the following guides:
• Highlight, DO NOT filter the businesses so the user can choose
• This information is already self-reported in Google Maps and accessible so it needs to be featured earlier in the search process.
• Users want to make the decision based on their proximity to businesses
Now that I have the interviews sorted, I need to understand what these users are truly experiencing. I created Empathy Maps for each user to organize the color-coded labels into what the user is experiencing.
I took some time to organize my interview findings so I could clarify patterns of motivation, pain points, and behaviors.
IDEATE
Site Map:
I started by mapping the current flow for Google Maps. It’s here if you would like to see it.
It is clear that there are many options to place a feature that can highlight in this way, which highlights the friction that would come from interaction cost.
Sketches:
Because this is an add-on feature, I wanted to keep the focus on following the company branding concepts and integrating the feature into the application. I did some simple sketching and jumped into high-fidelity screens.
Filters and options are at the top of the application so users have learned to look there.
Options show once the category of business is chosen, so a clear option for a button.
Application and account-wide settings are available as well, this should be an option for users to choose.
The standard flag for businesses is red. A color must stand out and still be visible on the background.
More Brainstorming:
There was no data collected about where on the screen and how a user would want this to function.
With the time constraints and the project at hand, there was no time to complete more research so some assumptions had to be made to complete the prototype and start usability testing.
Usability testing will be used to confirm or eliminate assumptions for the next iteration.
PROTOTYPE
High-Fidelity Mock Ups/Clickable Prototype:
• Figma was used to create the Hi-fi prototype that would match the Google branding and application standards.
• The Affinity Highlighter was added to the filter bar, a toggle switch on the map itself, and the settings were added to the Web and App Settings to see which was utilized during usability testing.
• The Affinity Icons were pulled from Google’s DE&I pages and all options Google currently has in place were used, all other elements were created to stay in line with Google branding.
• 2 Restaurants were expanded to allow users to find one of the two. One is owned by Black Women and is LGBTQIA+ Friendly, the other has no affiliations.
• Geo-location was emulated to ensure users could find a location nearest.
TEST
Usability Testing:
Testing was conducted using two iPhone 11s. One was used to launch Figma mobile and run the prototype while the other was used to videotape the users’ interactions. 9 participants were involved.
Users were given the following scenario:
Your boss has tasked you with finding a BBQ establishment that is Black Owned for the Juneteenth luncheon.
Results:
The results were placed into an Affinity Map to organize and prioritize.
The columns were separated by categories:
Highlighter Visibility
Search Bar features
Location and Filter Bar
Focus Restaurant Highlighted
Ease of Use
General Statements
ITERATION
Added elements:
1. Feature Onboarding - Originally the onboarding was not designed but with testing, it was clear that it was a needed element. After a few iterations it was simplified to point out the options upon app opening.
2. Search Bar Adjustments - Many users attempted to use the search option with no support so a more realistic Search feature was added that will show the same icons and branding in the search along with screens for those searched for options. Most users did not know that searching does not bring up all businesses that are identified.
3. Adjust Map Focus Points - Most users were challenged because the map did not focus on the closest area and had too much real estate to navigate. The map was shrunk and focus points were created so the active restaurants were central
After
Before
Taking the feedback from user testing, I realized I could make the process smoother and easier for my users.
I reworked the Highlighter so it functions the same as other options in Google Maps along with moving it to the “Filter” bar. I originally didn’t do this because of my opinion, but the users continued to look there so it is the best location.
Branding updates and adjustments to the modals - Google Maps had a recent branding update so to continue with this project, I reset all elements to ensure it was up to date and effective.
Overall, these updates are in line with reducing the interaction cost goal of this project.
View the updated prototype here:
EXP. OUTCOME
If this was launched, what would I want the outcome to be?
The goal is more qualitative than quantitative, but there are some metrics that can be gathered.
Utilize metrics in Google to see how many users are utilizing the feature.
Look to metrics to see if businesses that have ownership listed receive more hits. This will increase user support for businesses owned by underrepresented communities.
See if ownership listing increases. This signifies an increase in business owners seeing value in users knowing this information.
TAKE AWAYS
What did I learn?
When working with a product, even one as popular as Google Maps, users don’t always know how it works to begin with.
No user realized that searching for “Black Owned” would not bring up businesses that are identified, only those with that phrase in the reviews.
You can never assume a user will interact with your product the same way you would.
I initially gave many options and features users didn’t need. If I focus on the MVP and getting the feature created, users would interact with what I built more efficiently.
Sticking with the simplest solution is usually best for the user.
I assumed that highlighting the business would need to be set up outside of filters, but anything that is used to narrow or support a search is associated with a filter.
Iteration is never-ending, that’s the fun part.