Project Overview

Challenge

Apple Maps, a top navigation app, is fighting for market share with competitors Google Maps and Waze
Although these apps have rudimentary waypoint features, there is opportunity for Apple Maps to offer a better system for creating and planning trips with more than one stop

High Level Design Goals & Objectives

Design an interactive, comprehensive feature for planning and navigating car trips with multiple destinations

- After my research, this was further specified to a road trip feature -- read on to find out more!

Match the design language of Apple Maps' current UI and make the feature feel like a logical extension of the app

SCOPE

Mobile app design, matching existing branding

ROLE

End-to-end UX/UI designer, UX researcher

TOOLS

Sketch, Adobe Photoshop, Miro, InVision, Google Docs Suite

PROJECT DURATION

80 hours

TEAM

Individual with input from mentor and peers

PHASE I

Empathize

Goal: Gain a thorough understanding of the context of the project and the users within that context. This information will inform my entire design process and keep it human-centered.

Research

Research Goals

After considering what information might be useful for designing the feature, I constructed objectives for my research:

Gain a better understanding of the state of the navigation app market and its forecasted future
Find out what competitors are doing poorly and well, especially around trip planning
Collect data on users' current use of maps apps, with an emphasis on how they use them before and during trips with multiple waypoints
Understand users' goals, motivations, and pain points around the navigation apps they use and a potential trip planning feature

Market Research

I examined both the map app and domestic travel industries to build context for the problem and inform my design process. The major takeaways from my market research are included in my research synthesis.

Competitive Analysis

Primary Research

User Interviews

One of the best ways to understand users is to simply talk to them. I interviewed 5 people who use navigation apps to gather insights into their desires, frustrations, and general usage of the apps, and what they might like to see in a multi-stop planning feature.

I then transcribed each interview to help more easily identify important findngs and patterns.

PHASE II

Define

Goal: Extract insight from the data I'd collected about the users and context and use it to narrow the scope of the project to a discrete, meaningful challenge.

Research Synthesis

Affinity Diagram

I identified patterns in participants' answers by pulling every major sentiment from my 5 user interviews and sorting them into common themes.
‍
Using this diagram, along with my market research and competitive analysis, I created a list of the most vital conclusions, including:

Interviewees mostly used Google's search engine for finding things to do in an area, and used in-app features to find more minor destinations, mainly for mid-journey convenience stops: gas, food, rest stops
Google Maps users find the ordering of waypoints confusing
Users usually wanted to add only one or two extra stops during normal daily use, mainly making a pit stop coming to or from from work

Key Insight
Respondents were most receptive to using multiple waypoints in the specific context of recreational road trips. Due to this feedback, I began to consider making personalized recreational road trip-planning the main thrust of the feature and deprioritizing every-day trips with multiple stops.

User Personas

In order to keep the users' goals and pains at the forefront of the process, I created four provisional personas and one full persona profile, using data from my research to craft archetypes of key types of users.

By the end of Phase II, I'd decided narrow the focus of the feature to the primary function of planning and navigating recreational road trips, and include the secondary function of the less complicated task of planning regular every-day trips with multiple waypoints if time permitted.

PHASE III

Ideate

Goal: Using the information I've gathered through Phases I & II, conceptualize the functionality of the feature and generate basic layouts. During the ideation process, I aim to create a wide breadth of possible solutions and keep the ideas fast, light, and not too in-the-weeds.

Sitemap

As an essential, high-level roadmap, this diagram illustrates the basic flow of how a user will move through the feature, shows the new screens that will have to be built, and displays the app's page hierarchy.
‍
All shades of orange represent screens that are new or will need to be significantly modified in order to implement the feature. Blue pages are already part of the app and don't need any major changes.

A look into the process

I built this original sitemap early in the ideation process. After further thought and experimentation, I decided to base the Trips system off of the existing Guides system in Apple Maps. The complete reconceptualization, along with fixes for this diagram that functioned less like a map and more like a user flow, manifested in the final sitemap pictured above.

User Flow

Thinking through the navigation, I then built a user flow diagram to visualize and map out pathways users may take through the feature.

Task Flow

Narrowing the focus to a single path and adding more detail to the navigation to accomplish a specific series of tasks deepened my conceptualization and helped me make sure I wasn't missing any crucial details.
(As a partner piece to the User Flow above, it uses the same key.)

Storyboarding

I then created a storyboard that fleshed out my task flow even further. A special focus on the user's mindset, desires, and the reasoning behind her choices stimulated empathy for the user and forced me to think through each individual choice from a more grounded, realistic perspective.

Wireframing

Finally time to start designing layouts! Making my designs look and feel like a logical extension of the current Apple Maps UI was the most important goal here.

Low Fidelity Wireframes

I began by sketching out ideas on graph paper (the absolute BEST kind of paper, especially for any sort of geometric drawing). Using pen and paper gives me the freedom to try lots of ideas almost as quickly as I can think them up.

Lo-fi designs can also help de-risk investment of time, energy, and money into a project by identifying any issues early in the process.

Mid Fidelity Wireframes

Using Sketch, screenshots of Apple Maps from my phone as references, and some elements from an iOS UI kit, I built digital mid-fi screens that matched the app's existing design language and system down to the pixel. Some of these were modified clones of pages that already existed within the app, while others were completely new.

A look into the process

I designed numerous variations of the destination list, experimenting with different sizes, layouts, and combinations of children elements before settling on the final version, seen in my high fidelity mock ups in Phase IV below.

PHASE V

Test & Iterate

Prototype Testing

Using my Sketch prototype, I had 5 participants complete a flow of about 15 individual actions, followed by a few questions about pain points and whether or not specific functions in the feature behaved how they expected.

Key Insight
It's important to test prototypes on the device for which you're designing!
The prototype being usable only on a computer and not a smart phone left me questioning if some pain points, like finding where to optimize the trip, were due to disparities in how users interact with software on different types of devices.

Revisions

Reaching conclusions based on the results of the user testing, I identified common problem areas and iterated on the designs to improve these functions.

For example:

Multiple users had difficulty finding the "My Trips" page, so I added an extra, more obvious way to get to it.

There was no consensus about where in the trip itinerary a new stop should go when it is added, so I created a setting to change where new stops automatically sort to. I also moved the "Avoid" section up in the settings page since it would be used more often than the "Fuel" section.

Final Thoughts

I believe this project was a successful attempt at adding a new, intuitive, valuable feature to Apple Maps.
‍
I was very happy with the results of mirroring Apple Maps' current UI and think the feature would fit seamlessly into the app.
‍

If I had more time to continue, I would:

Pursue further testing, especially with the revised elements, preferably on a smart phone instead of a computer
Continue to iterate on designs based on analytics and new testing feedback
Expand on the original idea of just having multiple stops in an itinerary of a regular route, in addition to the road trip format

Project Overview

Contents