Travel Smart App UX/UI Design

Simplifying trip itinerary creation and exploring applications of AI.

Together with a team of two other designers, I developed the concept for Travel Smart—an app to reduce the time spent planning a trip and to store trip-related information in one central place. I led the planning and design of the “Trips” itinerary creation portion of the app. Over the course of ten weeks, we developed a concept, tested our concept with potential users, and created prototypes for three key user flows. After completing this 1.0 version, I developed concepts and an initial prototype for how AI could be incorporated into the experience.

ROLE
UX/UI Designer
UX Researcher
DATE
Dec 2023
TOOLS
Adobe XD
Mural
Keynote

What’s the biggest pain point in travel today?

Our team began by reflecting on the existing travel-related products and our own experience as travelers. This gave us a hypothesis—while plenty of apps existed for booking accommodations, flights, and restaurants or navigating around a new city; we spent hours before the trip trying building an itinerary or were left scrambling to find email confirmations of reservations when we needed them.

Are we the only ones?

Our next step was to see if others felt the same way. We talked to potential users about their recent travel experiences to find out how they planned their trips and how they used those plans while traveling. Our hypothesis was confirmed, our participants also described stress over finding trip related information on the go and juggling information spread between multiple apps as being top pain points in their travel experiences.

💡 Key insights:

Everyone plans differently.
Some people wanted to schedule their trips down to the minute, while others preferred to only decide major components in advance (like locations, flights, and accommodations) then leave room for spontaneity with daily activities.
What’s harder than planning for yourself? Planning with a group.
Adding travel companions means navigating different preferences, keeping track of what others have (or haven’t) booked, splitting costs, and sifting through group chats to try to coordinate.

Gathering everything we had learned so far, we arrived at our problem statement:

Problem Statement: Storing information in different places (i.e. Google Documents, email, notes app, etc.) makes trip planning time-consuming and accessing information on the go frustrating and stressful. Travel Smart was designed to reduce the amount of time spent planning a trip and to consolidate trip information in one easy-to-access place.

What can we do about it?

Taking the research we had performed with users, we developed our persona, Charlie, as well as a journey map of her trip planning experience without the Travel Smart app.

Narrowing In

Ideating around what we heard from participants, our persona, and the journey map, we coalesced around three main components for the app:

1) “Trips” itinerary aggregator*: a central place to build your trip plan solo or with friends, organized chronologically.
*I led this portion of the project.

2) “Wallet” digital ID and reservations repository: a place to quickly access reservations or safely store backups of important travel documents.

3) “Explore” activity search: a place to search for and quickly save activities, restaurants, and accommodations.

How should this work?

Before I jumped into wireframing, I needed to figure out what users would need to do to build an itinerary in the app. To do this, I created the flow diagram below.

From Low- to Mid-Fidelity Wireframes

Focusing on the flow of adding an itinerary item to an existing trip, I progressed the design of the “Trips” section through multiple rounds of wireframing and prototyping, increasing the fidelity as I went.

Usability Testing

Using the wireframes my teammates and I prepared, our group conducted usability testing with a total of six participants. To ensure consistency across our testing, we prepared and followed a script. After the tests, we met to discuss our findings and recorded them in an issue prioritization matrix. We used this matrix to determine what would be changed in the next design iteration.

Key Findings

In the trips section, we found that overall, participants were successful in completing the task without frustration. However, we did identify the following areas to be improved in the next iteration (illustrated to the right):

1. To create space for longer trip titles, I moved the icons indicating trip collaborators to the upper left-hand corner.

2. Several users were confused by the plus and pencil icons alone, representing add and edit options, and did not immediately notice these options on the screen. I therefore made these more prominent in the next iteration.

3. Based on feedback in other areas of the app, our team determined that “reservations” would be moved from the bottom navigation into the itinerary page, and “Saved” items would be moved from the itinerary page into the bottom navigation and renamed “Wishlists.”

Sr. Design Review

After implementing the changes identified during usability testing, we met with a senior designer to do a final design review and incorporated the feedback from that discussion into our last iteration. Below is a summary of what we discussed regarding the “Trips” section.

Key Findings

1. I consolidated and moved the buttons in the top-right corner to increase the size of tap targets.
IXD Heuristic: Error Prevention

2. I shaded in the itinerary items to emphasize that they are buttons that can be interacted with.
IXD Principle: Perceivability

3. We determined that for adding a flight to the itinerary, the ability to search by flight number made it unlikely that a user would choose to upload a ticket confirmation and that a step could be removed by eliminating this option.
IXD Heuristic: Match Between System and Real World / Flexibility and Efficiency of Use

Branding and Design System Development

To evoke the excitement of travel, we chose a high-contrast, energetic color scheme of teal and orange. We selected the Poppins font to create a clean, modern feel and incorporated several illustrations to add visual interest and personality to select pages.

To ensure consistency across our group in the final design, I developed a design system for our app based on the concept of atomic design.

Final Prototype

Applying the style guide I created, I arrived at my final set of wireframes and prototype showing the process of adding an itinerary item to an existing trip.

On the Horizon

After completing the initial round of design for the app, I began to explore how an emerging technology like AI could be incorporated to make the trip planning experience even easier. I brainstormed some prompts that users might want to ask an AI and selected three places within the app where the AI assistant could appear—on the home, explore, and itinerary pages.

I then created a set of wireframes showing an interaction with the chat assistant, where the user is seeking a dinner recommendation nearby.