top of page

UX/ UI Mobile App Design Project

Trippi

Brief

A travel planning mobile app that customizes and optimizes your itinerary.

My Role  

This is an individual project. I led the user research, strategy formulation, and design processes.

Timeline

2 Weeks

Tool

Figma

You actually need to plan a vacation before going on one.

We all love adventures. Before our big trip, we have all done these:

  • Typed “Best place to go in (city name) in 5 days” in Google

  • Opened 17 tabs or bookmarked 26 websites

  •  Figured out the distance between places on maps

As we visited more websites, we started seeing similarities between them. Finally, we came up with a list of our dream destinations. It was time to conduct research on their proximity, transportation options, restaurants nearby, opening time, weather... you name it.

Boom! You have spent 15 hours planning without even realizing it (and you are not done yet).

 

Problem

People spend too much time researching similar yet unorganized information.

User Research

To understand people’s preferences and behaviors when they plan a travel itinerary, I conducted user research:

  • 25 Questionnaires

  • 3 Interviews

#1  - Participants hope to visit popular destinations that match their interests and are close to other itinerary items.

The participants mainly determined the destinations based on:

  • Popularity (24)

  • Personal interest (20)

  • Proximity to other itinerary items (19)

👧🏻

“I usually refer to 3-5 blogs to find the overlapping content. That’s how I find out which spots are popular.”

👩🏻

“I am a huge foodie so I include great restaurants in most of my itineraries.”

Stat - 1.png
#2  - Route planning is the most challenging and time-consuming task.

13 out of 25 participants considered route planning as the most challenging task. In terms of time commitment, the participants spent the most time in planning the route (10) and determining destinations (7) when they create the travel itinerary.

👦🏻

“Planning the route is the most difficult because I have to cross-check between the blogs and Google map to figure out which places are close.”

Stat - 2.png
#3  - Participants prefer booking tickets and making dining reservations in advance.

16 out of 25 participants preferred getting everything ready before going on a trip, such as booking entry tickets, booking transportation tickets or making dining appointments.

👧🏻

“I feel safe when I book the tickets in advance so I know I can get into the place.”

👦🏻

“I usually search and make a reservation at restaurants early. Good restaurants are always full if you walk in.”

Stat - 3.png

Design Goals

Based on our user research, I developed the following design goals and ideated on how to achieve them:

Goal 1

To find popular destinations that match users’ interest

Use questionnaires to understand the user’s interests.

Customize itinerary from a pool of popular destinations.

Goal 2

To reduce research time spent on route planning

Group destinations based on geographical proximity.

Synchronize with Google map to calculate the optimized route.

Goal 3

To provide a seamless ticketing and dining reservation experience

Support ticket booking/dining reservation.

Facilitate booking and information retrieval on the same platform.

Meet Trippi

An all-in-one travel planning app that customizes your itinerary, optimizes route, and streamlines reservations.

Screenshot 2021-04-21 at 00.36.51.png

Wireframes

Customizing Itineraries 
Mid-Fi - 1.png
Booking Tickets & Making Dining Reservation
Mid-Fi - 2.png

Design Critique

After creating the mid-fidelity wireframes, I gathered feedback from 6 users with the following findings:

😍 They liked:

  • How the questionnaire helps customize the itinerary

  • How Trippi groups destinations that are close together

  • Being able to book tickets and restaurants in the same app

🤔 They proposed:

  • Displaying time required for different transportation methods

  • Showing a map for transportation will be helpful

  • Supporting flexibility in moving the destinations around (e.g. to a different time or day)

Iterations

In response to the feedback, I made the following changes in the high-fidelity mockups:

  • Modified the transportation display. Added the leaving time to minimize the users’ efforts in reverse-engineering the time information.

  • Users can view the time needed for different transportation and the map in the revamped design.


After evaluating the app design, I did not incorporate the function of modifying the itinerary. It will not create a pleasant user experience on a mobile interface due to the complexity involved. I will incorporate the feature if I move forward with the web version of Trippi in the future.
 

Screenshot 2021-04-21 at 00.44.46.png

Product Highlights

Customized Itinerary


Users can indicate their passion and interests by completing a short questionnaire that helps Trippi customize their itineraries. Trippi will come up with a list of recommended destinations, and the users can decide which items to be included in their itinerary.

Screenshot 2021-04-21 at 00.11.52.png
Screenshot 2021-04-21 at 00.12.00.png
Screenshot 2021-04-21 at 00.12.06.png
All-in-one route planning and reservation platform 

Trippi will plan the route based on the distance between places, and show the transportation means and duration needed.

Users can view the details of a destination (e.g. Alcatraz), or view restaurants close to the destination by clicking “Book Restaurant”

Route planning and commuting in a glance

Users can view the route by clicking the transportation button. They no longer have to go back and forth between their travel plans and Google Map to calculate the commuting time.

The itinerary will display the user’s preferred transportation mean they selected in the questionnaire. Users can view other transportation options when they view the map.

Screenshot 2021-04-21 at 00.12.58.png
Screenshot 2021-04-21 at 00.12.42.png
Screenshot 2021-04-21 at 00.12.47.png
Manage all reservations in a single tab

Users can retrieve and manage their ticketing and dining reservations in a single tab. They no longer have to search through their mailbox for multiple confirmation emails.

After clicking a reservation card (e.g. Alcatraz Day Tour), users will be able to retrieve the QR code for entry easily. They can also cancel the reservation easily.

bottom of page