Offline Mode
For Airbnb Trips
View Process Deck
Type and Timeline
Product Design
Sept 15 - Oct 1 2019
Tools
Sketch, Invision, and Marvel
My Role
(Solo Project) User Research, Ideation,
Visual Design, UI/UX, and Prototyping.
Forward
In this case study, I explore an alternative approach to the current state of Airbnb offline. The Airbnb offline mode streamlines the potential for the customer's end where users can download a receipt of key points from the listing description directly to their profile to relieve international travel edge cases and more.

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.
Problem
“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?”
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
A seamless and intuitive offline feature 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.
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.
I also had reached out to colleagues who have ran into no service or general interface issues with Airbnb as guests.
Emily
booked 3 stays
“I had to purchase international service to contact my host and that was really expensive. I feel like an offline mode would save the information that matters the most.
Ping
booked 8 stays
“I feel like I shouldn’t leave the app to use other apps like Google maps but I always do. I feel like I screenshot more than I search for key features.”
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 empathize with user needs, I created a speculative Community Forum post.
“Being stuck in a country I’m not familiar with was scary. I am very busy and not that adept with technology, so I did not know what to expect after arrival. I wish I had concrete directions to arrive to the stay from the airport.”
“I haven’t been to Chicago before so I had spent a lot of time trying to find the right train station so I was low on battery. I couldn’t understand most of the host’s messages at first glance, I wish they would use less words to get to the point.”
“This was my first time using Airbnb to book a stay. My experience getting into an underground entrance was frustrating.  I wish there was a way to save the important information like pin code in the app.”
Current Screens
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.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.
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.
Copy on Map
Utilizing the DLS, I was able to design the following screens addressing the user needs. The light turquoise overlay of the map is a mediary selection from light grey and the official Airbnb turquoise. Initially the maps were grey but this overlay complimented the interface visual design. I made sure the contrast with the overlay color and the foreground passes the color accessibility guidelines.
Competitive Analysis
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.
Ideation
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.
I had laid out the experience in three user flows;
1. Setting up the offline mode
2. Viewing the offline mode online
3. How the user would navigate Trips offline.
Sketches
I had sketched out low-fidelity screens from the host’s and guest’s end, from setting up to viewing the listing offline. By introducing a brief setup on the guest’s end, the outcome intends for a seamless interaction.
The view/edit offline option while online was challenging, especially visualizing these screens if the user would be online. How would these screens change offline? Moving forward to the next step, I navigate the most efficient user flow journey opportunities.
Mid-Fidelity
Host’s end redesign. The setup steps changed to a numbered system and the progress bar looks more prominent.
Guest’s end redesign. Introduction to a more intuitive hierarchy of information, immediate presentation of the address with the map, and directions from a drop point that is predetermined online.
Setup Offline
Offline setup and overview under the “Next” button. This setup was intended not to be placed as the call-to-action.
This setup can be revisited in the edit button through the Trips navigation online.
Listing Setup
The user sets up the point of arrival.
By referencing some of the interface components of Google Maps like the icons, the new design introduces a seamless navigational experience.
These directions would be for driving but additional modes of transportation will be investigated in the future.
Online Trips
Switch button gives the user agency to toggle between offline mode (to edit or view), and the regular online view.
The “no connection” icon is not shown when the switch is activated, as the user is online.
Offline into effect
This user flow introduces the no connection icon.
Uncached components have a lighter opacity.
The next screen eliminates the original map and displays the stays of the selected of the trip. Only upcoming trips ensure an offline mode.
Listing Redesign
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.
Challenges
- Adjusting to DLS and iPhone X frame and Human Interface Guidelines.
- Guerrilla user research.
- Outreach to a wide range of Experience designers and Airbnb users.
- Could not get feedback from a host.
- Narrowing scope of redesign.
- A diligent practice in approaching viable cross-platform solutions is always a challenge and balancing act.
Key Takeaways
- Offline mode redesign highlights user needs.
- Extending accessibility.
- Enabling more app traffic/activity when appropriate than having to resort to external aids like screenshotting, Google maps, etc.
- Allowing for the host to provide brevity and conciseness.Enable agency to the user in how they chose to use offline mode.
Next steps
-Designing the same function for web and Android versions.
-Empathizing with the host.
-More user testing and review.
Thank you for viewing my redesign case study! For any feedback please email me at renaise.kim@gmail.com
View More Work

(c) 2020 Renaise Kim