GMAPS | My Site

© 2023 Jieyu

GOOGLE MAPS REDESIGN

OVERVIEW

Google Maps is a multilingual, web-based mapping service offered by Google launched on February 8 2005, that provides users with detailed information about geographical regions and sites around the world.

It offers a wide range of services including satellite imagery, aerial photography, street maps, street view (360° interactive panoramic views of streets), real-time traffic condition updates and also the feature of route planning and public transport information.

Google Maps for Android and iOS devices was released in September 2008 with the addition of GPS turn-by-turn navigation and dedicated parking assistance features.

An update in June 2012 added support for offline access to downloaded maps of certain regions and in 2019, the new live view feature allows users to view directions directly on the road with the use of augmented reality (AR).

As of 2020, there are about 1 billion people every month around the world who use Google Maps.

This was part of a grouped UI/UX module where we have to conduct user research and create a final working prototype.

End Product:
User Research, Heuristic Research, Low and High Fidelity Wireframes, Style Guide, Prototype

MEET THE TEAM, NOTU!

Jie Yu (Me)

UI/UX Designer

Pei Yee

Researcher/ Documenter

Nicole

Producer

My role: I was in charge of overlooking the wireframes and also created most of the high and low fidelity wireframes, mockups, as well as the style guide. I've also created the prototype animation and also helped with the user research.

THE PROBLEM

The main problem with Google Maps is that the pages are often too cluttered, presenting users with more information than they can digest which might be overwhelming for first-time users. Even long-time users might even find it hard to access the information they need, hence ruining the engagement for users. The goal of this project is to tackle this problem and help improve the experience of the users. Some of the key changes include:

Declutter pages so that it will not look too overwhelmed
Added "Suggest Route", "Choose Route", and "User Suggested Route" feature
Improved on the "Search Nearby" feature
Improved on experience of saving a location to favourites

THE PROCESS

We first did research on Google Maps app users to identify the heuristics. and did further analysis research on the current user experience into a set of customer experiences. We then started by identifying the current user task flow, from there we refined the task flow and proceeded to User Personas and User Empathy Map.

Current User Task Flow

New User Task Flow

User Personas

User Empathy Map

LOW FIDELITY

We then proceeded on to create two versions of low fidelity wireframes to conduct AB testing on which version that users prefer. After another round of user testing, we created a final low fidelity wireframe based on the feedback collected.

MID FIDELITY

Once we have tested out the low-fidelity wireframes, we came up with three tasks for the primary and secondary persona each respectively and created the mid-fidelity wireframes based on those task flows to make testing easier.

Primary persona tasks:

1. You’ve recently travelled from Dover Mrt Station (EW22) to Digipen Institute of Technology Singapore and you discovered a shortcut there. Submit your route as a suggestion.

2. You know that the bus stop near Ang Mo Kio Mrt Station (NS16) has a bus to Digipen Institute of Technology Singapore. Plan your route from Ang Mo Kio Mrt Station (NS16) to the destination using Bus Service 74.

3. You wish to try the newly added ‘User Suggested Routes’ feature, navigate your way from Dover Mrt Station (EW22) to Digipen Institute of Technology Singapore by walking.

Secondary persona tasks:

1. Save “Digipen Institute of Technology Singapore” from your recent locations as your favourite.

2. Save your current location, Dover Mrt Station (EW22) as your favourite. Then, save it into a custom list.

3. From the location of “Digipen Institute of Technology Singapore”, search for “Restaurants” nearby that location.

STYLE GUIDE

We then moved on to creating the style guide so at to make sure the high fidelity wireframes are of the same style and design for consistency.

HIGH FIDELITY

Finally, we move on to the high fidelity wireframes. We have redesigned most of the pages but still kept it looking like the original Google Maps so that users are still able to recognise it easily.