Trip-board

ROLE

TEAM

CLIENT

TIMELINE

UX / UI Design
Interaction
Animation
Illustration
‍

Wenjia Wang
Dusanka Prevulovic
Peter Reimer
Paige Lucas-Dean

Booking.com

Dec 2021 - Feb 2022

CLIENT
Booking.com

TIMELINE
Nov 2021-Feb 2022

TEAM
Wenjia Wang
Dusanka Prevulovic
Peter Reimer
Paige Lucas-Dean

ROLE
UX / UI Design
Interaction
Animation
Illustration

Planning a vacation is fun - until you actually have to book it. Especially because we are used to being inspired by photos and videos on social media, the dry booking process with search queries and countless filters appears to break the experience.

Trip-board is a search feature aimed at young users to enhance their experience of using it. It allows users to personalise their favourite travel content and tell Booking what kind of travel they seek in a visual and entertaining way.

I worked with 3 designers on this Booking.com project. I was primarily responsible for the research and interviews, then conceptualizing, creating, testing, and finally delivering the MVP after enough iterations.

Challenge

The Challenge is that make the searching way of the Booking app more visual and add some more features that fit their needs and help young travelers to find their best personal holiday.

How can we make Gen-Z tell Booking.com what kind of trip they are looking for on a more personal and emotional level, leading users to find their best possible match?

Kickstar

The desk research allowed us to understand users' travel preferences, booking behavior and decision reasons. We then created a hypothesis about how young travelers conduct their search for travel information. To test this hypothesis, we conducted 10 interviews and created a questionnaire that received 26 answers. We summarized the results with an affinity diagram and an infographic.

Competitive Analysis

We also took a deep dive into the existing Booking app and looked at other similar apps. This gave us an idea of several mainstream search methods and potential issues that may need to be avoided in future redesigns.

Situated Design

我们设计了3种体验：一天，我们的团队在不使用技术的情况下进行物理工作；一天，我们使用视频会议工具在线工作；以及我们完全使用音频工具在线工作的一天。我们在日报上收集了3次经验的见解，后来比较了我们的发现，确定了在线工作的优点和缺点

Persona & Journey Map

We identified the target population and mapped the user journey and persona.

Research.

What I want to know?

1. Understanding how users search for the travel information they want.
2. Understanding the means and channels people use to find out about travel information.
3. Find out what influences people's decision to travel discover the factors that play a key role in user's travel planning.

This is some text inside of a div block.

Competitive Analysis.

A market full of homogenized products

After learning about the industry, I wanted to take a closer look at Booking's competitors and how they cater to the travel needs and usage habits of younger users.

I identified the direct and indirect competitors：Airbnb, Trivago, TripAdvisor, Expedia and Qunar. The direct competitors are travel-focused platforms similar to Booking, while the indirect competitors do not focus solely on travel product sales. In exploring each of apps, I evaluated the strengths and weaknesses of each to see how Booking could fill any gaps along the way.

Benchmarking

This is some text inside of a div block.

Fragments of inspiration from other apps

We also looked at apps from other fields and found interesting, learnable features to design.

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Interview | Survey.

we were analyzing data and making an affinity map.

We interviewed 10 young people to collect qualitative information for an in-depth understanding. The participants were around 20-25 years old and had travel experience.

Our interviews found out how the younger generation searches for travel information and plans their trips. We also found out about the current shortcomings of the Booking app.

In addition, we learned about the apps that are popular among the younger generation, such as Tiktok. Further analysis of these apps allowed us to understand why users like to use them and learn from them.

Most important insights

Kickstar
‍

Booking is not the first choice for Gen Z, who prefer to use apps such as Airbnb. The Booking app's current search method is based on text input. We found out that the majority prefers the display of dominance of images and videos over the description of writing when deciding on a trip. They also like to compare before booking.

Competitive analysis

Airbnb has an interesting design: the button that provides inspiration. Users only need to click it and get random travel recommendations.

Qunar keeps up with the trend of young users and uses short-form videos to provide information.

Persona, Journey map

They like to make comparisons before making reservations.

Price is the biggest factor they compare.

Findings.

Travel decision making

We were able to identify 6 key points that are the most decisive drivers in Gen Z's online travel planning:

85% of participants prefer to create their own personal tour rather than a package tour.
98% of participant will compare before booking.
80% of respondents claim they enjoy sharing and getting holiday inspiration online.
76% of participant prefer the dominance of pictures and videos over text descriptions.
90% of participants cited budget and location as the biggest considerations before traveling.
Sharing journeys and socializing have become part of the lives

Functional, but boring

We tested and asked the target group about their experience of using the current Booking app.

The UI style is very commercial, users like a more youthful, lively style.
They quickly lose patience with the complexities of filter.
The attraction recommendation page is filled with a lot of text, which is not attractive to users.

Design part.

Ideation.

This is some text inside of a div block.

Brainstormed the possible UX for the new feature

To explore new search way, we used the Crazy 8 method of brainstorming and then discussed these ideas together. We then voted on which ideas we thought would be best suited to the problem for further development.

Brainstorm session.

Defining the solution

Our solution was to make it possible for users to create personalized filters in a simple and fun way. To do this, we prepared design requirements, user stories and then we had 2 brainstorming sessions about possible solutions. Later we prioritized the ideas by Harries Profile and generated user requirements and user flows.

Discarded Ideas.

We have chosen this idea based on the result of Harris Profile and the feedbackfrom target group and clients.

Wireframe & Lo-Fi

Based on the chosen ideaTinder B, we produced basic pages and then started wireframing. I had another brainstorming session when designing the secondary filter. We created a mid-fidelity prototype and moved on to evaluate on that.
‍

User flow.

Testing

One of the innovative concepts in the project is to allow users to create their own 'mood board'. Users can pick their favorite cards from those provided on the screen to add to their personal saved box, delete them by swiping cards, and then resize the selected cards to prioritize.

We tested this with 14 volunteers to see how people responded to this new approach. All volunteers were able to interact intuitively with our prototype, but were slightly confused by the resizing of the cards. Therefore, we improved the animation of the tutorial.

User testing.

Based on the chosen ideaTinder B, we produced basic pages and then started wireframing. we created a mid-fidelity prototype and moved on to evaluate on that.

The mid-fidelity prototype.

User testing session.

We found 6 youths to perform the test. Each test around 30mins. Sessions were conducted at the HvA.

Our goals for the testing were to:
1. Test whether the new design can be quickly understood and learned by users.
2. Test the discoverability and usability of new features.
3. Understand user behavior and observe how they select and add filters.

Iterations.

Based on the key findings we synthesized through conducting affinity diagram, we iterated on the design and upgraded the prototype from mid-fidelity to high-fidelity.

Key insight 1

Users need time to understand the new way of operating

Initially, we thought that young users would be familiar with complex gestures (using two fingers to operate) and therefore be able to successfully add and resize filters to prioritize. However, users were unaware of the existence of the resize function in the absence of guidance.

‍

Solution： For new users, add tutorial animations

Key insight 2

Selected filters take up many space of the trip board page.

The selected filter area at the top of the page is too large, preventing users from viewing more filter options.

‍

Solution- Reduce the space in the top area.

This is some text inside of a div block.

Final design

Through interviews and desk research we found out that budget is one of the biggest factors when deciding on a trip. When setting up the Trip-Board the users gets asked their holiday destination, budget, dates, and what they are looking for (flights/hotels/attractions etc)

When they prefer to search in a more explorative way, there is also an option to skip all these steps so that they don’t have to fill in any data.

Trip-board

How I got there

Situated Design