After studying Travelocity, an online travel agency app, and other competitor travel apps (such as Hoppr, Expedia, etc.) we identified the key weak points and set some goals to work on:

For the User Experience, we wanted to:

rework how prices are displayed upon choosing tickets
improve the "Account" section
add an itinerary and "things to pack" feature
add a wallet feature
create travel packages
add a map feature
create a "things to do" feature
add a COVID-19 travel restrictions feature
create a clear organizational hierarchy

For the User Interface, we wanted to:

increase the frequency of the logo
create a consistent color palette
redesign how hotels and flights are presented and compared
redesign the rating system
color code price comparisons
create an intuitive navigation bar pinned to the screen
remove search engine

LP - Research

2. Research

How can we improve these weak points?

At this step, we conducted research on how other travel apps functioned and which demographic made up the largest audience for these travel apps. We narrowed down our target audience to be students and families traveling on a tight budget and looking for a deal. With this in mind, we focused on highlighting cost and simplifying booking vacation-package deals.

The time pressure of the designathon limited the extent to which we were able to conduct user research, but through various articles and online data collection, we were able to create 3 unique personas.

Meet our personas and read their brief user stories:

After we gained a more comprehensive overview of who we were designing for, we started to look at Dribbbl (a web design inspiration platform) for creative inspiration. After discussing as a team which aspects of the website we wanted to focus on, we saved some designs that spoke to our goal for the redesign.

Here are some examples:

Screen Shot 2022-10-05 at 4.25.48 PM.png

Screen Shot 2022-10-05 at 4.26.02 PM.png

Screen Shot 2022-10-05 at 4.29.34 PM.png

LP - Ideation

3. Ideation

Let's start forming a theme board!

With lots of research, discussion, and inspiration to draw from, we were ready to create a theme board. We combined the app's existing colors and fonts into a theme board, highlighting the main colors that we want to keep consistent throughout the app as well as the logo.

Screen Shot 2022-10-05 at 4.35.42 PM.png

Up next, we started to sketch the wireframe. We wanted to map exactly which screens we would recreate and how each screen would flow to the next. Some of the wireframe was built on the app's existing web flow, while the new parts we wanted to integrate were created from scratch. The wireframe got super messy as I got excited jotting my ideas, but it gave a general idea of our thought process at the early stages.

LP - Design

4. Design

How can we create a design that meets our goals?

After spending a whole day planning brainstorming our design, we began to design with about 48 hours left before the deadline. We first created a low-fidelity mockup based on the wire frame we had created.

The low-fidelity mockup allowed us to refine our ideas and laid down the skeleton of design to which we will add details to. It also allowed us to plan the web flow of our design and decide which frames we should add or remove. Once we were satisfied, we began to design the high-fidelity mockup, the first detailed draft of our design with attention to color, font, and aesthetics. We also solidified how we wanted our added features to appear and work.

Screen Shot 2022-10-05 at 5.21.16 PM.png

View Figma

Click the button to view the entire Figma file of the low-fidelity and fidelity mockup.

We prototyped our design to show viewers how we wanted our frames to work together and present the overall web flow. This was a super important step for us because we had designed so many new frames - we needed a way to organize the different pathways and make sure our product was usable. Moreover, we wanted to make sure our added features improved the overall user experience of the app, rather than complicate it.

We divided the work by splitting up the screens based on the purpose of each frame. Then, we looked over each other's work and added comments and notes. After viewing each other's comments, we met up in person to discuss the necessary changes we needed to make to our design, as well as do a mental health check.

5. Feedback

How can we collaborate?

Once we felt satisfied with our design, we submitted our file to receive feedback by two UI/UX Designers in the industry. Needless to say, we received A LOT of feedback on how we could improve our design.

For the user experience, the designers loved our "travel package" idea, but thought the web flow of the feature itself needed revision. They also commented on the lack of clarity in the process of booking flights, and noted that color coding based on price could be an accessibility problem. However, they loved the added feature of the wallet and itinerary to really personalize the audience's trip.

For the user interface, the designers enjoyed the consistent color palette and branding throughout the design, but would have loved to see even more branding. They thought the images we added were helpful, but thought our use of drop-shadows and bolding excessive.

Overall, we were really grateful that the designers took time out of their day to look over our design, and were excited to work on a new and improved design. There is always something to learn!

LP- Feedback

LP -Solution

6. Solution

So what did we achieve?

We decided to focus on a target audience of students and families–people traveling on a tight budget looking for a deal. With this in mind, we focused on highlighting cost and simplifying booking vacation-package deals.

Thus, the search engine on the home page was removed as we concluded the target audience would use Travelocity to get the best discounted rates for their already existing travel plans. ‘Vacation Packages’ is now spotlighted, as it is the most useful budget-friendly function. For easier navigation, we revamped “Today’s Top Deals” to scroll horizontally to improve user experience–fitting everything into one screen.

Addressing user-experience and convenience, a map was added to the hotel page to allow users to conveniently locate and book hotel reservations. To cater to our economical audience, we redesigned the calendars to be color-coded by price: visually showcasing which days are most cost-friendly for their flight or stay. In addition, the Covid-19 section was redesigned to show updated guidelines for countries of their choosing.

A fourth section, ‘My Saves List,’ was added to the navigation bar to provide users an accessible and organized way to keep track of all their saved flight and hotel inquiries. This allows users to watch the price changes for their saved flight and hotel.

The ‘Trips’ section was changed to ‘My Bag.’ This section contains ‘Trips,’ ‘Wallet,’ ‘Itinerary,’ where users can find their confirmed bookings, boarding-passes, and trip itinerary respectively. This was created with the intent to help users–especially larger families and newbie travelers–stay organized during their vacation.

For the user interface, we incorporated the brand’s voice through their color-palette while still catering to our audience of families and young students with a bubbly but modern design. As compared to the original, the accents of orange and light blue help legibility and highlight important information.

Play with our live prototype!

Reflection

As this was all of our first experiences in a designathon, we made a lot of mistakes and had to rely on multiple sources for help. For me, this was a great lesson in teamwork under a time pressure and great practice using Figma.

Some things I would do differently next time:

conduct more extensive user research (though we did only have 72 hours)
focus more on planning the web flow
better plan new features so I don't get confused while designing
weigh less importance on fidelity mockups
consider accessibility options

I would love to chat anytime about this project or anything else related to UI/UX. Don't be a stranger!