Google Maps
NY Subway Edition
Design case study
As a part of my Design Research course at NYU, I re-imagined the way Google Maps can be used not only on the ground but also under it.
Challenge: Identify a way to help busy New Yorkers who use Google Maps arrive at their intended location on time.
Solution: Create a different user flow in Google Maps and add helpful underground guidance and notification options.
Timeline: 7 weeks
Deliverables: App prototype & Presentation
Responsibilities: Prototyping, research, and presentation design
Role: UX Researcher & Designer
Tools: Figma, Miro board, Canva
Supervisors: Heidi Brant and David Derby
Problem Space
After living in NY for a year, I realized that I desperately wanted to change something about the subway experience. I started with an ecosystem map and mind map to understand this problem space a little better.
Halfway through doing the mind map, I recognized that the NY subway is just a huge problem. And I needed to focus on something specific that I could tackle in 7 weeks. Thus, I decided that although I couldn't redesign a whole subway system, I could make people's navigation underground easier.
Research planning
I created a research plan with the goal to learn:
-
How do users currently go about planning their trips?
-
What navigation apps they are using?
-
What are users' pain points while using them?
Target group: NY subway users, who also use mobile apps to plan their trips.
Methodology
-
Primary research included qualitative research in way of a total of 5 in-person interviews and one focus group with around 5 to 7 open-ended questions. Several close-ended questions were asked as the screening questions.
-
Secondary research involved scrutinizing the Google Maps app and its new at that time AR Live View feature.
Example questions
How do you know when to leave your home to catch the train?
How do you know what part of the train to board?
How do you find the right exit?
How do you feel about changing the trains?
If you could change one thing about the navigation apps, what would that be?
Persona
As a result of the interviews, I created the persona of my end-user to understand their needs and pain points better. This also allowed me to step out of my own expectations about who my target users are and design from their perspective.
Research results
All participants:
-
Used Google Maps
-
Didn't know when exactly to leave the house
-
Boarded particular train cars only when they were familiar with the route
-
Found the exit and entrance by trial and error
-
Were dissatisfied with the way Google Maps content was organized
-
Considered the sign ‘busy as it gets’ useless information, as "people in NY use train even if it’s busy"
-
Didn't know what "recommended route" means
-
Were on the wrong train and/or entered the wrong platform at least once in the past 6 months
-
Were unsure how to pin the frequent trip
Brainstorming
As a part of brainstorming, I did HMW exercise that helped me to find the solutions easier by rephrasing the problem. In the end, I came up with a single HMW statement that encompasses all the others.
How might we redesign Google Maps for NY subway users so that they arrive at their intended location on time?
How Might We...?
Ideation
Crazy 8
It was problematic to ideate, as I already had a mental model of Google Maps in my head which I have a habit of using quite frequently. The Crazy 8 exercise, hence, helped me to step out of the existing framework and really ideate novel ideas. For instance, I thought about using sound to help people find the right exit and make sure they don't miss their stop.
User flow
After primary research, I realized that although Google Maps have several features that may help people throughout their trip, very few people know about them. This includes trips with a notification option, pinning frequent trips, and using Live View for navigation.
To find a reason for that, I scrutinized the user flow that people go through if they want to have a trip with notifications. I realized that they have 2 options to achieve that:
-
Click a really small arrow icon when choosing a particular route.
-
Choose a route and then click on the "Start" button.
Both options weren't obvious enough for the users I interviewed. Hence, I changed the user flow in my prototype. When the user chooses the route, it will be with push notifications on. Then users can mute them off completely or make them audible if they wish.
Wireframes
Before prototyping in Figma, I sketched wireframes on paper to identify:
-
How to incorporate the modified user flow into Google Maps
-
Rearrange the elements based on their importance
-
Add new guiding information
This was the hardest step for me, as I had to think outside of the mental model of the app that existed in my head.
Hi-fi prototype
Main iterations
Choosing the trip screen
1. Adding a stop
Half of the participants didn't know that there was an option to add stops in Google Maps and suggested adding this feature to my prototype. So I decided to make this feature more obvious.
Three dots in the green frame originally led to options, such as route options, adding a stop, setting a reminder, and sharing directions. 'Options' menu located at the top bar also led to route options. I decided to combine these 2 components and put all the route options in the 'Option' menu. Instead of the dots, I used a plus sign to indicate adding a stop feature.
2. Public announcement
Although being very important, the message about wearing masks in the subway was taking up too much space. So, I used a small exclamation mark icon and positioned it at the top bar. I also put agency MTA information there, including the contact details that were missing in the app.
3. Arrow icon
An arrow icon was originally used to start the trip with notifications. However, it was too small for users to notice. I changed its appearance to attract a little bit more attention. Its function was also modified as per the new user flow. Now, if the user clicks on it, it would lead to the navigator screen, while clicking on the trip would lead to starting the trip with notifications on.
Trip information screen
1. Live View feature
Live View was a 'beta' feature that Google Maps was testing out so naturally, few people noticed it. When I asked participants what they think the feature was used for, they were confused by its name. So, to make it more noticeable I changed its color to blue. Also, I thought that the camera icon and common language could help with the confusion behind the feature's functionality.
2. Bottom bar
I didn't know if changing the location of the information from the bottom to the top would be beneficial and was scared that it wouldn't be comfortable for the users. Then, usability testing showed that users didn't notice that change, and it didn't raise any discomfort. That change, however, freed up a significant amount of space that can be viewed without pulling the window up.
3. Entrance
Information about the entrance and what signs to follow was located too close to each other which made it difficult to understand. Moreover, from the information organization perspective, entrance information was needed before one enters the subway. Hence, I put it right after the walking information.
4. Train icon
I added the train icon to show what car it's better to board so that people arrive closer to their exit. The first usability testing pointed out the fact that I need to show the direction of the train so that people can board the right train car. So, I used the 'Live View' AR feature to show it.
5. Deleted features
One participant told me "The New Yorker would still board the train even if it's 'as busy as it gets' because they need to be somewhere". Other participants expressed the same view, while also mentioning that it attracted too much attention due to the red color. The map-like button that provided the close-up view of the walking route and the question asking "What's it like to be on board" were never used by the participants. Thus, I deleted these elements.
Added features
The picture illustrates five features I added to the prototype:
1. Google Maps would ask if the user wants to pin the frequent route for easier access in the future. Right now you can pin the route by manually inputting the address, and pinning it on the route screen. The fact that there are these additional steps was the reason why the users I interviewed didn't know about the feature.
2. The alert notification that would warn the user if they accidentally took the wrong train and were going in the wrong direction. If the phone is locked, it would be a push notification.
3. The warning would notify the users if the station is one-way only so that they can be extra careful when entering the subway. All interviewed participants entered the wrong station by mistake at least once in the past year and had to pay the fare again. This warning could prevent the mistake.
4. Using the 'Live View' feature to show the direction of the train with AR technology. This could help people with boarding the right train cars. In addition, if they know what side of the tunnel to look at, it could add to their safety on the platform.
5. Using 'Live View' to help users navigate through the subway by showing the direction to their exit and other lines if they need to change the trains.
Prototype in action
Below, you can play with the prototype on your own. If the prototype doesn't load, please, click on this prototype link.
Takeaways
Future iterations
-
Provide an option to choose what notifications to receive.
-
Address weekend subway confusion in the app, as the weekend schedule differs from the usual one.
-
Attempt to use sound and vibration for guidance and notifications.
-
Conduct usability testing with at least 5 more users.
Bigger questions
-
The easier it is to use the subway, the more people use it. Are the app changes economically beneficial for the MTA?
-
Can it improve the train schedule by knowing how many people are traveling at what time?
-
Does it also help with the Covid-19 situation by decreasing the number of people waiting on the platform?
-
What's the measure of success for the changes?
-
Can the AR view be used in subways worldwide?