top of page
Iphone.png

Google
Maps Run

scroll

About 

I was asked to design a website for a travel venture. Through research, UX best practices and User testing I created a responsive website that would tap into a new way of traveling.

Task

With a total of 289 destinations around the world Zeit has created a safe and secure way to travel back in time to controlled and protected areas. Features like allowing travelers to access attractions and nearby cities with groups makes trips unforgettable. Zeit is the first company to sell time travel packages.

Background

01

About 

I have been tasked with adding a feature to google maps that allows users to use the app not only for directions but as well as a fitness tracker, tracking runs and letting users know when they need to leave to get to work on time.

Request

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. Founded in 2005 Google Maps makes about $4.5 billion in revenue and continually adapts to its environment to make it evermore competitive. 

Background

01

Deliverables

UX | Adding a feature

02

Track a users run

Create a user friendly safety feature

Allow user to save and store runs

Research

03

Competitor Analysis

Method

  • Research 4 direct running apps

  • Analyze strengths, weaknesses and target personas

Findings

  • Apps were similar in metrics they were tracking

  • Most interfaces were simple minus 2

  • All had some sort of safety feature somewhere in the app

Competitor Analysis Chart.jpg

User Interviews

Method

  • 5 participants

  • Late 20s - late 40s

  • Have used a running app before

  • Uncover how users discover and explore fitness tracking.

  • Determine what information users are looking for to inform their decision.

  • Understand pain points users encounter when researching and picking an app.​

Findings

  • 5 out of 5 participants said that accurate tracking of run was important

  • 5 out of 5 participants express the need for the feature to be simple

  • 3 out of 5 participants the difficulties in looking at there phone or device when exercising or running

Interview Script 

1-on-1 Interviews
 

GOOGLE MAPS.png

Above is the compiled notes with final conclusion found during the interview process

Define 

04

Empathy Map

Method

Created by Dave Gray as a collaborative tool, an empathy map is used to gain deeper insight into their customers. Much like a user persona, an empathy map can represent a group of users, such as a customer segment. I took my interview notes and broke down ever comment into doing, think & feeling, seeing, hearing, pains and gains. 

Findings

Doing and thinking & feeling were the most spoken for. Users wanted fluid booking site with less pain points while booking trips that allows them to be safe and experience new things. 

Full Empathy Map.png

Persona

To create the persona, I meshed the goals of the data i found in my competitive analysis as well as interviews and came up with two personas Brian & Heather. Brian is a successful business man who is pretty serious about his runs while Heather is more concerned with just getting through the workout ( and safety).

Persona.png
Persona2.png

Design

05

Sketches

These sketches are the base of the final product. They focused on what the user needed. I sketch out some rough low -fidelity wireframes which you can view below.

Scan.jpeg

Wireframes

Once sketches were finished I moved on to creating my ideas into Figma creating frames for each function. 

Screen Shot 2021-07-11 at 10.03.08 PM.png

High Fidelity Wireframes

These wireframes show the complete process from home screen to ending a run. I focused on simple design, ensuring design is interactive, buffer screens and lastly large target for CTAs

Frame 15.png

Prototyping

For this prototype I focused on Mike's main flow of booking a trip and signing up for a newsletter. Hover, active, and loading states were included to make sure this higher fidelity prototype felt real to the testers.

Screen Shot 2021-07-12 at 9.34.27 AM.png

Test

06

Usability Testing

Method

  • Moderated

  • 4 participants

    • Late 20s - Early 50s

    • Have or have not used a travel website before

Key Findings

  • Overall, All participants enjoyed the presentation of the addition to the app. They all felt like it was very cohesive and easy to use. Prototype swipe found difficult during prototype.

GOOGLE MAPS (1).png

Affinity Map

Method

An affinity map helps designers sort, prioritize, and rank our user testing feedback

Participants comments were divided by fundamental elements. 

29.png

Take Aways

06

Summary

Overall, the major key take away from working on this project that adding a single feature can truly alter how the app can function. We don't need to make grand changes to have grand results. Small changes after listening to users can make the biggest impact.

I really enjoyed sketching and prototyping for this project. I like having the power to spend time really thinking through what would the user need and make several iterations. In the end the client was happy and will continue refining design to then have it published. 

Next Steps

30.png
30.png

Iteration #2

Using the data gathered during the usability testing I added elements and shifted focused on not just a running feature but how to make running safe.

bottom of page