At a Glance

Context

In April 2022, I had to opportunity to compete in the SBCL (UCSB) PiXEL Designathon with 2 other designers. This was an annual design-athon at a collegiate level where more than 120 college students in the US participated.

Traveling during the post-pandemic era

With countries and cities slowly reopening their borders, students and families are thinking about planning memorable senior trips, study abroad programs, or family vacations. It probably has been more than one or two years since anyone last traveled for entertainment reasons. Thus, my team and I were prompted to create a travel planning desktop app that promotes democracy and usability.

"Your challenge is to create a desktop app to democratize the trip decisions, make trip planning a collaborative experience, and streamline the process from storing flight information, to packing lists, to itinerary planning and anything in between."

- SBCL 2022 Designathon Prompt

The Problem

How might we streamline the group trip planning process?

Even with the gradually opening borders, there are still many restrictions and paperwork required to enter places. Not only so, many questions remain, such as:

What are some other physical requirements and limitations for travel?
How can we create an intuitive and effective trip planning process?
How can we guide users to plan the trip as a group?

Taking the Deep Dive

Target users

From interpreting the prompt, we decided to create a product with the target user of young groups of friends (ages 18-30) in mind. Although we did not conduct in-depth user research due to the time crunch, we hypothesized that our target users, mainly being young people traveling in groups, would care more about budgeting than other age groups, especially coordinating budgets with multiple users to eventually decide on the itinerary. This was one of the most important aspects we kept in mind during our design process.

Scoping the market

To get an understanding of what was on the market, we compared 3 different trip planning platforms: Wonderlog, Roadtrippers, and Inspirock. They all have different types of trips that they target, so we focused on analyzing their features, usability, and user friendliness in a simple pros and cons analysis. We wanted to understand what features are the most crucial in travel apps and what other value we as designers can add to the overall user experience.

How this helped us start our design process

Based on the market research, we found that some of the best features to include in a group traveling app were:

distance and timing estimates
customization on trip planning and budgeting
group voting system
reasonable recommendations for food and sites
checklist features
easy booking

We want to design to ensure...

Building the Foundation

Experience Design

Design Goals

At a basic level, the app should have four main functions:

Input all the information they have on hand, including tickets for transportation and/or activities, housing and dining reservations, etc.
Receive recommendations and suggestions based on the information they have inputed and the location they are going. This can include from activity suggestions to reminders for required documents.
Collaborate with everyone in their group and make decisions together, so that means shared "filed" and a way for them to vote and voice opinions on certain travel decisions.
See a generated itinerary based on everything above, and more.

User Flow

To get a sense of how the app functions, we created a simple user flow to organize the order of how information would get inputted by the users and to also make sure that we are covering all the bases.

Product Concept

Developing welcoming and trust-worthy visuals and copy

Going on a trip starts at planning, so creating a visual design that is welcoming and friendly is important. We want to elicit trust from the target users while still making it fun for young users to want to use it. We gathered the below visuals as inspiration.

Putting It All Together

Initial Ideation

Using mid-fi wireframes to block out our ideas

Before creating the final prototype, we first used mid fidelity wireframes to block out some of our initial ideas and to make sure that our user flow makes sense. You will notice that there will be a lot more features in the final prototype section because there were a lot of "last minute" moments during the design-athon. We decided to not block out the entire app in the lo/mid-fi stage to save time.

1. Providing guidance for users in the planning process

We wanted the app to guide the users through the process of trip planning to eliminate any stress they might experience. With the initial step-by-step walk through to fill in information the travelers might already have on hand, such as hotel or plane ticket bookings or specific dining reservations, they can now relax and let the app remember the details for them so that they can use their energy to plan for the fun things.

2. Giving users a jump start

To engage with the users and get their creative juices flowing, we decided to help them through the brainstorming process by givng them recommendations and allowing them to add them to thier list of locations or activities that they might want to do.

This is partially inspired by Google Map. Althought Google Map mainly uses users' personal data and past searches to provide suggestions, we still thought it would be a good feature to have in a travel app (but instead, it will be based on their travel destination and tourist sight/restaurant popularity in the area) because it gives the users a jump start to plan or their trip and also gives them an idea of what's out there.

3. Keeping everyone's expectations on the same page to avoid possible conflicts.

The users also get the chance to input their budget for each category in this spread sheet. We understood that budgeting is especially important in group trip planning, no matter if it is a friend or a family group. We want to keep everyone accountable and to make sure everyone voices are heard within the group.

Branding

Since this Designathon is focused towards product and UI/UX design, we didn't put too much time into creating our branding. So we arrived at "TRIPPED" almost incidentally. One of the three of us blurted it out at some point and we just thought it was the perfect name. Because you know, you might trip when you travel (as in falling face forward with a ruined ice-cream on your white t-shirt) and also you are going on a trip. ANYWAYS, you get what we're going for here. (right? Right??)

In the same fashion, we also decided to use this as our logo due to its resemblance to both a luggage and a train.

Design System

We wanted our interface to look modern and clean, so we kept the color palette pretty simple and neutral, as well as our typography.

Final Prototype

In the final prototype, more features were designed to make this app more comprehensive with more user needs and pain points taken into account, such as a multi-view itinerary, tutorial, voting system, and more!

1. Taking care of users with convinience: Multi-view itinerary & Checklists

The itinerary section was one of the biggest challenges we faced when designing, especially with the drag and drop feature. We wanted an itinerary that fits multiple scenarios and needs while keeping the UI common enough that users don't feel stumped when using it.

Users are led to the itinerary page upon inputting all the information and brainstorming. They can toggle through different views: Timeline vs Calendar and Gallery vs Map views. They can also revisit their budget and access their checklists. TRIPPED will provide some basic checklist items such as checking passport expiration date and getting a visa, and the users can make their own packing list and their tickets/reservations list. They can also access previous sections to fill in any gaps, such as doing more brainstorming in the explore section or fill in reservations in that page.

Guiding the users to ensure they know how to navigate the Itinerary Page

To make sure the users know how to navigate the itinerary and use it to its full potential, we included a tutorial to help them get familiar with the app. If they ever need a refresher, they can simply click on the question mark icon to restart the tutorial.

Providing guidance & transparency for users in the planning process: Onboarding

1. Transportation

When landing on TRIPPED, the users can choose to continue planning an existing trip or start a new one. TRIPPED will guide the users through the process of building an itinerary, starting with adding trip-mates and selecting their major their mode of transportation.

2. Making reservations & Budgeting

The next step is to add any reservations and bookings to the itinerary, such as hotel and restaurant reservations, and the person in charge will also be shown for transparency purposes. Users can also add to a shared budget, with initials presented for the person that added the item.

Inspire users: recommendations and voting system

Here the users can look at some suggestions and recommendations by TRIPPED based on their location and budget and subsequently add them to their itinerary. They can also "like" a certain activity/location/restaurant to show their interest to the rest of the group, and in turn the group can also see who is in favor of certain to evaluate their plans. We included this to emphasize the collaboration aspect of the app, where members of the group can vote on certain activities.

Results & Outcome

We placed 2nd!

After a grueling 72 hours, we finished out project and won second place! We received very good feedback and comments from the judges. One of our most popular features was the itinerary page where we had multiple views that consolidate the essentials of the trip. It provided something familiar that most users have used before but also innovation that was able to bridge the gap between different features into one. We had a lot of fun designing that page as well! The way I felt when I saw how everything came together at the final stage in the itinerary page is how I wanted the users to feel going through TRIPPED as they see their trip coming together.

"'TRIPPED' is an amazing resource for anyone looking to set up their trip. Your experience around timeline vs calendar and gallery vs map views is really innovative!"

- Judge 1 @ SBCL 2022 Designathon

Takeaways

Designing an app with complex data entry points is tricky!

It seemed simple when we first saw the prompt, but as we kept going we realized how complex the solution can be to designing a travel app, especially one that prioritizes democracy and collaboration. We had to learn to take into account of not only one user but multiple users at the same time, which we took inspiration from social media apps, as well as all the necessary information and requirements that go into trip planning and going to a foreign country (which also made me appreciate my parents for planning trips for me as a child a lot more ).

Some challenges...

When creating the UI for the brainstorming and itinerary pages, we had some blockers with using Figma to present the way we want the features to interact. I had to learn a lot of new Figma skills on the spot, such as creating drop down menus and drag and drop features, neither of which were already-existing functions on Figma so we had to work around that and find creative solutions to create the animation and behavior we wanted.

What did I learn?

This had been my first Designathon. I wouldn't say that it was perfect but I'm very proud of what I accomplished during these short 3 days. This is not only because we won 2nd place, but also because I had learned so much more about the UX design process as well as so much of the tips and tricks of prototyping with Figma, namely using variants to create fluent components.

What would I do differently & how can I improve?

If I had more time, I would pay more attention to the details of our designs. We, along with the judges, have reflected that some of our spacing and typography were not very consistent. From a UI standpoint, focusing on those could help us round out the experience a little more.

If I had another chance to design this, I would make the flow at the beginning stages of the process feel less like a "quiz." There is a lot that goes into trip planning and we thought at the time that structuring this way was the best way to make sure that the users can follow along and not have to figure everything out themselves. But we also don't want them to feel stressed with the "quiz-like" survey they have to go through to get to the itinerary. Perhaps we could have provided a blank itinerary template for the users to fill out. Nevertheless, this will definitely be something that I keep in mind in my future projects and is a challenge that I hope to tackle soon!

Next Steps

So what's next?

"If you ever build this for real, please let me know!"