Critique Google Maps
Interviewer: "I'd like for us to walk through Google Maps and to get your thoughts on the visual design, interaction design, what could be improved, etc. Let's reverse-engineer the app and try to figure out why they made the decisions they made."
Step 1: Set Context
The interviewer wants to get a sense for your visual and interaction design skills as well as your product thinking ability. Start by tackling product thinking. Talk about the company, what problem the app solves, or other contextual topics. It shows that you can think holistically and through a business lens.
The interviewer might ask
"Before we open up Google Maps, let's think about what the world was like before this app or company existed. What was the human problem, and how did this app solve it?"
How you might respond
Well the obvious and main problem Google Maps solves is getting directions from Point A to Point B. Before mobile apps like this existed, there were websites where you could print turn-by-turn directions and take them with you while you drove. And even before that there were physical maps which people kept in their glove compartment. Apps like Google Maps only became possible with the emergence of smart phones. They paired the earlier technology of maps, with turn-by-turn-directions, with geo-location—always knowing where you are in the world. The combination of these technologies uniquely solved the problem is a quick, reliable way.
The interviewer might ask
"What are some use cases for Google Maps?"
How you might respond
Personally I use it daily or weekly for a few reasons:
- I use it when I'm driving somewhere either because (a) I need directions to the location, or (b) I know where the place is but I want to check my estimated time of arrival, see if there's any traffic or if there is a better route.
- If I hear about a new restaurant, museum, etc. I look it up on Google Maps to learn more about it, see where it is, and tag it as a place I want to go to in the future.
💡 Always talk about use cases other than your own. It shows your ability as a designer to put yourself in your user's shoes and think about their needs.
But let's also talk about some other use cases:
- It seems that Google Maps has been trying to compete with Yelp by offering recommendations and allowing you to browse and discover, instead of just search. Based on what they know about you, including where you've been, what you've searched, and more, they can recommend new restaurants nearby. A use case for this might be that it's lunch time and I want to know what restaurants are nearby
- Thinking about a totally different user, restaurants and stores must use this as a tool to advertise their business, including photos, hours of operation, menus and more.
💡 If the interviewer doesn't guide you or instruct you what to do next, propose selecting a use case and walking through it.
Because the core problem we identified was getting from Point A to Point B, and because it's my main use case, I'd like to walk through that flow and see how well the design of the app solves that problem.
Step 2: Walk Through a Flow
To be more specific about the use case, let's say I have plans to meet up with a friend at the Starbucks near their house. I don't know the address but I know the neighborhood that my friend lives in.
Looking at the home screen, the map is the most dominant element which makes sense considering the main use case. There is a nice subtle animation to draw attention to my location at the center of the screen and and a continuous pulsing motion to indicate that it is tracking my location in real time. It gives me the sense that if I were to walk or drive, that dot will always represent exactly where I am on the map.
☝ Point out and talk about motion design to show you understand it's purpose.
The next thing that my eye is drawn to is the blue Floating Action Button (FAB) in the bottom right of the map. This is a common pattern in Material Design and is reserved for the most common action the user can take on the screen. I can't tell exactly what it will do based on just the icon, but knowing the main use case for this home screen, my guess is that it will help me find directions to where I want to go. Icons without labels can be problematic in terms of understandability. The issue here is that FABs don't typically have labels. Despite that, I think this design is acceptable because (a) tapping the FAB will probably teach me what I can do, and (b) the search bar at the top can also help me do the same thing.
☝ Point out common design patterns to show that you are well-versed in the different operating systems and their guidelines. More about Google's Material Design and Apple's Human Interface Guidelines.
Speaking of search, this is Google's bread and butter. It's not at all surprising to see it at the top and for it to be a main way to interact with and navigate the app. It also solves two use cases we identified: navigating from Point A to Point B, and learning more and saving new restaurants I've heard about.
First of all, the transition from the map to the search experience is nice. The search bar stays in the same place, the white background fades in and the rest of the screen transitions in from the top. In a previous project I had worked on we tested smoother transitions between screens and saw a 23% increase in conversion.
☝ Always try to include insights, learnings and comparisons from experiences on projects you've worked on. It shows that you can apply the learnings from one project to the next.
It's nice that the focus was already on the search field with the keyboard open when you got to the screen. It's a small thing that improves usability but is often overlooked. Instead of just showing you a blank search screen, they included potential search results, including your home and work as well as recent searches. I'm sure at some point they had data showing that 80% of search results fell within these three categories: home, work and recent searches. By surfacing them here they potentially reduced my need to type by 80%.
☝ Come up with hypotheses as to why the designer made certain decisions. Use data or user research insights as rationale.
Continuing with our use case, I type in Starbucks and am given a list of results. Again we're seeing the use of iconography without labels which leave me wondering what the difference is between all of these results. As a designer who is well-versed in iconography I can assume that the pin represents a specific Starbucks location, that the clock represents a Starbucks that I have searched or been to in the past, and that the search icon will do a broad search of businesses with this keyword. But the average user might not know what any of these icons represents. Luckily they have included a line of metadata with the address to help you identify the right location. If I were the designer I might have added a third row of metadata to help describe if this is somewhere you have been or searched recently, if it's a favorite or has been added to a list, etc.
The interviewer might ask
"Why do you think the designer didn't add the label as a third row?"
How you might respond
I do understand why they would want to keep the height of the rows to a minimum. I'm sure they have data showing that more rows leads to a higher click through rate, therefore reducing the height allows them to show more rows.
☝ Offer suggestions for improvement but always temper it by arguing the other side. It shows a balanced approach to design and an ability to make tradeoffs.
I would also add a row of text below the top search result explaining that it will search for all Starbucks in the area. It would help set expectations for what will happen next.
Because I don't know the address of the Starbucks I'm going to I'll tap the top "Starbucks" search result.
Again, it's a nice transition from the search screen to the results. The suggested results slide up, the map fades back in, the bottom sheet list view of results slides up and the search bar never moves.
At first glance I'm assuming that the list view in the bottom sheet and the pins on the map are representing the same results, but without anything visually tying them together it's impossible to tell which pin correlated with which list row. Perhaps there was some research showing a somewhat even split between people preferring to browse results on a map versus in a list view so they offer both options. this hypothesis is supported by how quick and easy it is to get to a full screen mode of either. By tapping or panning on the map the bottom sheet collapses, and by swiping up on the bottom sheet you get to a full-screen view. This makes me think they really aren't meant to be used together, but as two options to accomplish the same thing, and that is to identify the business or restaurant that you're looking for.
☝ You don't have to be right about your assumptions and hypotheses. You just need to back it up with rationale.
As for the list view, there seem to be a lot of different font variations, including size, color, style and line height. I would try to reduce and simplify the font styles as much as possible. For example, while they are all red, "Closed" is regular, while "Temporarily closed" is italicized, while "Services and hours may differ" is a larger font weight. And the "Takeout" row has more padding than the other metadata rows. I would try to tighten this up and maybe put together a style guide for this row pattern.
Looking at the map view, I understand why the pins have icons relating to the business and there is a name and description associated with each pin. These pin icons and descriptions help you differentiate when looking at multiple types of businesses. However, this Starbucks use case makes that pattern redundant and somewhat useless. It might be interesting to look at the data and see how often people see a map view like this where the pins, names and descriptions are identical. If it's a big enough use case I'd recommend replacing the pin icon and description with something slightly more useful.
Continuing on with our use case, let's assume I find the right Starbucks on the map and I tap on it.
Once again, there is a nice transition with the map centering on the business and a new bottom sheet sliding in with details about that business.
A lot of the same metadata has persisted from the list view on the search results, including the type of businesses, reviews, whether it's open and when it closes. The main things that have changed is the time it will take me to get there and there are more prominent actions. I'd guess the reason for showing more information and actions is that by tapping on the business the user is showing more intent that they want to go there.
The actions take the shape of pills in a horizontally scrolling section. The scroll affordance is made clear by the fact that you can see one of the pills flowing off the screen.
Unlike most buttons so far, these have labels which make them more understandable. The problem is that I'm sure a lot of people don't understand the difference between "Directions" and "Start". Because I use this app a lot I know that "Directions" includes an additional step which allows you to view and select alternate routes and change your mode of transportation. Whereas start chooses a mode of transportation and a route and jumps straight to navigation.
I have to assume that since they include "Start" as the second call-to-action, they must have data or research showing this is a major use case. Yet, because they put more emphasis on "Directions" as a primary call-to-action, they must think that looking at the directions before navigating is a bigger use case.
Finally, since I'm meeting my friend at Starbucks, let's navigate there!
Tapping "Start" animates nicely into navigation mode. The route gets added and the map zooms and rotates to focus on your location and the next turn.
The interviewer might ask
"The visual design of this screen is a bit different than the rest of the app. Why is that?"
How you might respond
Yeah it's almost like a totally different mode. Thinking about the user's context, they are likely getting into their car and ready to drive. With that in mind, their attention should be much more on the road. With little attention on the app, the user should be able to get information at a glance. To achieve that, they have made a few subtle visual design changes. The fonts and icons are larger for improved legibility, and the header and bottom sheet are set in from the sides instead of the full width of the screen. My assumption is that this draws more focus to the map and also makes the header and bottom sheet more interactive (swiping the bottom sheet up shows more options and swiping the header left shows the next turn direction).
Step 3: Evaluate The Flow
The interviewer might ask
"You mentioned the problem at the beginning of needing to get from Point A to Point B. How well does this flow solve that problem?"
💡 As you sum things up be sure to incorporate thoughts on interaction design, visual design, navigation, usability issues, etc.
How you might respond
Overall I think it does a great job:
- The transitions throughout the app make it feel like one fluid flow instead of multiple screens. There is a certain cognitive load associated with screen transitions; the user has to re-orient themselves to the new screen. The transitions in Google Maps keep elements persistent while other animate in, overall reducing the cognitive load.
- The consistent use of Material Design standards helps users easily navigate and take action.
- It also balances the ability to support multiple new use cases while not complicating the primary use case. As we saw, the search bar was a natural place to begin the use case of navigating, but it's also a great way to search for new restaurants or locations. Similarly, the business details bottom sheet focuses on the primary use case of navigation but also supports browsing with reviews and other metadata.
Some potential areas for improvement would be:
- To add clarity to actions and experiences that are currently trying to convey meaning through iconography. For example we saw that the search experience used a lot of iconography but it wasn't always clear what meaning they were trying to convey. Adding labels and context would improve comprehension.
- To better support and add value to certain edge cases (e.g. the redundant icons and descriptions when searching a chain restaurant or business like Starbucks).
- To reduce the number of font style variants. As we saw with the business rows in the search results bottom sheet, there were a lot of different font styles. When something, in this case text about a business being closed, looks the same everywhere, it's easy for the user to quickly recognize it and know its meaning. When it looks slightly different in some cases it takes more attention for the user to understand.
Step 4: Evaluate the Business
The interviewer might ask
"How does this app or company make money? What's the business model? What metrics do you think they care about?"
How you might respond
A few potential business models might include:
- User data: Google Maps fits well into the ecosystem of Google's search products. It is a utility app that people receive value from, and in exchange Google collects search and behavioral data that can be used to improve their ads targeting business.
- Licensing: Many apps and company use maps and license them from companies Google and Apple. Maintaining a strong maps product could lead to more licensing clients.
- Referral fees: Google Maps has or could integrate with third party services like Uber, Lyft, Grubhub and more to help their users get rides to their destinations and order from their favorite restaurants. An additional source of revenue could be charging those companies referral fees for each Google Maps user who clicks through to use a third party service.
In terms of business metrics that Google might be tracking or goal themselves on, a few might be:
- Active Users: Whether it's daily, weekly, or monthly, active users is always a good metric to track the health of a product. It is often a prerequisite to other metrics, because sufficient traffic is needed to gain statistical significance on other metrics.
- Meaningful Actions: This can mean different things for different applications. For Google Maps it could be number of searches or actions on the business pages including orders placed, navigations started, etc.