Wayfinder Travel App (iOS)

A few screens: log in, home, trips, route, explore, explore > en route, attraction

The Challenge  

Design a minimum viable product for a location-based native mobile app.

I created Wayfinder to make travel less stressful by helping people plan detailed trip itineraries.  Wayfinder takes into account users’ trip dates, weather, current hours, and transportation preferences to provide the most efficient way to see attractions; the app also provides recommendations for additional attractions along users’ routes that they may like.

Context

I conceived of and designed an iOS app, Wayfinder, to simplify trip planning as part of CareerFoundry’s UI design bootcamp. The project requirement was to create a location-based recommendation app informed by user research and personas. I designed an app related to one of my personal interests, travel, because I saw an opportunity to make trip planning simpler and faster.

 

Role/Services

Concept
Product Strategy
Iconography
Photography

UX/UI Design
Native Mobile App Design
User Research
Personas
Information Architecture
Moodboards
Wireframing
Prototyping
Mockups
User Testing    

Content Strategy
Copywriting

Time Frame

April–June, 2018


 
 

Minimum Viable Product Features

Easy Route Creation & Comparison

Wayfinder’s primary function is to help users create detailed itineraries for their trips by taking into account destinations, accommodations, trip dates, the weather and accurate opening hours, and users’ transportation and route preferences. Users receive a recommended route result with an option to start the route on Google Maps, save the route to the trip, edit the route, and view recommended attractions along their way. Every input is easily editable and users can view tradeoffs for time when evaluating additional recommended attractions.

 
 
 
 

Trip & Route Management

Users can manage their routes in the “Trips” section and save attractions they’re interested in a “Saved Attractions” section.

 
 
Trips and Saved Attractions.jpg
 
 

Location-Based Recommendations

In addition to offering recommendations along users’ routes, Wayfinder displays location-based recommendations on the home screen, explore section, and attraction detail screen. The photos featured in these mockups were ones I took around San Francisco.  

 
 
Recommendations.jpg
 
 

Explore & Save Attractions

Users can explore attractions by 13 filters: nearby, en route, popular, offbeat, or by 9 types of attractions—lodging, food, activities, cultural, nature, camping, landmarks, viewpoints, and events. The “En Route” and “Offbeat” categories distinguish Wayfinder’s filter options from other location-based recommendation apps, reflecting Wayfinder’s itinerary planning focus and addressing users’ desire to experience non-touristy things as observed through user research.

 
 
Explore and Save Attraction.jpg
 
 

Log In & Account

A simple sign in/account creation flow enables users to get started quickly. The account section provides standard controls and information.

 
 
Login and Account.jpg
 
 

UI Kit

Wayfinder’s user interface is characterized by crisp, clean lines, sharp corners, and the use of line and outline for a minimalist feel. The color palette includes light pink, bright blue, and bright green for an exciting, dynamic, and contemporary look. For typography, Infini’s lively personality for headings is complemented by Assistant’s legibility of body copy. Customized map interfaces edited with Mapbox reinforce Wayfinder’s color palette and clean interface.

 
 
Typography and Color.jpg
 
UI Elements.jpg
 
 

Process

User Research

To get a sense for whether a tool like Wayfinder would be valuable, I conducted user interviews with six potential members of my target audience who were of a variety of ages, demographics, and attitudes, to understand why and how people plan trips.

 
 
User research objectives and hypotheses.jpg
 
User Interview Script.jpg
 
 

These findings offered support for my hypotheses and gave me insight into the contexts in which Wayfinder could fit into people’s lives. The pain points that people shared informed the app’s features, content types, and attraction filters; examples include account creation, search and filters, sharing, and an offline mode.

 
 
User Interview Answer Sample.png
 
 

The user interviews offered many useful insights that I implemented in the app’s design.

The findings also informed the overall design goals including:  

  • Make comparison easy and tradeoffs clear.

  • Make research simple by offering relevant filters.

  • Provide one or at most two different routes so the user is not overwhelmed with choices, but keep things flexible.

  • Design for changing plans (dates of travel, adding and omitting anything).

  • Don’t make users remember information from screen to screen.

  • Provide all relevant info for users to make decisions quickly so they have more time to do other things.

 
 
User Interview Insights.jpg
 
 

Personas

To further synthesize and communicate my user research findings, I created three personas based on patterns and similarities among users, incorporating their interests, needs, goals, and demographics.

I used these personas to develop focus in my design and make solutions tailored to my audiences. Their titles, “Alice, the adventurer-explorer,” “Chris, the group trip planner,” and “Lucas, the planner-by-necessity,” reflect three different attitudes about trip planning covering both excitement and stress I observed in the user interviews.

 
 
 
 

User Stories & User Flow

I gathered requirements for a minimum viable product (MVP) by writing user stories through the perspectives of my personas to incorporate their most important needs, goals, and desired functionality. By mapping out user flows, I could see the big picture of how Wayfinder would work and how features would connect to help people plan trips. The minimum requirements I defined for Wayfinder were trip management, route management, route comparison, recommendations, search, attraction details, sharing, and account creation.

 
 
User Flow.jpg
 
 

Ideation

Inspiration & Moodboards

Photo-driven designs, positive travel-related quotes, mixed patterns and shapes, vibrant colors, and clear, modern typography inspired Wayfinder’s look and feel.

 
 
Inspiration.jpg
 
 

I created two different visual directions for Wayfinder based on different motivations for travel I observed in the user interviews: exploration and relaxation. One moodboard expressed an exciting, dynamic, and contemporary direction while the other conveyed an earthy, authentic, and calm direction. Ultimately, I chose the exciting, dynamic, and contemporary direction because I wanted Wayfinder to appeal to travelers’ desires to experience new things and get away from the mundane, and the colors offered more possibility for depicting a wide variety of destinations (not just nature).

 
 
 
 

Creation

Wireframing

Wayfinder was designed with a 12-column responsive grid to allow for the possibility of expanding to desktop and tablet applications. The wireframing process of creating low-, medium-, and high-fidelity wireframes allowed me to experiment with the overall structure early and quickly, identify missing pieces of content and functionality, and establish clear and effective hierarchy. I referred to the personas while refining the wireframes to ensure that the design met user needs.

 
 
Low-fidelity wireframes.png
Medium-fidelity wireframes.png
High-fidelity wireframes.png
 
 

The route creation functionality was one example that demonstrates how wireframing at multiple stages was critical to refining the app’s design. Originally, I had imagined a side-by-side display of route options for comparison, but between medium- and high-fidelity wireframing, I realized that this feature would be better implemented with a display of one editable route. One editable route would be easier to view on a small screen than two and could include tradeoffs of time and cost for users to adjust the route if they wanted. By simplifying the recommended route results, I ensured that Wayfinder would give users the point of view and simple decision making they expressed that they wanted in the user interviews.  

 
 
Route comparison wireframes.jpg
 
 

Outcomes

Feedback was an important part of designing Wayfinder. Conducting user interviews allowed me to pinpoint users’ real difficulties with travel planning and create an effective design to solve user problems. I conducted user testing with a high-fidelity prototype and made improvements such as increasing the size of touch targets and improving the contrast of the navigation bar active states. Getting others’ feedback allowed me to incorporate a variety of perspectives and ultimately make a better product. In total, the project took 70 hours, which was within CareerFoundry’s established completion time.

 
 
Final Product.jpg
 
 

If Wayfinder were developed and launched, I would measure the following key performance indicators to evaluate its success and find ways to improve the design: overall satisfaction (user testing and app store ratings), confidence in ability to use the product, task success rate (conversion), user error rate, active usage rate, and retention rate. These measures would offer a variety of quantitative and qualitative information about usability, conversion, usage, and engagement. With these KPIs, I could determine if Wayfinder performs as an enduring tool for users and if it could be expanded from a minimum viable product.