Designing Airbnb’s mobile web

How one team completely redesigned a platform in a year.

9 min readApr 15, 2020

A little over a year ago I was asked by our VP of design to conduct an audit of Airbnb’s mobile web experience. Mobile web, at that time, was a responsive version of desktop and, quite frankly, largely ignored by the experience design team with engineering simply resizing desktop components to fit the phone size.

I assumed that this would be pretty straightforward assignment with me recommending some small changes to generally up-level the experience. What I didn’t know what that this project would change the course of my next year at Airbnb and completely rethink how we, as a design team, thought about mobile web.

Discovery

After doing some digging, what I learned shocked me. Mobile web had not only become our most visited platform but our fastest growing as well. In growth markets, such as India or Brazil, as much as half of our total traffic was visiting Airbnb on mobile web. Unfortunately, it was also our worst performing platform… by a lot. We wouldn’t have expected mobile web to have the same conversion rate as desktop or native, but it was far below industry standards for travel products.

To understand how this had happened, I first looked at industry research regarding the use of apps and mobile web. The average time spent using the internet on mobile phones has been growing steadily year-over-year yet far more time was being spent in apps then on the mobile web.

You would think then that our app, not our mobile website, would be the most visited. But, users spend the majority of their time, nearly 90% , on only five apps with nearly 50% of their time in just one app.

And when you look at the types of apps that people use more frequently it paints the picture that Airbnb is simply less likely to be a frequently used app for most people.

We conducted in-product surveys to get direct user feedback as to why they didn’t want to download the app:

Our users simply didn’t see the point in downloading it as they only use our product 2–3x per year
In growth markets there were often issues with data caps and slow internet
With our app at over 200 megabytes in size it often require a Wi-Fi connection simply to download it. What’s interesting is that this size is fairly common with travel apps.

Airbnb’s Experience

It was clear now why our guests were opting for our mobile website but it was still unclear as to why it was performing so poorly.

When we looked at industry research there were three things that users clearly want from a mobile website:

Fast: 53% of mobile site visitors abandon a site if it takes more than 3 seconds to load
Well-designed: 57% of users say that they won’t recommend a business with a poorly designed mobile website
Easy to use: 85% of users say that they want a mobile website to be better than desktop

Basically, users want an app experience without having to download it.

So how did Airbnb’s mobile website compare to these desired attributes? Unfortunately, not so well.

Our mobile website was slow. On average it took a page over 13 seconds to load over 4G with our homepage taking over 10 seconds for the first image to even show up.

It poorly designed and implemented. Several pages and components were poorly executed. Maps were both slow and difficult to use with pop-ups that were designed for the mouse not for the finger. Photos were difficult to see with navigation elements over it and text running off the page. Components like reviews weren’t size correctly and nearly impossible to read.

It was difficult to use. Our mobile website simply wasn’t designed for use on the phone. Small tap targets on calendars led to use her frustration. Marquee photos were so large that took up the entire screen and pushed content below the fold. And, worst of all, if you had wanted to download the native app instead a simple button that took you to the App Store, we asked users to enter their phone number so we could send them a text message with a link to the App Store.

Given that 65% of our first time visitors were coming to mobile web and that this was their first interaction with our brand, it was mission-critical to fix this as fast as possible.

Solution

The first step in solving this what’s telling the story to our leadership. To do I:

Shared a combination of business metrics + visuals to convince them that our mobile website was on fire
Provided them with the reasons why this hadn’t been solved already and how we planned to do it
Shared the opportunity cost to not solving it based upon growth rate and average booking value.

What I pitched was the idea of creating a centralized team of some of the best designers and developers at Airbnb with the goal of completely redesigning and rebuilding our mobile web platform from the ground up over the course of the year. The reason for a centralized team was that a challenge like this needed complete focus and obviously doing this in a distributed manner had been failing us. Thus, the MoWeb Lion team was born.

I highly recommend fun team names with emojis. It really resonates with people and gets them excited to work on it.

Mobile Web First

Our goal was to create a world class mobile website. We first needed to change the mindset at Airbnb to no longer be mobile friendly but to be mobile first. In fact, to be mobile web first. The majority of our users were coming to the mobile website and they wanted an app like experience so that’s what we planned to give them.

We began with building a progressive web app (PWA), which allowed us to create a more app-like experience. Feature include:

Installation to the home screen, which allows users to download just a 12mb vs. 200mb app making it much more likely to happen
Push notifications help re-engage users after they take an action. When guests contact a host we can notify them when there is a reply.
Service workers that allow for offline mode similar to native

Fortunately, being in San Francisco I was able to talk with companies that had built some of the best PWAs in the world — Instagram, Twitter, and Pinterest. Hearing from those teams was incredibly helpful as we started our year-long endeavor.

On top of the PWA we would completely redesign the guest experience. In order to do that we focused on 4 areas that we felt were most important to our guests.

1. We redesigned the menu and navigation to make it more in line with native. Native apps typically use tab bars as it’s proven that hamburger menus are often missed along with any links inside of them. We introduced a logged out and logged in tab bar experience that helped our users navigate more clearly. Previously we had this weird logo hamburger that no one knows where it came from.

2. We also wanted an improved map experience as maps are a core part of choosing a listing. Previously the map was hidden behind a toggle that was difficult for users to find. We brought the map to the forefront of our search experience, made it was easy to tap and use with one hand.

3. We also wanted to ensure that our app could be used on any phone size. Even though only 2% of our users were coming from small devices like the iPhone SE, it was important to ensure that anyone could easily use our product. New patterns like popovers that helped place content in a better position for small devices.

4. Lastly, and most critically, we completely redesigned all of core flows. This is our old checkout flow. Content is spaced poorly and positioned below the fold making it difficult to use.

And this is the updated experience where core content is above the fold through better spacing and font sizing, CTA buttons are locked to the bottom of the screen, and design patterns are consistent making it easier to use.

Results

Our hypothesis was that if we can make our mobile website “feel” more like native than we will increase overall conversion rate. We still have a few weeks left to go before our team is done but we have seen impressive results thus far:

Completely redesigned and rebuilt the guest experience in less than 12 months
We have seen a 25% improvement in our conversion rate
A 2.5x performance improvement with nearly a 5.5sec average load time

In addition to product improvements, there were organizational ones as well:

MoWeb is now the first platform that teams at Airbnb design for instead of the last
We proved the ability to work horizontally across the entire company.
MoWeb parity with native enables designers to move faster by creating one “mobile” design that works across moweb, iOS, and Android

Learnings

Our goal was to redesign and rebuild the Guest mobile web experience within in a year but we learned was that it was hard to do for a variety of reasons.

Form a product standpoint:

A new local maxima usually starts negative. Plan for this and provide guardrails for launch. Any major change that we made took 3–4 experiments to get to neutral.
Follow the user journey. We found that building the foundation first then building off of that worked well. Things like creating the PWA, redesigning navigation and interactions allowed us to move fast as we got to specific flows.
Experiments are difficult when making dramatic changes. Don’t mix big changes or you won’t get clear learnings and it will set you back. We used A/B for long term metrics but also tools like Data Dog for short term evaluation of components and checking for bugs.

From an organizational standpoint:

Resourcing a project like this requires top-down directives, or you will struggle with keeping people on the team. Also, we had to have alignment with our CEO that the message of importance was shared with the company. We met with him monthly to share updates and get feedback.
We learned to work in hyper-collaboration mode. We had to work across 24 different subteams within the company. For design that meant shared Figma files where literally 18 designers were working together
Other company initiatives made it difficult to fulfill our goals. This was disruptive and slowed us down significantly…but also out of our control

Personally I learned:

Lean on others who have done this. I talked with other companies who had created PWAs but don’t hesitate to ask for help. This is hard and others are willing to share.
Use other companies to get learnings, stats, suggestions. Without them it’s difficult to sell the story or choose the right solutions.
You can do this even if just one person. All of this started with me. I was fortunate to be able to bring together an amazing team but don’t be afraid to start with a team of one.

In Summary

Building MoWeb friendly is hard and being MoWeb first is even harder. You don’t have a choice. Every day more and more of your customers are coming to your mobile website. This is often their first experience with your brand and they expect it to be as good as native. Focus on creating the best user experience and the metrics will follow