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

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.

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


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.
Wireframes
Once sketches were finished I moved on to creating my ideas into Figma creating frames for each function.

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

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.

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.
.png)
Affinity Map
Method
An affinity map helps designers sort, prioritize, and rank our user testing feedback
Participants comments were divided by fundamental elements.

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


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.