Overview

DURATION

June 2019 - August 2019

TEAM/ROLE

2 Designers, 3 Engineers / Product Designer

SKILLS

User Research, Product Thinking, User Experience Design, Visual Design, Interaction Design

TOOLS

Sketch, Figma, Origami Studio

Context

This summer, I got together with some friends to participate in the Amadeus “Hack the Journey” hack-a-thon. Our given challenge was to:

Come up with a technological solution for the travel + tourism industry that will have the ability to make some aspect of traveling experiences more personalized and frictionless for travelers.

As someone who loves to travel and has had a fair share of amazing travel experiences—some rockier than others—diving into this task was extremely intriguing to me. 

And thus, our team of 3 engineers, 1 other designer and myself ultimately came up with our travel solution: an app that acts as your personal guide and “travel assistant” for itinerary creation. Our app is called Toto.

Personalized Recommendations in Moments

Toto works its magic to give you recommendations of activities in the locations you’re planning to visit, and gives you the flexibility to tailor your itinerary further to your liking.

Easily Access Your Actionable Itinerary On-The-Go

Refer back to your itinerary to add to-do tasks, transportation plans, and more when you’re on the go.

📘 Keep reading to see how I got here! 📘

Initial Question

How can we make travel a more personalized and frictionless experience?

In order for us to start answering our main question, we first needed to understand how users plan their travels, and go about their trip. 

Research

Now that we had our initial questions as the foundation of our research, we were ready to start getting answers. We recruited 16 unique individuals who had demonstrated interest and experience in traveling to talk to them about their experiences. Our goals, through user research, were to: Gain a better grasp of how users travel overall and uncover pain points in making travel plans or traveling itself.

Affinity Diagram

We then mapped out our observations from user interviews in order to pinpoint the underlying themes and trends from research, so that we could narrow down the aspect of traveling that we wanted to tackle. Here is the digital version of our affinity diagram:

People Problem Statement

As we discussed the patterns from our affinity diagram and our resulting key findings, what really stood out to us was the fact that users seemed to struggle the most with trip-planning and preparation beforehand, specifically the itinerary creation process.

From our synthesized findings, we were able to create a single people problem statement that served as the premise of our solution:

How Might We’s Session 

Now that we had decided the main problem area that we wanted to tackle, it was time for us to think about our solution for trip-planning and itinerary creation. Thus, the five of us began our brainstorming session, which was a “How Might We” design sprint methodology. 

After brainstorming a ton of HMWs, we then proceeded to aggregate the ideas into categories of opportunity areas that made the most sense.

(Note: Due to our remote communication, we had to use online collaboration tools as an alternative to whiteboards, post-it notes, and markers for our brainstorming session.)

The Solution

A travel assistant app that creates personalized travel itineraries for users, to take the stress out of planning trips. This app will:

1. Make users more comfortable with visiting unfamiliar destinations.

2. Help travelers have unique and memorable experiences.

3. Make itinerary creation and access more streamlined and simple.

Exploring Our Solution

Market Research

As a way to gain insights into the user flow and content requirements, we looked into existing travel apps that offered similar features. The three closest competitors (closest in terms of purpose and content) that we explored were: TripAdvisor, Google Trips (now shut down), and Sygic Travel Trip Planner.

User Flows

Content Requirements

With our user flow, we were able to break down the experience into four significant steps:

1. Sign-Up & Onboarding

2. Set Up Trip

3. Create Itinerary for Trip

4. Actions on Itinerary

Initial Sketches

Medium Fidelities

Sign-Up & Onboarding

The first set of screens we created were for the sign-up and onboarding experience. After sign-up, the user will be prompted to take an onboarding quiz. For a pleasant user experience, we wanted to keep the onboarding experience short, so we decided to limit the questionnaire to just 4 questions that will help the algorithm learn about the user:

1. What are your interests? 

2. “Do you drink/smoke?”

3. “Rest or play?”

4. “What is your typical bed and wake-up time?”

After understanding how the experience would work, we had to decide how we wanted it to flow. We explored two different flows:

The reasoning behind Flow 1 was to gradually engage users through introducing them to the app, and what the onboarding questionnaire could do for them. The reasoning for Flow 2 was to increase the chance of users taking the quiz and reduce the number of steps. 

However, after discussing with users, we decided to go with Flow 1 due to the fact that it puts users in control of accessing this feature, and feels more comfortable. By making the option to take the onboarding questionnaire a bright banner, users will be drawn to take the questionnaire.

Set Up Trip

The next part of the experience was to create and set up a new trip. This requires the user to answer a few more questions about their travel plans, and sets it up nicely for the algorithm to do the rest of the work:

“Choose Destination” Explorations

We created three different explorations for the Choose Destinations page, as seen below. Users preferred Exploration A because its visual emphasis was more pleasing, and felt more “discovery-oriented” than Exploration B or C, which were both aimed to make users select multiple locations. According to users, this was not as clear in Exploration A right off the bat, but with the addition of drop shadows to the location buttons and a checkmark when a destination was selected, this interaction was made more clear in the high-fidelity screens.

Create Itineraries for Trip

The next set of screens we made were for the Create Itinerary experience: where Toto works its magic and builds an itinerary for a specific destination. 

“Discover Activities and Restaurants” Explorations

The discovery experience will recommend a substantial and diverse list of convenient activities at locations near them to discover.

We made several explorations for the discovery page. We experimented with versions that were more visual than others, and some that were more list-oriented than others, as seen below.

After discussing amongst ourselves and with users, we eliminated Exploration A because it lacked visually. Images are what we wanted to prioritize, as the photos offer a compelling connection to the activity, sight, or location, making users want to dive into the experience.

We also decided to eliminate the list layouts (Exploration B and Exploration D) because we wanted to encourage discovery, and not give an implicit hierarchy to any activity.

This left us with Exploration C and Exploration E. Users liked the visual emphasis of both explorations, but Exploration C isn’t a grid-layout, and hid some activities from view. Exploration E offered the most friendly grid-style layout for discovery by allowing more activities to appear in the fold.

Review and Finalize Itinerary

We wanted to give users flexibility and ownership over their generated itinerary. While auto-generation of the “starting template” is convenient, it removes a lot of connections between users and the itinerary. Not only do users want a perfectly-planned-out itinerary, but also the experience of crafting and perfecting it first-hand. As a result, we added many editing options for users to tailor their itinerary to their needs. We chose a list layout for the final schedule view to maximize readability and accessibility.

Actions on a Trip

With their newly created itinerary, the user can now access “to-do” items related to their upcoming trip on the home page. 

They can also learn more about the recommended transportation options for each location by clicking on the “View Options” button on their itinerary. By learning about and subsequently confirming their choice of transportation, they will be prepared on-the-go.

Finally, users can select an activity on their itinerary to view or edit the activity. For example, they have the option to add notes or to-do’s about an activity.

Final Experience

Walkthrough Video

Final Screen View

And here are the finalized versions of all the screens in the entire experience, from onboarding to creating and accessing a created itinerary.

Conclusion

Reflection & Takeaways

This was definitely one of the most in-depth, challenging yet rewarding projects I have tackled thus far! I learned so much from this project, from working with team members in completely different time zones, to realizing the difficulty of designing an entire app experience in two months. 

However, this project was incredibly eye-opening and fun, and pushed me to practice narrowing the scope of the solution (you can’t solve every problem, so focus on one!) and to instead focus my design process on making every aspect of the user experience and the user interface as simple, intuitive, and pleasant for users as possible.

Next Steps

We will continue to work on Toto in the hopes of bringing it to actual users in the future! In order to do so, some of our next steps include:

• Conducting more rounds of user testing to simplify and refine the experience

• Adding interactive maps, routes, and directions for on-the-go travel

• Making restaurant recommendations more streamlined