Building a 'Suggested Neighborhoods' feature for the Airbnb iOS app
User Research / UX Design / UI Design / Prototyping / User Testing
Overview
Airbnb was looking to develop a customizable “suggested neighborhoods” feature for users of its iOS mobile app.
The goal was to give travelers to a new city a better idea of what neighborhoods they might want to stay in, based on particular criteria and/or similar neighborhoods in other major cities around the world they're already familiar with. A traveler who previously enjoyed his or her stay in New York's West Village, for example, might be suggested to stay in London’s Islington neighborhood or La Condesa in Mexico City.
The suggestions are based on two primary inputs: first, customers are able to pick and choose certain variables that are important to them within their profile settings -- things like access to public transportation, a thriving nightlife scene, proximity to museums, etc... Second, using historical booking data and keyword scraping from reviews of listings within a particular neighborhood, the app can proactively suggest neighborhoods to customers during the planning and research process.
Research and Analysis
The research process began with a thorough examination of the existing Airbnb iOS app and the accompanying desktop site.
Once the app audit was complete, 30 minute 1:1 interviews were held with frequent travelers and Airbnb customers in London and New York City. The goal was to understand how they determine what neighborhood to stay in when visiting a city for the first time, as well as how regularly they use the app and for what purpose.
A quantitative survey was also administered via Google Forms with the goal of understanding what variables were most important when selecting what neighborhood to stay in.
Key Takeaways:
- Staying in the right neighborhood when traveling is very important to the vast majority of Airbnb customers interviewed (94% agreed with the statement "Choosing the right neighborhood to stay in when traveling to a new city is important to me")
- Many participants (84%) agree that there are set characteristics they regularly look for in potential neighborhoods when traveling
- The majority of survey respondents (53%) agree that finding the right neighborhood to stay in is a time consuming task, with 38% stating they visit more than 6 websites to make a decision and 27% admitting to spending more than 6 hours conducting their research
- The 3 most important factors participants consider when researching neighborhoods to stay in are:
- Walking distance to bars, clubs, or places to go out
- General safety of the neighborhood
- The local restaurant scene
Empathy Mapping
After interviewing a number of Airbnb customers to understand how they use the app and decide where to stay, I built an empathy map to help guide the development of the new feature.
Feature Architecture and User Flow
The next step was to map out the feature architecture, paying special attention to the new screens that would need to be created and how the would integrate into the app's existing architecture.
Those screens were then compiled into an annotated user flow diagram, which outlines the overall structure of the feature and its smaller components.
Wireframing
Once the primary function and components of the feature were fleshed out, wireframes were built to visualize the information architecture and better understand the flow between key screens.
Completed wireframe set for new "Suggested Neighborhoods" feature
Task flow for discovering a suggested neighborhood in London, beginning at the home screen
Task flow for enabling and editing custom suggestion parameters
Using a variety of tools, a style guide and UI kit were constructed based on the latest version of the Airbnb app. Close attention was paid to the application of their primary brand assets and colors, photography style, typographic choices, and their use of iconography.
UI Design
The initial wireframes were then converted into hi-fidelity comps, which would be used for the prototyping phase to follow.
Prototyping
Lastly, the screens were stitched together to form a functional, high fidelity prototype that could be tested in person with users through the InVision app for iOS.
The prototype was tested 1:1 with a group of users using InVision's mobile app, thus mirroring the experience they would have within the Airbnb app itself.
The primary goals of the usability tests were to:
Identify any bottlenecks within the set task flows -- specifically, locating a suggested neighborhood card for a particular city and editing one's custom preferences within his or her profile
Gauge participants' reaction to the suggested neighborhood's category rating system for things like Transit, Safety, Attractions, etc...
Evaluate the likelihood that users would actively use the feature in the future
Gather feedback on what aspects of the feature were unclear or needed further fine-tuning
Participant overview:
- 9 participants in total, 6 women and 3 men
- All participants lived in New York City
- Age range for participants was between 26 and 32 years old
Key Takeaways
- 100% of participants were able to navigate to the profile page to customize their suggestion settings
- 100% of participants were able to successfully find the suggested neighborhoods card carousel within a given city
- Numerous participants remarked on the fact that they found the "similar to X neighborhood" feature very useful
- A few participants noted that they were surprised a feature like this didn't already exist within the app
- All participants agreed that they found the feature to be valuable and would use it in the future, should it be built
Usability Testing
“This seems like a no brainer. It would be incredibly helpful when booking trips.”
“I love this! Being able to see the similar neighborhoods in other cities is a game changer”
“Can they build this immediately? I want this”
With testing complete, user feedback was integrated into a final iteration of the InVision prototype and the files were cleaned up and readied for developer handoff using Zeplin.
Next steps include:
- Testing prototype with larger sample size while utilizing Maze (InVision's new analytics software) to identify any unforeseen friction points in task completion
- Scoping development resources needed to build out a beta version of the feature in-app
- Incorporating feature rollout into 2018 product roadmap