Up Next

A responsive website provides travelers booking service for excursions and experiences.

Up Next is an excursion booking website that provides the best travel experiences for travelers to compare and book. Here people can get the best view at the best time with professional local guidance.

My Role
User Research
UX Design
Branding
UI Design
Prototyping
Usability Test
Duration
80+ hours / 2 weeks (Independent project)
Tools
Figma
Adobe Photoshop
Product Type
Travel, E-commerce

Discover & Define

On-the-fly excursion booking

Think about when you are on a business trip and you want to find an activity to kill some free time. Or when you are going on a long trip, it can be exhausting to plan and coordinate a full schedule. Thus the idea of an excursion booking website came. Booking short tours and well planned activities led by local guides to make sure you achieve your best travel experience without worrying about transportation and itinerary. These travel experiences usually do not last more than a day, so travelers would still have full control of their overall trip.

The scope

Google summarized on 4 stages of the travel decision-making process: dreaming, planning, booking, and experiencing. Travel booking service providers need to be present and useful across all travel stages. Given the timeframe of this project, I decided to focus only on the Booking stage to make sure my customers have a wonderful booking experience.

The competitors

Nowadays most of travel booking websites have a section for booking excursions called “Things to do”, but there are few online agencies that focus solely on excursions. I also found small local tour companies tend to not have very professional websites. I analyzed the strengths and weaknesses of these websites to help create my own booking website.

User research insights: informative, trustworthy, and safe

To validate my idea and understand more on potential users, I did thorough research to learn how people book travel experiences online. What are their needs and pains. I interviewed 6 participants who travel regularly every year and previously booked short tours online. Here are the major findings:

1. Users used travel booking websites when they were ready to book.

Before using the booking website, users usually already did some research through alternative resources. Many times they already knew what they wanted to book.

2. Since users usually book travel experiences for places they have never been to, they rely on the website's tour description to set expectations.

“I want to know how long it's going to take, how difficult the trail is going to be, if it is kid friendly.”

“If a certain tour is like $120 and the other is $80, but $120 one has way better pictures, maybe like a map of where you go, then I'm definitely choosing the $120 one.”

3. Users also want to make sure the trip is safe and how to be prepared to possible situations.

Some activities may not be appropriate for people who have certain health conditions; some activities require travelers to have certain skills (swimming, biking, etc.). Problems may happen during pickup/ meetup of the tour, and people don’t want to see hidden fees.

Meet Erica: the careful travel planner

Based on the input from both secondary research and interviews, I defined a persona to serve as a combined representation of all the common user needs, thoughts and pain points. It was a helpful reference to define the problem.

The challenge

How might we help users book the best excursion for their travels?

From the research I learned that 2 scenarios should be considered when designing the process of booking excursions:

Scenario 1: the user planned what to do during the trip and booked excursions ahead. At this time users mainly use their laptops.
Scenario 2: the user arrived at the destination and started the trip, then booked the excursion to fill their schedule. At this time users mainly use their mobile devices.

The booking stage involves choosing an activity and booking it. I listed possible features of my website by referencing competitive analysis. Based on the 2 scenarios, I came up with a detailed, step-by-step user flow to show the booking journey. I decided to start the user flow from a Google result page, because most users mentioned that they usually landed on a booking website from Google search. On my website users will come across common design patterns that booking websites use such as filters and calendars.

Hone the interactions

Low-fidelity prototyping, testing and iterations

Since many people would go to this site with smartphones, I started the interaction design from mobile, then desktop and tablet. Following the user flow I built a low fidelity prototype and tested it with 3 users under 2 scenarios: booking excursions for Hawaii in advance, and booking excursions while traveling in Hawaii.

From the user's constructive feedback, I made adjustments to reduce confusion and tried to be more thoughtful on details. I also received positive feedback:

Major iterations

1. Leave the real estate for what’s really important

A problem quickly showed up when users seemed to have no clue what they should do in the “Things to do in Hawaii” page. As the first page they landed on the website, there was no hint above the fold (the orange line in the picture below) that suggested users to scroll down to see a list of tours and activities that they could book. Users reactions to the prototype clearly showed that people came to this site for booking tours, which is the most important thing the product needs to support. After reducing the space of the header section, the upcoming tour list became easier for users to notice.

2. Make the filters easy to use and remove

Google research suggests that a lot of people book tours after arriving at the destination. Therefore, an “Activities near me” feature is vital for users to quickly find what they want to book, especially for same-day activities. On the desktop version of the website, “Activities Near Me” would be a Call-To-Action button that users can easily see. How do I make that happen when the space is limited on mobile? Adding a banner on the top is not enough, filters is a better place because more people are using them. After testing, I found that embedding the feature as one of the filters is the most effective way for users to notice and use it, and that was validated in the next round of test.

3. Tabs vs Accordion

Most tour booking websites use either tabs or accordion pattern to help users better navigate each section of the tour details. Accordion worked better during the testing, especially on mobile. People scroll down naturally instead of scrolling horizontally, and the pattern is easily noticed.

Refine the UI

With the latest version low fidelity wireframes I created the high fidelity prototype for further testing. Then I used this prototype to test with 6 users. 3 users were tested under scenario 1 using the prototype for desktop. Another 3 users were tested under scenario 2 using the prototype for mobile. All of the users successfully completed the task of booking the activity. Based on users’ feedback I again revised certain areas to reduce confusion and tried to be more aware of users' experience. Here are the major pages of the prototype:

The brand

Playful but also professional

While I was making the low-fidelity wireframes I started to collect inspiration for the brand name, colors and typefaces on a moodboard. I came up with several adjectives to describe the brand:

exciting
safe & reliable
fun & joyful

Based on these adjectives, a warm, sunny, and vibrant gradient was chosen as the brand and highlight color. I contrasted the gradient with lilac and different shades of grey as base colors. The styles were not settled until they were tested on the high-fidelity wireframe design. From my past experience, the colors I initially chose always need to be adjusted based on the overall feeling once the Hi-Fi wireframes came out, and the UI elements were placed.

I made a lot of digital sketches on Figma to design the logo and finally decided to use a dynamic backpacker with a custom wordmark to give the brand a fun but also reliable appeal.

To keep consistency

I created a UI kit to serve as a brand element and style guide after finishing the high-fidelity prototype, which will be updated as necessary. It will also be very useful to reuse UI components consistently next time I pick up the project.

Introducing Up Next

Narrow down the options

Interviews show that users usually come to the website when they know what to book, so they should be able to narrow down the options quickly. Search or simply click on an area of the map to specify the location you would like to have an experience. Use filters and sort features to eliminate options you do not want to see.

Find the best excursion

For each excursion option you are able to see detailed informative descriptions with large, high-quality and professional pictures, specific points on what the experience offers, and ratings and reviews. Users can build clear expectations and better compare with other tours.

Book with the least steps

Browsing and comparing options can be exhausting with all the brain work. Customers don’t want to spend more time on booking so they are able to finish the process within 2 screens for all devices.

One click to find activities nearby

Statistics show that a large amount of leisure travelers decide on activities using smart phones only after having arrived at the destination. I added “Activities near me” feature on the website so users can find all available excursions near them without having to choose the location first, which will help users make decisions faster.

Looking further

Next Steps

Although the hi-fi prototype worked well in the end, the users and I talked about more ideas to make this product better. Because of the timeframe of this project, these are considered as next steps.
• Explore more possibilities for map interaction.
• When the user is on the main page of a place, explore ways to display the recommended activities so users don’t need to scroll far to see different categories of recommendations.
• Consider adding a pop up window as a quick view of the tour with some details so users do not need to open a new window to compare tours.
• Explore a better way to show price when checking availability.
• Add Q&A section in the Tour detail page.
• Consider making Sign in / up box more prominent (maybe show the form to fill).

Reflections

This project taught me a lot about the travel industry and travelers’ behavior as users. The short deadline of two weeks gave me the chance to practice planning and sticking to a project timeline. It is important to allow myself time to iterate certain designs instead of rushing forward, and I was very happy with the final outcome.

Testing early with the low fidelity prototype helped me shape the product and remember the goals -- create good UX of the booking process. The feedback I received from the first test also reminded me to always stick with users' needs, especially the details that only users will notice, but designers might not think about. With the design finished, I'm ready to play the role of the user and go on a long vacation.

Next case study
Cartful