All projects

FEATURE
ADD ON

Feature mock up screens
PROJECT
Adding a feature to an existing app
ROLE
UX/UI Designer
DURATION
80+ hours
TOOLS
Figma, Google Doc, Google Sheets, Zoom, Whimsical, Maze

Background

Google Maps is a web mapping platform and consumer application offered by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets, real-time traffic conditions, and route planning for traveling by foot, car, air and public transportation.

PROBLem

The primary use case of Google Maps is for logistic reasons - how to get from point A to point B in the most efficient and fastest way. How might we encourage users of Google Maps to discover and explore easier? How might we develop a feature that allows users to navigate in a way that is different from other navigation apps? How might we enhance certain features that are already available to the user in Google Maps to make navigating and exploring easier?

challenge

Create an add-on feature to Google Maps that enhances the existing Google Maps app experience while adhering to Google's Material Design system to create a seamless experience.
View prototype
Collection of mock up screens
EMPATHIZE

Competitive Analysis

To begin research for Google Maps, it was important to understand the app's direct competitors in order to get a good understanding of their differences and why a user might turn to a competitor to solve problems that Google Maps doesn't solve for them.
Competitive analysis chart

KEY TAKEAWAYS

  • SIMILAR FEATURES: Competitors offer a fairly similar product, main differences arrise in UI, user flow, user’s goals.n-person classes are better for their mental health than a digital routine at home
  • SIMPLE IS BETTER:  How information is presented is very important, apps can feel cluttered and distract the user.
  • USER GOALS: The users intended goal will determine which app they will go to.
  • IMPROVEMENT: There’s room for improvement in a few areas.

USER INTERVIEWS

User interviews were conducted remotely to gain insight into the thoughts and personal experiences of using Google Maps and other navigation apps. The goal of user interviews in this early stage of research is to find out what users really want, need, and dislike in the process.

WANts and needs

  • Customization of a route is important
  • Simple is better - simple and clear UI is essential, apps that seem busy or cluttered are not preferred
  • Ability to search for stores, shops, restaurants, etc. through the app
  • ETA and being able to schedule or plan for future travel is important

Pain points

  • When searching for a store, information is not up to date
  • Not alerting user to why a route is being re-routed
  • Filter features aren’t relevant to walkers and bikers
  • 3D view on current apps can be confusing and often just look like blocks, don’t give user information about what buidlings look like etc.

The features I focused on would also let a user know why their route is being redirected, 3D view of map and route, and a customization option.

DEFINE

USER PERSONA

A user persona began to form for the ideal user of this Google Maps feature add-on. This is Elise, a 30 year old young professional that lives in New York. She’s always on the go and loves to explore new places.
User persona
IDEATE

SITE MAP

Using Whimsical, I created an app map for Google Maps, laying out screens that would be relevant to the my feature add-on, and where the feature could be implemented seamlessly. I've used yellow to highlight where the new feature would go.
App map

Integrating these additional features into the existing interface was important so that I could maintain the ease of use of the app for the user and present the new features in a seamless way.

USER FLOW

​Using the same tool, I created a user flow for all the actions a user could take to access the feature and its functions (search, save, add a route).
User Flow chart
View site map & user flow

Sketches & Wireframes

I began my design process by doing a sprint of sketches to cycle out as many ideas as possible by hand of how the additional feature might look.
Hand sketches of wireframes
DESIGN

High fidelity wireframes

Because the UI and design systems are already spelled out for me with the existing Google Maps app and Google's Material Design, I went straight to transforming my sketches into high fidelity wireframes.

With the wireframes ready to go, the next step was to test my assumptions for the user flows. I worked directly in the Figma file to create a click-through prototype with basic interactions/animations. Below are a few of my main screens.
Mock up of the Home screen
Mock up utilizing the custom route feature
customization of route mock up
Mock up of additional filter features screen
Mock up featuring custom route feature
Mock up featuring 3D view feature while en route
3D view feature utilized while en route
End of route/arrival utilizing 3D view feature
View prototype
TESTING

USABILITY TESTING

Testing was conducted remotely by 10 testers using maze.co app and zoom. I gave an overview of the project and explained the tasks to the testers, then observed their behavior to gather data. I intermittently asked questions and recorded comments made by each tester. I then had conversations with each tester after the tasks were completed to gain insight on their thoughts and feelings.

TASKS

  • Enter into 3D viewing mode from Explore page
  • Customize your route to Black Fox Coffee using filters
  • Customize your route to Black Fox Coffee using the edit route feature

FINDINGS

  • 100% completion rate of prototype
  • 80% agreed the tasks were quick and simple.
  • 2/10 mentioned that they would prefer a “filter” option rather than being labeled “route options”
  • 7/10 of testers mentioned excitement about these features
Usability test question screenshot
Usability test heat map of customization of route screen

Overall, participants were able to complete the assigned task and many particularly enjoyed viewing the prototype. Some of the users experienced confusion involving the prototype not being fully functional. Many expressed excitement over these features, but wanted to see more of how 3D view en route might actually work.

Priority revision matrix

I created a priority revision matrix to use as a visual reference of what needs improvement. Using data collected from usability testing I compiled notes into an affinity map and then categorized them by similarity of answers or struggles. From there I took the most common suggestions and pain points and organized them into a matrix to better understand my next steps.
Priority revisions chart

My immediate revisions would be to explore changing the 3D view button from a symbol to something that more closely ressembles a building. I would then update the “Route Options” to say “Filters” as many of my testers had confusion there. Secondary revision would include playing around with the sizing of the map in the 3d view while a user is en route to their destination.

CONCLUSION

TAKEAWAYS

During this project, I discovered the importance of listening to users rather than assuming a new feature will be successful. Through surveys and user interviews, I realized my initial ideas were not in line with what the users wanted or needed. Through listening, asking questions, and being open to go back to the drawing board, I discovered a feature that was worth exploring. I interviewed again, I tested, and if I had more time and resources I would continue to iterate on these features. user feedback was instrumental to the development of this project and I thoroughly enjoyed the process.
View prototype
Back to top
Image of three screens and the additional features on each of them