Google Maps Redesign
Envisioning new features that address customer safety and accessibility concerns.
UX Designer | Customer Experience
Customer Experience Design Challenge | May 2022
Real-life experiences paired with research can really open your eyes. That’s why for this personal development project, I chose to redesign Google Maps walking routes to include safety and accessibility elements. I referencedService Design Doingfor the journey map and used Figjam to construct it. The prototype was made with Figma and Adobe Illustrator.
When it comes to pedestrians Google Maps gives just enough information about how to get to a location — time-to-destination, instructions, a message to proceed with caution and an overview of the terrain. However, the app leaves out important details regarding the safety and accessibility of a route. Those details include:
- 1. How well lit is the route?
- 2. How populated is the route?
- 3. How accessible is the route?
Many products — like Google Maps — are initially designed for the masses and they leave people out, especially when it comes to safety or accessibility. Apps like Uber and Lyft have retroactively added some features that address safety concerns. I think Google Maps should join them in making a walking route more accessible and safe for people who use strollers, feel unsafe walking solo, use a wheelchair or a cane and people who are just in general unfamiliar with an area.
However, I didn’t feel like the emotion categories or the task category gave a holistic representation of the problem. This is why I added in the Additional Context category. These sticky notes detail the why behind creating new features and paint an even more detailed image of Laila’s journey. I think this customer journey map accurately shows the ways Google Maps is failing their users and the much needed improvements they could easily implement.
The amount of light available on a route is indicated by a light bulb with red representing poorly lit, orange for medium lighting and green for good lighting. To address accessibility issues along the route I used an orange triangle with an exclamation mark in the middle. This was a combination of two Google Material Symbols assembled together in Illustrator. The indicators for the amount of pedestrian traffic stay in line with both the app’s existing car traffic color scheme and the shape of walking route icons. Heavy pedestrian traffic is a red circle with opaque lines weighted at 700. Medium pedestrian traffic is an orange circle with opaque lines weighted at 500 and low pedestrian traffic is a green circle with opaque lines weighted at 300. These icons went through a few iterations in an effort to address color associations and accessibility.
When deciding on the color scheme of the icons I struggled with the colors being accessible to those who are colorblind. For brand familiarity reasons I didn’t feel that moving away from Google’s brand colors would be wise. With that in mind, I decided to use Illustrator to add visual texture with opaque lines over the circle icon for the pedestrian traffic indicators. As briefly mentioned above, another issue I ran in to with pedestrian traffic was deciding what colors would correspond to the three different traffic levels. Red is typically associated with bad and green with good. That color assignment works well with the light bulb icons where green is equivalent to well-lit because poor lighting is rarely a good thing. It was a little more confusing concerning pedestrian traffic. Context is important because in certain situations high pedestrian traffic is good and at times it is bad. The same can be said for low pedestrian traffic. Ultimately, after doing a bit of informal user research with my friends, I came to the conclusion that for continuity with the light bulbs it made the most sense to keep red as high and green as low.
Once I moved the designs over to Figma, it really started to come together. Through a combination of screenshots showing a route mapped out on the app, I began assembling what would become my final prototype. Much of this process was spent doing trial and error to learn what works and doesn’t work in Figma. ****IMAGE**** I also spent a lot of time learning more about Interactions, as pictured below.
Utilizing the On Drag and On Tap interactions allowed me to create a prototype with a flow very similar to the actual app. My solution created additional features that inform the customer of the three problem areas previously mentioned. The customer will now see the light bulb icon in red, orange or green with text about the lighting conditions beside it. This information will be displayed to the right of the route’s time and distance.
The route preview and the main map will have pedestrian traffic indicators. This is visualized through circles with differently weighted opaque lines. They are placed where the current app has blue circles.
The route preview and the main map will have pedestrian traffic indicators. This is visualized through circles with differently weighted opaque lines. They are placed where the current app has blue circles.
Accessibility Warnings, which can represent a closed sidewalk, lack of curb cuts or no walking path, are located on the map view and in the written directions section of the app. These appear as orange triangles with exclamation marks in the middle.
One of the parts I had to work hardest to achieve was the On Drag interaction with the menu. Through perseverance and using a YouTube video I was able to have the customer drag up the directions and then scroll through it.
Creating A Persona
My persona is representative of the 37% of adults who don’t like to walk alone. Laila Holmes is in a new, unfamiliar city trying to make the most of it by exploring trendy, local dining options. As a frequent user of Google Maps she feels the app should be able to assist her in the journey. But, as the customer journey map details she ends up feeling scared, anxious, mislead and unhappy.
Customer Journey Map
Customer Journey Map When creating my customer journey map, I decided the best way to communicate the importance of the new features was to show the app in it’s current state. I made this decision because seeing the customer’s struggles detailed encourages empathy towards solving their problems. Each step in the customer journey map is meant to pull the viewer in to relate to Laila’s experience. First, you see the actions and tasks associated with that specific portion of the journey which gives you a broad overview of how Google Maps works. The map details the emotions a customer experiences through adjectives as well as visually with emojis. The emojis were used because research has shown that humans respond to emojis the same way they would seeing a real human face.
However, I didn’t feel like the emotion categories or the task category gave a holistic representation of the problem. This is why I added in the Additional Context category. These sticky notes detail the why behind creating new features and paint an even more detailed image of Laila’s journey. I think this customer journey map accurately shows the ways Google Maps is failing their users and the much needed improvements they could easily implement.
Icons and Colors
One of the things I kept in mind while figuring out how to represent these new features is the customer’s familiarity with Google products and brand colors. In an effort to keep the customer’s cognitive load low, I chose to stick with the color schemes already in place on the app. Every icon is either red, orange or green. For the shapes of the icons I used Google's Material Symbols Library which meant each icon’s style fits in with the existing app design.
The amount of light available on a route is indicated by a light bulb with red representing poorly lit, orange for medium lighting and green for good lighting. To address accessibility issues along the route I used an orange triangle with an exclamation mark in the middle. This was a combination of two Google Material Symbols assembled together in Illustrator. The indicators for the amount of pedestrian traffic stay in line with both the app’s existing car traffic color scheme and the shape of walking route icons. Heavy pedestrian traffic is a red circle with opaque lines weighted at 700. Medium pedestrian traffic is an orange circle with opaque lines weighted at 500 and low pedestrian traffic is a green circle with opaque lines weighted at 300. These icons went through a few iterations in an effort to address color associations and accessibility.
When deciding on the color scheme of the icons I struggled with the colors being accessible to those who are colorblind. For brand familiarity reasons I didn’t feel that moving away from Google’s brand colors would be wise. With that in mind, I decided to use Illustrator to add visual texture with opaque lines over the circle icon for the pedestrian traffic indicators. As briefly mentioned above, another issue I ran in to with pedestrian traffic was deciding what colors would correspond to the three different traffic levels. Red is typically associated with bad and green with good. That color assignment works well with the light bulb icons where green is equivalent to well-lit because poor lighting is rarely a good thing. It was a little more confusing concerning pedestrian traffic. Context is important because in certain situations high pedestrian traffic is good and at times it is bad. The same can be said for low pedestrian traffic. Ultimately, after doing a bit of informal user research with my friends, I came to the conclusion that for continuity with the light bulbs it made the most sense to keep red as high and green as low.
Prototype
The thought and intentions behind how the prototype works were completely influenced by the customer journey map. The prototype’s design gives customers the safety and accessibility knowledge they need to make an informed walking route decision. This prototype began with paper, pen and a nice outline detailing the flow of Google Maps and where the new features would be located.
Once I moved the designs over to Figma, it really started to come together. Through a combination of screenshots showing a route mapped out on the app, I began assembling what would become my final prototype. Much of this process was spent doing trial and error to learn what works and doesn’t work in Figma. ****IMAGE**** I also spent a lot of time learning more about Interactions, as pictured below.
Utilizing the On Drag and On Tap interactions allowed me to create a prototype with a flow very similar to the actual app. My solution created additional features that inform the customer of the three problem areas previously mentioned. The customer will now see the light bulb icon in red, orange or green with text about the lighting conditions beside it. This information will be displayed to the right of the route’s time and distance.
The route preview and the main map will have pedestrian traffic indicators. This is visualized through circles with differently weighted opaque lines. They are placed where the current app has blue circles.
The route preview and the main map will have pedestrian traffic indicators. This is visualized through circles with differently weighted opaque lines. They are placed where the current app has blue circles.
Accessibility Warnings, which can represent a closed sidewalk, lack of curb cuts or no walking path, are located on the map view and in the written directions section of the app. These appear as orange triangles with exclamation marks in the middle.
One of the parts I had to work hardest to achieve was the On Drag interaction with the menu. Through perseverance and using a YouTube video I was able to have the customer drag up the directions and then scroll through it.
One of my top careers goals is to create inclusive designs and I know this customer experience redesign reaches that goal. Through further exploration of design tools Figma and Figjam, I created a thoughtful alternative for Google Maps that truly benefits everyone.
Creating a customer journey map for the first time was…a journey! It was an experience that took me outside of myself to try to deeply imagine others’ experiences and the importance of a product working to serve the customer.
In looking towards creating future iterations, I would include a rating feature at the end of a route that allowed you to give feedback — sent to and stored in an API - shared with other customers about the route the previous customer took. I would also be curious to see how Google Maps could use their new AR feature to implement these ideas beyond icons and colors.
To hear my presentation and view the prototype in action watch my presentation in the video below.