Travel Smart

This was a project done by a team of 3 UX Designers located in South Korea & The San Francisco Bay Area. Each of us worked on a specific service for the app (Wallet, Trips, and Explore), I was in charge of designing Explore.

Before

“I have so many confirmation emails. I can’t remember at which sites I booked reservations.”

During

“My friend has the Travel Smart app to organize all of our information and keep track of our plans.”

After

“All of our essential trip details are organized in one place. We can relax & enjoy ourselves!“

Charlie "The Busy Traveler"

28 • Single • Marketing Specialist • Denver, CO

“Because my job is demanding, I’d like to find enjoyable activities while traveling for work.”

James "The Organized Dad"

44 • Married • Operations Manager • Reston, VA

“Family trips are so fun but also expensive. I want to make sure we make the most of our time.”

Background

Travelers need a way to easily manage their trips because they quickly become overwhelmed while sorting through information from multiple sources in an attempt to build an organized itinerary & frustrated retrieving essential trip details while traveling.

Travel Smart was designed thinking of two main target audiences: Charlie, who represents individual travelers such as business executives, and James, who represents group travelers like families.

Trips

Explore

Wallet

Following the ideation concept testing, we created task flows that represented how we intended to solve the users’ critical problems, and identify touchpoints & future screens. At this point, we performed a major change: Wallet was split into Tickets and Reservations & Passes.

Below there is an example of a task flow for Explore (Get a Recommendation). From this task flow, 4 screens were identified: Explore Home Screen, Recommendations (by categories), Recommendations (in detail), and Recommendations (images). Each of these screens turned into a block wireframe, and finally, each block wireframe turned into a medium fidelity wireframe.

Design Process

We started our design process with a brainstorming session where 3 main services were defined: Trips (to manage trips and itineraries), Wallet (for travel documents), and Explore (to get travel recommendations). Once the services were defined, low fidelity sketches were created for each service as possible solutions to our problem statement. Then we transformed the sketches to ideation concepts that were tested with the help of target users.

For Trips, we found out that users liked the design concept, were interested in seeing past and upcoming trips, and wanted help with itinerary creation. For Explore, users loved the concept and wanted to get personalized recommendations. Finally, for Wallet, users wanted security and friendly interactions. However, it was confusing for them to know what to store here.

Research & Final Wireframes

After a round of usability testing, the medium fidelity wireframes were refined based on the users’ feedback. Among the changes were confirmation screens after performing actions (add, modify or delete items), cosmetic improvements (headers, highlight itinerary items, reposition of buttons, etc.), and filter enhancements for Explore.

There were three major changes that impacted the navigation menu. First, users were confused with the purpose of Reservations and Travel Documents. Our solution was to create Profile and move Travel Documents inside. Second, Reservations was removed from the navigation menu and added to the itinerary screen. Third, Favorites was removed from the Explore home screen and included to the navigation menu, and from this moment it was renamed Wishlist.

Finally, Ava The Intelligent Travel Assistant was integrated throughout Smart Travel to improve its functionality and user experience. Ava assists users with tasks such as optimizing travel itineraries, finding recommendations, manipulating travel documents, reservations or wishlist items, and answering possible travel questions the users might have.

Style Guide

Primary Colors

Secondary Colors

Design System

Typography

Illustrations

Atoms

Icons

Molecules

Navigation

Trips Card Tags

Drop-Down Lists

Trips Itinerary Single Entry

Pop-up List from Bottom Bar

Trips Itinerary Item Added Confirmation

Pop-up List from Bottom Bar

Form Fields

Buttons

Organisms

Status Bar

Navigation

Home

Trips

Working on this project was a stimulating challenge for our team. Not only there were 17 hours time difference between South Korea and USA, but we also worked remotely achieving successful results. In order to achieve this outcome, we implemented a design system that set the tone for the brand and helped us to reach visual consistency.

Travel Smart was designed to provide easy access to travel-related data in one place.

Prototype

The prototype was designed using Adobe XD. It showcases an intuitive and user-friendly interface, providing a seamless experience for users navigating through the app. With interactive elements, smooth transitions, and real-time feedback, the prototype effectively demonstrates Travel Smart’s core features.