UX Designer / Boston, MA
Airbnb
Re-Imagined
Airbnb User Interface & Information Architecture
Tools Used
Adobe XD
Design Process
This project was part of my graduate coursework at Northeastern University, and undertaken for educational purposes only. Any brand names used are property of that brand.
In this project, I re-designed the user interface and evaluated the existing information architecture of airbnb.com. I started by performing a brand discovery and outlining a sitemap of the existing site. From there, I chose 8 pages to focus on, and created low-fidelity wireframes as the starting point for my designs. For the final product, I designed 8 desktop pages, as well as a mobile version of each of these pages.
1) Who are they and what do they do?
Airbnb - https://www.airbnb.com
Airbnb is a place where people can list their homes and properties as vacation rentals. It provides an alternative for hotels, and is especially convenient for longer trips. It also allows the homeowners to make money. Recently the company has also expanded its offerings to include vacation planning suggestions and restaurant suggestions.
2) Audience(s)? Who are they and what do they need?
Airbnb’s audience is travelers looking for alternative housing options. The traveler is looking for a place to stay throughout her trip, and for whatever reason has chosen not to stay at a hotel. Often, she may be looking for amenities a hotel will not offer, like a personal kitchen. She may also want to immerse herself in the city she is traveling to, and it is much easier to feel at home in an actual home than in a hotel.
3) Does the site speak to them (with funnels, appropriate content?)
The site literally speaks to the viewer immediately; at the top of the homepage the text header reads, “What can we help you find, Sarah?” and offers three choices: homes, experiences, and restaurants. Below that, there is also a scrolling banner of multiple cities that are “Recommended for you”. These are both examples of content tailored to the user, which guides the user to pages they are more likely to need or enjoy.
4) What are the conversions? Do they offer conversions? (Buy, sign up, contact...)
● Purchase your stay at the selected apartment/home
● Connect you to Resy (third party booking app) to make restaurant reservations
● Book a tour/experience offered by a host
● Sign up for an account in order to rent a property
● Contact host through the app/website messaging feature only
5) Technical glitches (responsive, page speed, seo, navigation, search)
● When searching homes within an area, you cannot sort by Price (low-high) or Price (high-low), which is very frustrating. It wastes time and makes finding an affordable rental more difficult
● Navigation is similar to the Airbnb app, though there is no menu icon on other pages, you must just return to the homepage
Brand Discovery
Site Map
Wireframes
After establishing the brand's identity and outlining a map of the existing website, I chose 8 pages to redesign. I created low-fidelity wireframes using Balsamiq.
I also sketched out a slightly more detailed wireframe for the homepage, as I sometimes find it easier to wireframe by hand. I sketched out a few options for the banner at the top of the homepage as well.
Style Guide
Before moving into mockups, I established a style guide for the new site.
Desktop Designs
I used Adobe XD to create my designs. This particular course was early on in my first year of graduate school, so this was my first time using Adobe XD. At a few points throughout the design process, I submitted my work-in-progress to my professor, who provided feedback that I then incorporated into the designs.
Mobile Designs
I used Adobe XD for the mobile designs as well.