Travel Smart App
UX/UI Design
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. Working with a team of two other designers, I led the planning and design of the itinerary feature within the app.
Brainstorming and Ideation
Our team began by brainstorming how an app could help address pain points or unmet needs in the travel space. A combination of brainstorming and context scenario development, and concept testing led us to conclude that the most frustrating part of the travel experience was trying to organize and keep track of all of the information related to a trip. To solve this, we coalesced around three main concepts—an itinerary aggregator, digital ID repository, and a place to search for recommended activities, restaurants, and accommodations.
Design Development
To begin the design process, we first sought to narrow in on who our users were and to better understand their current travel experience and pain points. We developed our persona, Charlie, as well as a journey map of her planning experience without the Travel Smart app. From there, I built task flows for key actions within the “Trips” section of the app.
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.
