top of page
A hand holding iPhone with google maps AR camera Live view open in the subway

Google Maps

NY Subway Edition

Google Maps NY Subway Edition: Image

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.

Google Maps NY Subway Edition: Text

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

Google Maps NY Subway Edition: List

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.

Google Maps NY Subway Edition: Text
Mind Map of a subway trip in NY as a problem with white text on a blue background.
Google Maps NY Subway Edition: Image

Research planning

I created a research plan with the goal to learn:

  1. How do users currently go about planning their trips?

  2. What navigation apps they are using?

  3. What are users' pain points while using them?

Target group: NY subway users, who also use mobile apps to plan their trips.

Google Maps NY Subway Edition: Text

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.

Google Maps NY Subway Edition: Text

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?​

Google Maps NY Subway Edition: List

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.

Google Maps NY Subway Edition: Text
Persona of the end-user with identified pain points, goals, about, personality, and factors, .
Google Maps NY Subway Edition: Image

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

Google Maps NY Subway Edition: Text
Results of How Might We exercise written on orange post-its on the wooden table.

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...?

Google Maps NY Subway Edition: Text
Ideation of 8 ideas handwritten on a piece of white paper

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.

Google Maps NY Subway Edition: Text

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:

  1. Click a really small arrow icon when choosing a particular route.

  2. 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.

Google Maps NY Subway Edition: Text
User flow before my modifications and after to get a trip with notifications.
Google Maps NY Subway Edition: Image

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.

Google Maps NY Subway Edition: Text
Google Maps NY Subway Edition: Work

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.

Screenshots of choosing the trip on Google Maps app before and after the changes.
Google Maps NY Subway Edition: Image

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.

Google Maps NY Subway Edition: Image
Screenshots of trip information screens on Google Maps app before and after the changes.
Google Maps NY Subway Edition: Image

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.

Google Maps NY Subway Edition: HTML Embed

Takeaways

Google Maps NY Subway Edition: List

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?

bottom of page