TravelBoss

UX/UI
IxD

A collaboration-based itinerary building application with intuitive features that ensure a stress-free, hassle-free travel planning experience.

TravelBoss header image.

Initial research

To define the scope of a design intervention related to the modern-day stressors of travel planning, I conducted secondary research as well as semi-structured interviews with Gen Zers and Millennials who have traveled sometime in the past two years. The findings helped frame the problem statement that the TravelBoss app tackles.
Research statistics.
Interview quote 1.
Interview quote 2.
Interview quote 3.
Interview quote 4.
Interview quote 5.

Problem statement

Gen Zers and Millennials, who have a DIY attitude towards travel planning compared to older generations, face information overload and decision fatigue when creating itineraries for their getaways, causing stress, time lost to the process, and oftentimes cancelled trips.

Understanding users

While analyzing interview transcripts, I created an experience map of the typical actions, thoughts, and feelings of a person at each stage of the trip planning process in order to (1) empathize with potential users and (2) uncover potential solutions to the stated problem.
Experience mapping activity.
Persona
I created a persona based on my learnings from the in-depth interviews and experience map. This archetype of a potential user, with their goals, behaviors, expectations, and pain points related to travel planning, provided a framework for the design process, allowing me to understand what functions were crucial for the app and would bring the most benefit to such a user.
Persona details.
User scenario
Creating a user scenario provided me an even stronger understanding of how to utilize interaction design to serve the persona's needs as they move through the stages of the travel planning process using ideated functions of the TravelBoss app.
User scenario sticky notes.

App structure

Based on the above scenario, I mapped out a user flow for a more granular and extended view into the persona's tasks and decision-making as they directly relate to potential screens and functions of the app.
User Flow flow chart.
Information architecture
Combining my insights to this point, I created a chart of the primary navigational elements and subsequent information architecture of the TravelBoss app. Doing so helped determine the most logical layout and UI patterns to use to organize the app’s content during the wireframing stage.
Information architecture chart.

Wireframing a solution

I focused on wireframing the Explore, Trips, and Activity landing pages and their branches, keeping in mind the user scenario and flow. Below are the low- and high-fidelity mockups that I eventually developed into a working prototype.
Low-fidelity wireframes.
Explore
The Explore tab is designed to address the issue of people facing information overload and decision fatigue when creating travel itineraries. It consolidates the most important information people search for during the research stage of planning a trip. With location-based search, curated itineraries, popular content, experiences organized by category, photos and descriptions for suggested places, and travel tips/key things to know, users can make decisions about what to do on their vacations, when, and in what order with less effort and confusion.
High-fidelity wireframes of Explore tab.
High-fidelity wireframes of Trips tab.
Trips
The Trips tab provides users with tools to collaborate with their trip mates on building an itinerary. Here users can find both past and upcoming trips, the personalized itineraries for each trip both in list form and visualized on a map, as well as the saved places for each trip grouped by custom lists. The intuitive UI design allows users to easily add other users to a trip; jump to a specific date in the itinerary; edit the date, time, or notes for each place; view the travel times and distances between each place; toggle their saved places and personalized suggestions on the map; add places from the saved list directly to the itinerary; and export or share the final itinerary and its details.
Activity
The Activity tab eliminates the stress that often comes with multiple users making edits to a shared itinerary by providing real-time updates of the changes made within a trip and by whom. Users can filter recent activity by trip name for a more focused view as well as navigate to the specific change made in a specific trip by clicking on a notification.
High-fidelity wireframes of Activity tab.

Design system

As I increased the fidelity of my wireframes and prototyped them in Figma, I created a basic design system—a set of rules for the color, typography, layout grid, iconography, and interactive components I reused throughout the UI design process. Having these styles and assets outlined allowed for a seamless workflow while creating complete layouts for each app page.
Colors, typography, layout grid, and iconography.Component library.

Final prototype

The final prototype of the TravelBoss app follows the previously outlined user scenario of a persona with the goal of creating a shared itinerary before departing on their trip. The app's overall functionality and design considerations aim to meet the expectations and ease the frustrations of this persona by providing the necessary tools to create a travel plan in the least stressful, overwhelming, or time-consuming way.
VIEW PROTOTYPE

More works

Wasteless header image.

Wasteless

UX/UI
IxD
WISE Summit header image.

WISE Summit

BRAND
WEB DESIGN
SOCIAL
PRINT
SWAG
Underground Desi header image.

Underground Desi

WEB DESIGN
IxD