top of page

Booking Booster

Housing rental platform optimization project

Company

Role

Duration

Finpeak

UX Designer

6 Weeks

I initiated the launched project called "Booking Booster" to help Airnect.com enhance users' trust and confidence. We optimized the user flow and fixed issues to smooth the booking process and decrease the drop-off rate with 3 solutions.

the business challenge

At the early stage of Airnect's development. We gained many users (guests), but our guests barely chose to book a house on Airnect. The chart shows how users decrease through the process.

Sign up

Browse listing

Find a desire space

Send an request

Negotiate price in chat

Make Payment

More than 10,000 guests

1-2 transactions/day

There were very few users booking on Airnect.com
how do we encourage our guests to make payments?

design process

How do we encourage our guests to make payments?

Redundant page

Lack of product guidance

Payment concerns

Simplify user flow

Pop-up tutorial

Add system message

Encounter the challenge

Define 3 problems from research

Design 3 solutions

design overview

Solution 1: We combined the "Requesting page" and the "Detail page" with a Fixed bar.

The solution helps users to take fewer steps to request a house.

New floating request section that

   1. reduce user flow steps

   2. utilizes existing design

Solutions 2: Add a 3-step "How it works" tutorial on the listing browsing page.

The tutorial can guide our guests to finish the booking task.

3-step tutorial that is

   1. easy to learn Airnect

   2. give info of what to expect

Solution 3: Added system message and mainly focused on 3 scenarios

The system message answers questions about payment security.

New system message that

   1. answers guests question

   2. provided additional info

background

My Role

As the UX leader, I led the data research, designed the optimized user flow, wrote copy with the marketing manager, and worked with the UI designer and engineer to make those movements come true. Our UI designer drew the prototype and made the final design for our solutions.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Finpeak, Inc.

What is Airnect? 

Airnect.com is a flexible rental platform that helps guests like traveling nurses and intern students to find a flexible weekly or monthly furnished space. Hosts can list and rent their space.
Importantly, guests can negotiate the price with the host on the chatting page.

User(guest) goal

Find a desired weekly or monthly house and book it at a reasonable price.

Our business goal

Generate more transactions to get service fee as revenue.

To solve the business challenge, first,
we want to figure out which booking user flow went wrong.

🤔

research | which parts went wrong

User flow (funnel)

In Google Analytics, we found the funnel of user volume decreases a lot as the user goes through.

Guest booking flow

Guest Volume

Landing page

Listing page

Requesting page

Detail page

Chatting page

1

2

Findings

       Significant users dropped off after the "Requesting page."

       Users switched between the "Requesting page" and "Detail page" frequently.

1

2

Original flow: here was the original booking flow

Step 2: click the box to see detail

(requesting page)

Step 3: Click "Send a request"

and go back to the previous page

(detail page)

Step 4: Make a request 

(requesting page)

Step 1: Choose a home

(listing page)

The problem hypothesis:

The "requesting page" is redundant and took too many clicks to finish the task.

We summarized this problem as:

Problem 1: Redundant page

This led to our first question.

How might we make the booking flow smoother so that guests can take fewer steps to see the detail page?

Quantitative research - user survey

With 30+We have calculated the response rate of guests replying to the host’s offers. One main result we found was that most guests (about 80%) didn’t respond to hosts, especially when a host sent a quote.

Screenshot 2023-02-22 at 11.43.12 PM.png
Screenshot 2023-04-03 at 10.29.37 PM.png

Our hypothesis:

Guests don't know that they can negotiate the price. They may thought that they have to pay immediately after the host send an offer. To conclude, our guest don't know how Airnect works.

That can be our second problem.

Group 16.png

Problem 2: Lack of product guidance

How might we improve the onboarding guide, so that guests know what they can expect to see and do throughout the process?

Qualitative research - interview

Continue from the survey. We wanted to dig into our hypothesis so we called 10+ guests and ask what are the concerns. We summarized 3 typical concerns.

I don't feel comfortable seeing offer? What do I suppose to do with this?

face_icons-square-05.png

I don't know the host? How do I know it's not a scam?

face_icons-square-50.png

I am not sure how it works. I afraid that I will lose money after I pay.

face_icons-square-69.png

Problem hypothesis:

Our guests have concerns about payment safety. They trust neither the host nor Airnect. 

repetitive.png

Problem 3: Payment concerns

How might we let the guest know it's safe to pay on Airnect
so that guests can eliminate their concerns, continue the process and chat with hosts?

design goals - refine the hypothesis

As we summarized 3 problems, we can see where the problems occur in the user flow.

Landing page

Listing page

Requesting page

Detail page

Chatting page

Group 16.png
Group 15.png
repetitive.png

Problem

Group 16.png

Lack of product guidance

Group 15.png

Redundant page

repetitive.png

Payment concerns

Design goal

We want to let the guest know how it works by using a tutorial.

The original booking flow may be extra and unhelpful. We want to simplify the flow - may has extra and unnecessary pages.

Since the payment concerns mostly appears  in the chatting page. We need to give enough info for our guest about why it's safe to pay on Airnect.

design rationale - how do we choose ideas

Before we start, it's important to know the constrains and the design concept

  • With a tight schedule and limited resources(we were a small team), we needed to move quickly and develop minimum viable products (MVPs).

  • If the guest can't 100% trust the host. We as a platform need to earn trusted for guests and hosts. So that both parties can rely on us! We solve issues for them so they don't have to argue.

Airnect

Trust

Host

Trust

Guest

We brainstormed ideas after reflecting on our insights findings.
The design goals guided us to the solutions.

ideation and solution

Group 16.png

Lack of product guidance

Design goal: A high readability tutorial

Ideation - booking tutorial

T4.gif
T3.gif
T2.gif

Option 1 - single page tutorial

Option 2 - multi page tutorial

Option 3 - Video tutorial

Option 4 - Refresh landing page

Frame 1.png

Option 5 - Pop-up window (our choice)

Add "How it works" tutorial. It will be triggered after a new guest sign up and get to the listing page

We chose Option 5 - Pop-up window because

  1. Easy and fast to build in terms of our tight schedule.

  2. Sustainability. Easy for future revise and development

Popup booking tutorial flow

Step 1: Finish signing up

Step 2: Tutorial automatically pops up

Final design

Add a 3-step "How it works" tutorial on the listing browsing page. After a guest sign up, the tutorial pops up. Guests will know what's going on next.

Why is the pop-up message at the bottom instead of in the middle or up?
Popping up from the bottom to us is a more friendly way for us. We can deploy the design ASAP and iterate it.

Redundant page

Design goal: Reduce and simplify the booking steps

Ideation

We want guests to get to the detail faster. Our team agree to simplify the original flow. But we have 2 options to achieve the goal.

Option 1: Delete the first "Requesting page" and remain it after the "Detail page.

Option 2: Combine the "Requesting page" and "Detail page."

We chose Option 2 because

  1. Simplifies the booking process.

  2. We can use the element that we already have. No new design needed.

Requesting page

Detail page

Wireframing

Final design

We combined the "Requesting page" and the "detail page" so guests can easily see the housing detail and decide what to do next - avoiding back and forth. 

​The requesting section now is a fixed menu in the bottom of the detail page

Backup plan
1. Do the same way as Airbnb, put the request section on the side with the "Price detail."
2. Explain more about the "Send request button" because not everyone knows what it means after sending the request. Will there be any commitment? Is there any cost for a request?

repetitive.png

Payment concerns

Design goal: Answer questions about payment

Ideation

On the chatting page, we want to put more annotations (system message) on the guest end and provide them with relevant info on how we protect guests' benefits. This may solve most of their concerns, such as deposits or payments. 

Problem with original system message

Sample of original system message

​YOU SENT A BOOKING REQUEST
BOOK NOW OR FURTHER DISCUSS WITH HOST
BOOKING CONFIRMED

Problem

  1. All caps sentence, low readability

  2. Important, but not useful

For new system message we want it to

  1. give info about payment safety

  2. be have a friendly and considerate tone

  3. provide optional info (deposit)

Final design

For the final design. We added system message and mainly focus on 3 scenarios:

  1. When request sent

  2. When offer received

  3. After you pay

When request sent

Let the guest know the safe way to pay

solution expectation - what can they solve

Reflecting 3 solutions to the user flow, we can see what it solves.

Landing page

Listing page

Requesting page

Detail page

Chatting page

Solution 3: Add and revise system message

Expect to increase the response rate

Solution 2: Simplify the requesting flow

Expect to decrease the drop off rate in this page

Solution 1: Booking Tutorial

Expect to decrease the overall drop off rate

impact - what we get from the solution

Positive feedback (revisit the interview participants)

1. “It makes more sense than before. Now I know I can negotiate the rent.”

2. “I think the new system message is helpful. It explains a lot of information and makes me trust Airnect more.”

Data tracking

Since it's hard to read which page did users quit on Google Analytics, our engineer team start to set data point on every website page. In the future we can easily know which page do our guest quit the most.

Personally, I collaborated with our engineer to learn simple SQL commands to access the data dashboard that helps me to analyze data.

Future project

The option 4 (refresh the landing page) for tutorial became our future project that helps our guest to learn more about Airnect.com in the landing page, before they sign up.

Here is the overview of the new landing page.

self-reflection

What can we do better?

We didn't have a chance to track the design effect after we finished the project. If I were to measure the design success, here is what I would do.

 

For overall platform stats, I will check 

  1. If our booking rate increases by at least 10%. 

  2. If the chat response rate increase by 20%.

For the booking flow, I will pay attention to

  1. The before and after drop rates in the requesting (detail page).

  2. Guest‘s length of stay in the tutorial

 

We can also interview the previous participants and see if they satisfy with the upcoming new designs.

What can go worng? What to improve?

Tutorial
We only made a simple tutorial. Guests can only see it once, then it disappears. We should explore the most efficient way to lower the education cost for guests.

System Message
As we grow, we want to collect more potential questions that our users (guests and hosts) have. And continue to add the most relevant system message.

What I learned?

As the UX lead, I initiated the project and wanted to help the platform grow. Before this project, I had more proposals that our director did not approve. I started to figure out what the company needed at a different stage.
Our director named this project: E-pay. I learned more about collaborating with designers, engineers, and copywriters during the designing process. 
I am glad I can lead this project and see the final design launched.

Final Design Presentation

Booking Tutorial

Never get lost. After the account registration, the tutorial will let you know what's going to happen and what you can expect.

How to trigger the tutorial?
Step 1: Sign up for an account.
Step 2: Jump to the listing page, and the tutorial will automatically pop up from the bottom.

New system message 

Answers your questions before you even have it .

We want users to feel we care about their benefits, including payment safety and privacy. Before the project, the system's message was not a humanized design. 
With our new system message, guests can clearly know where the payment goes, how the deposit works, how we protect privacy, etc. It also lowers the pressure on customer service. 

When request sent

Let the guest know the safe way to pay

Requesting your desired home simply

We remake the booking flow so that it's more natural for guests.
The new flow saves 10 seconds more than before in the booking process,
with no confusion.

bottom of page