Anticipatory design and improvements for Airbnb homepage

Boris J.
4 min readDec 24, 2018

--

Anticipatory design is a UX pattern that seeks to entirely remove user choice from the equation.

Disclaimer: Before rolling out any changes such as the proposed ones, it’s crucial to understand the importance of conducting usability and A/B testing on a large platform like Airbnb. It ensures the proposed alterations are effective and user-friendly, enhancing the overall user experience.

Anticipatory design

Helps users to save time and removes unneeded effort. It also improves the user flow and can speed up time converting visitors to customers.

I applied visual corrections and added progressive solutions based on anticipatory design to improve the Airbnb homepage. Below, on the left picture is the current Airbnb page, and the new design on the right, both seen on iPhone X.

Let see what is improved!

LEFT: Current Airbnb homepage | RIGHT: UI Improvements

1. Visual improvements

Logo

Airbnb logo cannot fit just any background image without an overlay. In the example above, you’ll see that the red Airbnb logo color looks out of sync with the blue one from the image below. If the placeholder image is changed to include red color, this logo may not be visible at all. This can be fixed by adding a transparent black background or similar.

Avoiding the burger menu icon is a good solution for this use case. Although, in the example above, a small chevron is barely visible. We can be specific and call it — MENU. And let it be a safe spot for users to return to. Also, this is essential to users with color vision deficiency who require more hints than a washed-out chevron over another image.

Hero image

Dummy image on the Airbnb homepage? On a homepage seen daily by millions of users? I see it as a good spot to include call-to-action.

A catchy phrase, “Book unique home and experiences,” aligns with the company’s mission and promotes the brand. But the CTA is missing.

The system can pull data from reviews of actual users, and a query can select phrases that match the company’s goal. Real users and real content — nothing can replace that. The content is still the king.

Also, what happens if you like that picture on the current homepage implementation? It’s not even clickbait, no link at all! Frustration right in the beginning before interacting with the rest of the website/app.

So, maybe we can pull the real content, and at least the user can check it out — becoming a potential customer while going through a prepared story (funneling him to the checkout). Make a good story, everyone needs inspiration sometimes!

Where to

In this case, the user may want to check offers for “Anywhere”, so we’ll keep this.

Check-in / Check-out titles

Check-in — sure, we all know what that means. After choosing the place, simplify the date picker to show IN only instead of CHECK-IN. Holistically, the common two-word combination is unnecessary in a date selector. One more bold move, but still — if you are Airbnb, you set the rules, and others follow 👑

2. Predictive text improvements

Check-in / Check-out input fields

We are Airbnb and we have robust, state-of-the-art statistics and analytics, right? So we know when users book their travel on average. And we know how long they stay there on average… So… instead of showing a dummy calendar placeholder (mm/dd/yyyy) we can try to predict the input!

In many cases, we’ll be correct; yay! Which can save a lot of time and clicks for some users. Even if the guess is incorrect, the user would have to click on that field anyway, even in the case of a dummy data placeholder, so no additional clicks + we can definitely avoid some!

Guests

Did I mention robust, state-of-art statistics and analytics? It can also help us to know how many people go on a trip together through Airbnb, on average. We can use that information too! If the guess is incorrect, the user would have to click on that field anyway, even with a dummy data placeholder.

Additionally, if we don’t anticipate this number, the user has to open a fairly complex dropdown and spend at least ~5 seconds to select.

Dropdown for number of guests

3. Conclusion

All these changes, visual and anticipatory improvements, are coming from the user-centered perspective, but as I mentioned in the beginning, when you want to make changes on such a large platform, as you are dealing with a large pool of users — be careful and test first.


borisjankovic.com

--

--

Boris J.

UX/UI Designer based in California — Apps | Wearables | VR | Automotive