Instaplan Travel App

Get more out of travel with personalized recommendations

Instaplan hero image

Overview

A travel app prototype that personalizes experiences for both impromptu and planned trips

Role

Member of a four-person team, user researcher, visual designer, tester

Tools

  • Balsamiq (wireframes),
  • Adobe illustrator (visual design)
  • InVision (prototyping)

Timeframe

6 weeks

Goals & Methods

The concept for Instaplan originated from a team member’s desire to create a better travel app for tourists to use in a new location. Through research, discovery, and testing, our goals narrowed to become: assisting users in finding satisfying experiences and quality recommendations when traveling, or planning a trip in advance. The methods used included:

Discovering the Best Parts of Travel

User Research

Each member of the team conducted 2-3 interviews with users that particularly enjoyed traveling. As a group we crafted interview questions aimed at uncovering:

What makes an ordinary trip into a great trip?

What is your number one priority for planning a trip?

What is your perception of existing digital and analog tools that assist with structuring travel?

User Insights

“I avoid crowds and seek out more remote places. I always prioritize my personal comfort.”

“I hate spending too much reading through reviews.”

“The feeling of self-sufficiency makes [travel] more pleasurable.”

“I like to experience the city as someone who really lives in that place. I want to find the inside scoop.”

“Too much structure makes me feel like I can’t enjoy my experience.”

“Sometimes I don’t feel that I plan enough. I worry about having regrets about my trip, but that usually doesn’t happen.”

Synthesizing Our Research

Behavior Mapping

We analyzed our research using a series of ranges to identify patterns amongst the users. These included whether a user was cost-conscious or convenience-conscious, preferred structured or unstructured time when traveling, or preferred to visit local spots or tourist destinations.

Patterns

Most users were open to new experiences and comfortable with foreign languages. They typically preferred a relaxed pace, and were comfortable with using technology for travel research. As a whole they tended toward conventional activities, and were more conscious of cost than convenience.

Differences

Users differed on how much they enjoyed tourist spots, unstructured time, and socializing during trips.

User behavior map with patterns identified

Building an Accurate Persona

Annie

The similarities that emerged from behavior mapping became the building blocks for our persona. The discrepancies became the travel preferences that we accounted for in our scenarios.

Annie Q persona quote and demographic information

Goals

  • Make efficient use of time when traveling
  • Find personal recommendations that will improve my trip
  • Make decisions based on cost

Behavior

  • Work necessitates travel 5-10 times per year
  • Also travels solo or with friends, often seeking a relaxed pace
  • A voracious reader who keeps up-to-date on current events and politics
  • Enjoys learning new languages to help orient herself in a foreign place
  • As a foodie, she prioritizes finding special places to eat
  • Curious by nature and willing to try new things, but she’s not very adventurous in her travel experiences

Scenarios

Our scenarios were based on two use cases:

  • Make the most of any free time during business travel
  • Maintain a relaxed, spontaneous experience while also planning ahead for personal travel

A Travel Buddy Who Knows You Best

As we created wireframes using Annie’s rough scenarios, we looked at other travel apps, including Tripomatic, Gogobot, Yelp, Trip Advisor, and Airbnb for interface and interaction inspiration. We determined that our app should differ from its competitors in two key ways.

Goal Setting

What differentiates Instaplan?

1. Interaction with the app should mimic the spontaneity that many users enjoy about travel. Instaplan should function just as well for finding novel activities as it does wandering around the user’s hometown.

2. Recommendations should feel personal, as if the user is getting them from a trusted friend. Suggestions would be personalized and based on a past experiences.

Assessing the competition

UI of travel app competition

Our exploration led us to wonder,

How might the system facilitate travel enjoyment by anticipating users’ needs?

Wireframing & Interaction Design

Proactive Suggestions

Anticipate travel obstacles such as weather and traffic

App wireframe showing weather alert

Mood-based Hints

Personalize recommendations while maintaining a feeling of spontaneity

App wireframe showing mood-based activity selections

Profile Quiz

Gamify the experience by assigning users a travel style

App wireframe showing profile quiz

Usability Insights

Iterating on our testing

As a team we conducted eight usability tests with regular iPhone users using high fidelity wireframes in a clickable prototype. We identified four problems during testing that we improved in our final flows.

Scenario 1: Home Screen First Impressions

Iconography distracted users

Most responded positively to the mood-based selections on the home screen, but the number of visuals and text crowded the screen. Users felt unsure of what to expect when tapping on the location icon.

Mobile load screen with tap icon hovering over "let's go" button, followed by home screen

Initial wireframe of launch and home screens

Final Screen Design: Balancing clarity and novelty

We simplified the design of the home screen to focus on the user’s current location and the buttons, simplifying the text and lessening visual clutter.

We made a controversial decision to make the home button a grid icon. During testing users were confused by a variety of icons. To familiarize the user with this unusual home screen we decided to introduce a novel symbol. Although initially inscrutable, with repeated use users would associate the grid icon with the square forms of the mood-based activity buttons.

User scenario

Annie launches Instaplan and is presented with the home screen. She can explore by selecting the hamburger menu to view her profile settings, tapping a mood to find an activity in her current location, or planning a trip in advance.

Mobile load screen with tap icon hovering over "let's go" button, followed by home screen

Scenario 2: Strengthening a Profile

Updating the profile daunted users

Discovering a quiz was frustrating for users both because they found the ranking system confusing, and because they didn’t know how long it would take.

Profile drawer followed by overlay quiz screen prompting user to rank their favorite artist, followed by overlay screen with artists ranked by preference

Wireframe iteration of a profile quiz

Final Flow: Improving Annie's Profile

We improved our final iteration by making the quiz optional and clearer. We gave information about the length of the quiz with a progress bar, and improved the payoff of completing the quiz by attributing a travel style to the user’s profile. The system would use the style to personalize travel recommendations.

User scenario

Annie has just installed the new Instaplan app and wants to create and personalize her profile. She is going to use this app frequently, so she wants to make this profile as detailed and helpful as possible, and then save all changes.

Scenario 3: Discovering an Activity in Your Current Location

Visual hierarchy confused users

The filter icon was not recognizable for most users, and seemed too prominent in the upper righthand corner.

The design of the results screen contributed to an overall crowded feeling with the locations, list of results, and pathway all competing for the user’s attention.

Home screen followed by results screen featuring a list of three results on the bottom and map on the top, followed by the same screen with Nichols House Museum selected

Wireframe iteration of searching for a local activity

Final Flow: Find an Activity Near Me Now

We improved our final iteration by grouping the search bar and the filtering function in the same location. We also changed the multiple results to a single slider at the bottom of the map. This kept the user focused on activities closest to them, and featured larger photographs of each location.

User scenario

Annie in downtown Boston and needs to find something to do that is close, convenient, and fits her interests. It’s currently raining and she is in the mood for an indoor activity.

Scenario 4: Plan A Trip Ahead of Time

Unfamiliar interactions unfocused users

Multiple empty boxes and days on the trip-planning screen confused users and prevented them from being able to successfully add an activity to their trip.

Search results page for "toren hotel", followed itinerary page, followed by search activities near you page

Wireframe iteration of adding items to an itinerary

Additional features overcomplicated flow

The distinction between the favorites and the add to plan icons was not apparent to users.

Pop-ups prompting user to make an additional selection confused users with unnecessary choices.

Search results for get cultured, followed by Rijksmuseum page, followed by Rijksmuseum page with add to Amsterdam trip pop-up window, followed by updated itinerary page

Wireframe iteration of adding an item to an itinerary

Final Flow: Plan a Trip in Advance

We simplified this final interaction by dynamically adding a new time slot to the end of the itinerary rather than pre-populating slots. We also eliminated the favorites option altogether in favor of an add to plan icon.

User scenario

Annie is planning a 5-day trip to Amsterdam. She’s staying at a hotel downtown and wants to find activities to do in that area. Though she is traveling alone, she is excited to try as many new foods and restaurants as possible, as well as see all the history and important landmarks that make Amsterdam so special.

Impact

Instaplan, unlike other travel apps, makes discovering new places efficient and personal without taking the serendipity and delight out of traveling to a new location.

Reflection

Having two focuses for the app (the current and advanced trip planning) made the interactions more complex. I would like explore the trip planning scenarios in more depth to ensure that our goal of creating a personalized, spontaneous experience carries through to the advanced trip-planning experience.

Improvement areas

  • Add hints to help users familiarize themselves with some of the novel icons, including the home screen icon and the add to trip plus icon.
  • Conduct a second round of usability testing to ensure that our edits streamlined each flow