Airbnb Offline Redesign
KPCB Design Fellows 2020 Challenge for User Experience and Interface Design
How can the communication between guests and hosts be more efficient and supply key information so that the guest can be ensured a journey even when they’re offline?
Forward
Airbnb is ranked #4 on the App Store in the Travel category and has contributed to a paradigm shift in modern hosting, lodging, and tourism experiences.
In this case study, I am proposing a design proposal for an offline feature where guests can download a receipt of key points from the listing description directly to their profile. During my initial ideation, I had to widen the scope of how I approach user pain points. I studied Airbnb’s Another Lens, to ensure that I was optimizing for user-centric design.
“How people react to change — whether they’re open to it, or resist it — is very much dependent on which mindset they subscribe to. Ensure your design works both for people with a fixed mindset and people with a growth mindset by working to understand where people are, and then meeting them there.”
— Embrace a growth mindset, Another Lens
My Experience
As a student on a budget, I do not utilize Airbnb often as I don’t come across travel opportunities. When I do, I optimize for the most budget-friendly option. This leads to murky territory in terms of listing accuracy.
During a blazing hot summer in Korea, I booked a cheap room in an apartment in Seoul with my mom. When I arrived, the room did not come with A/C as mentioned in the listing and the fan was broken. On top of that, neither of us had a sim card and there was no wifi in the vicinity. My mom and I decided that sleeping in a puddle of sweat in 95 F degree weather was not worth the bargain, and had to quickly relocate to find an alternative homestay that night.
Problem Space
The current interface of the entire app offline caches random parts of the app, which can lead to some trip features to not go saved or accessed. The hosts provide key information in messages and do not emphasize these points, which are crucial for the guest to enter the stay. This inconsistency opened up an opportunity for me to design a feature dedicated to an offline mode which can be set up on both user ends.
Present Offline Airbnb App Observations
- Some greyed out sections indicating uncached elements
- Four step navigation to get a copy of the address/full address in view
- Uncertain what indicates as uncached/unavailable
Solution
I’m proposing to redesign the seamless and intuitive offline page to the Airbnb app where the user can download key points from their booking. The app saves this data and is available to the user in the trips tab even when they are offline. As well as extending the offline set up on the host’s end.
Tools
Sketch, Marvel, Invision
User Research
To understand my problem space, I reached out to a couple of Airbnb Experience designers on LinkedIn and asked “what are the prominent issues that most users seem to encounter?”
“I know for guests, it can be hard to sift through all our inventory and choose the best accommodation for their trip. The offline experience of actually checking into an Airbnb in a foreign country with no data is also a challenge. We also know that hosts provide a lot of information on their listing pages, but everyone does it a little differently or writes out details in a long listing description which is easy for a guest to miss or is a lot of work for a guest to read through (understanding expectations for the listing and house rules). Localizing our app to different geographies is also a challenge (language, laws, different cultural expectations, etc)” — Experience Designer at Airbnb
I used these issues as a starting point in understanding the problem space. My other measures of research included the community forum.
The following chat was sent in to me for this case study during my research outreach stage. Screenshots from an Airbnb user’s recent homestay message from a host. Some text is hidden for confidentiality and the user’s name has been changed.
User Personas
After understanding the problem space, I created three potential issues of user personas based on the issues described in the feedback of Airbnb users.
To understand the interface navigation of booking a stay, I went ahead and booked two $10 reservations near Quindio, Colombia. (To which I quickly got refunded later!)
Let’s say Kimberly wants to share the address of her listing with John. The current navigation goes:
Trips > Destination > Listing > Scroll > Copy
Instead, the first screen of the “trips” tab should display the address.
“I feel forced to navigate multiple views just to get the address. Especially since it is already displayed and ready, but with no ability to copy paste without expanding the view.” — User feedback
After identifying the user pain points, it was clear to me that the restructure of sequential access to find a solution space for the offline interface design was important and can be improved.
Get Renaise’s stories in your inbox
Join Medium for free to get updates from this writer.
In order to step into the shoes of a host, I had set up an account, which led to the on-boarding of 12 steps. Going through this step process gave me the opportunity to implement the offline mode set up and review for a listing on the host’s end.
Airbnb Design Language System
In the push for a sophisticated and accessible design system development, Airbnb has laid out a comprehensive design system using components. These components are simple, large, and modular for ease of access and program development for class indication and cohesive front-end interfaces. The Design Language System or DLS is a collection of components defined by shared principles and patterns.
As I looked at different apps to contextualize the user journey to copy or locate the address efficiently and effortlessly without disrupting the current visual and UX ecosystem at large. This was challenging, as I had to integrate this crucial pathway into the offline interface.
Ideation Space
During this phase of arranging the atoms and molecules of the screens, I also had to keep the web version in respect. Ultimately, the offline feature was the objective in my interface design.
Frame of Reference: Existing Offline Features
To understand the offline functionality of apps, I studied existing offline features. I went through the navigation of Google products; Maps and Docs and turned on airplane mode to see how they work offline.
When I went offline using the Airbnb app, there was no indication of being offline. Instead, an error message would appear. The current interface does not have the offline marquee at the bottom, which can be confusing for users, as the elements are greyed out and flashing.
While sketching the preliminary designs, my structure for ideation was twofold; simplifying the existing offline marquee or placing “no connection” with an icon on the right. The second option appeared cleaner and lowering the opacity of uncached elements provided clarity for what is available offline.
Final Prototype
Takeaways
Finding the tools without the open source resources of established user flows/site maps was the most difficult overarching challenge. I am a iPhone 7 user so adjusting to the current iPhone X frame was a meticulous process and required a lot of unsolicited outreach and getting out of my comfort zone.
After presenting the screens to my friends, I noticed that the offline set up on the guest’s end after purchase seemed like a weak call-to-action, when underlined and greyed text indicate a cancel or secondary alternative. In my revision, I plan to introduce an additional review step instead of keeping it optional.
When I was reading the App store reviews, I was crossing upon multiple reviews on bed bug infestations and how the guests could not report these cases because of the inadequate or quality of documentation. When I was reading articles on Airbnb features, I came across an AR feature to extend the mode of universal communication visually and effectively. As stated in the article, “it’s a lot more difficult to actually put something like this into practice than it is to build it in concept — you need to integrate the technology into your app, as well as educate and encourage all your hosts to actually use the functionality.” I felt this sentiment echoed with these solution spaces mentioned in the forward via Another Lens. With respect to Airbnb as one of the stakeholders centered to this study, a more viable approach as an inclusive-minded designer was imperative.
Additionally, Airbnb’s user base is not exhaustive to the app experience. Older hosts on the community forum seem to use/prefer the website. Integrating AR experiences work differently on web where a rear camera is not existent. A diligent practice in approaching viable cross-platform solutions is always a challenge and balancing act.
In the future, I hope to additionally iterate a web and Android version of this offline feature.
