How I redesign Airbnb’s in-app searching experience
Airbnb has always been a special place in my heart. In the past two years of working at the Airbnb Growth Marketing team in San Francisco, I’ve witnessed and inspired by how the company value — “make people belong everywhere” was translated amazingly to our products, as well as to how this company was run day by day. The core of the company is user. And there’s nothing more important than delivering a better user experiences through its digital products.
As regular users and product designers, my friend and I decided to take on a the challenge to improve the Airbnb’s mobile app experience by redesigning its in-app searching experience
Discover Problems:
Problem#1 The chaos, the struggling feeling of the overloaded home page.
The current home page is loaded with a lot of information with an unclear visual structure. The product wants to tell users we have endless inventories but it also confuses users by giving an unpleasant in-app experience. By applying Nielsen’s Usability Heuristics test with 4 target users, we found 4/4 users selected ‘yes’ in “needing to pay a high concentration on processing information for more than 15 sec”. They mentioned in notes how they found themselves easily got lost in the home page and felt confused by the irrelevant world-wide listings that they weren’t interested in at the first place.
Problem #2 The result page confused users with too many call-to-action.
The uniqueness of the Airbnb in-app experience (compared to its competitors) is it shows users the result right after users input a destination or choosing a category (stay, experiences or adventures). With its advantage to shorten the user journey, however, it brings a lot of confusion and frustrations to users when they try to make their travel plans.
Design Solutions:
The focus of the design is to bring a more clear IA ( Information architecture) and a consistent UI language to the product. Based on our user research and interviews, we made a few iterations to the home page, the search flow and the result page:
Welcome our guests to a no fuzz home (page).
The old home page feels like walking into an unclean airbnb home, leaving users with a mix feeling of confusion and anger. If our guests didn’t order a loud disco room, we need to respect that.
We “Kon Mari” the home page to better sever its main function — search. For the secondary function, exploration, users can now view listings sorted by categories without scrolling endlessly.
Make the data-entry fun and tireless.
In Disney park, the waiting lines are usually spread across multiple rooms with fun movie scenes and music. This break-down effect helps people feel less tiring of the process. We introduce the same idea to our search flow, asking users to complete one question at a time ( destination, category, dates) to make the process feel easier.
Also, by asking users to fill out category & dates before showing the results, we largely eliminate user errors and confusion.
The Design Process
Research:
🗂 Interviews & Usability Testing
We conducted four interviews and usability testings with our target users to understand the problems and opportunities:
- We asked each interviewee to first navigate around the Airbnb app and answer some general usability questions, such as “ Can you tell me what ‘explore’ means?” and “ How do you feel about the home page?”
2. Then we started a usability test, by asking users to complete certain scenarios and tasks.
3. Lastly, we conducted a heuristic evaluation form based on Nielsen Norman Group ‘s usability guidelines.
Findings from the interviews and usability testing :
📱App Reviews
In addition to user interviews, we took a look at Airbnb’s most critical Apple store reviews in the latest years. Some users were feeling frustrated about the booking flow as well as their desire to look for near by listings more easily.
📈Competitive Analysis
We selected three direct competitors, VRBO, Expedia and Booking.com to analyze the pros and cons of their mobile app home page, search flow and result page. We also asked our 4 interviewees to conduct the same tasks that they’ve done in the Airbnb app in the competitors’ app. This step helped us understand the drawbacks and advantages of the Airbnb app further.
Design
🦄Define Design Goals:
- Home page: search bar section, display categories, re-organize recommended listings
- Search Flow: make the search flow more intuitive and clear
- Result page: align with home page design, make changing options easier, new map location
📐Iteration & Testings
We tested multiple iterations by using low-fid wireframes to gather feedbacks from target users. We got some valuable feedbacks on how users like or dislike about the changes, and finally made a decision to move forward with one that met the most needs of our users.
🌈Final Product : Adding the UI Design
We tested two versions of our UI design. The first version is a half-screen slides up effect with input information on a card. By testing it with three users, 2/3 suggested it was easily getting distracted by the background and 3/3 showed difficulty on clicking/selecting due to the smaller screen size. So we made some revision, and settled with the version 2:
