Portfolio: Airbnb Homepage & Neighborhood Guides
I joined Airbnb in 2012 to a product team of about 30, including engineers, product managers, and a handful of designers. As an experienced designer as well as engineer, I occupied the unique position of “Design Engineer,” the only person to be a member of both the design and engineering teams. I reported to Joe Gebbia (cofounder and Head of Product), and specialized in high-profile product launches and other time-sensitive projects that required a tight coupling between design and engineering.
Many of my original files have been lost to the sands of time, but I’ve reconstructed as much as I can with the help of the Wayback Machine and 2012 news articles.
Airbnb of 2012: A Different Era
The Airbnb brand and website were quite a bit different in 2012. The site had a friendly DIY aesthetic (with heavy dose of skeuomorphism), the typography and colors were mismatched, and the use of photography was more utilitarian than it is now.
Cofounders Brian Chesky and Joe Gebbia recognized early on the importance of photography in communicating listing details and building user trust, and often told the story of renting camera equipment themselves and hopping on a plane to New York to photograph listings in the very early days.
For several years after that, Airbnb offered free professional photography for all new listings, which created an extensive library of high-quality photography all around the world.
A Missed Opportunity
As a new designer at Airbnb (and a photography enthusiast), I noticed a mismatch between our beautiful listing photography and what we communicated on the homepage. I saw an opportunity to feature photography much more prominently on the website, and help immerse visitors in a desire to see the world and discover new places.
I created some mockups of new homepages and started sharing them with my coworkers and the founders. Meanwhile, another team was focused on building Wishlists, and approached me to launch a new homepage in time with the new feature launch.
In a quick two-week sprint (only a few months after joining the company) and some graphic design assets from the Wishlists designer, I built and launched a new, photography-focused homepage in time for the Wishlists product launch.
Photography, Meet Neighborhood Guides
Right about this time, Airbnb also acquired a startup called Nabewise. Immediately after the Wishlists launch, I was charged with joining their team of two engineers, a PM, a cartographer, and a writer to design all-new neighborhood guides for Airbnb.com, with a launch date of November 2012 — only four months later.
These guides were primarily meant to provide guests with more information about where to stay in a city, since unlike hotels, Airbnb listings weren’t isolated to tourist districts. Other directives included helping travelers orient themselves relative to waypoints like the airport and major tourist destinations, and making it easy for visitors to find Airbnb listings in their chosen neighborhood.
The Landscape: Encyclopedia-like
Most of the web-based travel guides at the time were direct translations of paper travel guides, and felt fairly utilitarian and encyclopedia-like.
Initially the amount of information we wanted to include felt overwhelming: we had maps, we had waypoints, we had long-form content, in-depth descriptions and tags suggested by hosts, photos, quotes, Airbnb listings, and similar neighborhoods. It would be easy for that content to become an unusable deluge that users just skimmed right over. We needed something engaging and accessible.
An Approachable Hierarchy of Information
Based on the extensive interviews and studies the two UX designers at Airbnb had done to understand how guests booked listings, I sought to get into the reader’s head and make sure we revealed information at the moment people were looking for it.
Imagine the way you might describe a neighborhood in your city to a friend visiting from out of town: first, you might give high-level descriptors: is it touristy? Artsy? A destination for nightlife? From there, maybe you’d give a short description of what it’s like to visit, and then what transit or parking is like.
I tried to mimic that progression of information on each neighborhood guide: a single large photo helped anchor the page and set the atmosphere, a snappy description and tags gave a good high-level impression, and a map with nearby neighborhoods helped orient the user within the city.
More than a Cerebral Decision
But traveling isn’t just about finding a place that checks all the boxes. We wanted to communicate that sense of wonder in exploring a new place. Influenced not by traditional travel guides but by photo blogs and travel journalism, I started to explore mockups of highly editorialized pages, with lively photography of people and places.
Many travel guides published beautiful photos of famous landmarks, but we wanted to share what it felt like to live in another place, and not just visit it. Our initial mockups included slideshows, but I soon realized that a long scrolling format was far more immersive.
Our team was truly scrappy: right before launch, we realized we didn’t have quite enough photos of the Mission, so I took my camera with me on the way to the office and snapped a few myself, including the Dolores Park header photo and the above picture of a man with his dog on Muni.
Travel Advice From a Local Friend
Our talented editorial writer worked closely with members of our international offices to write about different neighborhoods — not with the impartial air of a travel guide, but with the incisive wit and expertise of a friend who lived there.
The photography recruiter and I pushed hard to work with talented local street photographers who knew these neighborhoods intimately, and to feature their bios and websites on the neighborhood guides they photographed.
Putting it All Together
Once we’d pinned down the neighborhood pages, we still needed to figure out an entry point. It could’ve just been a splash page with a list of neighborhoods, but we wanted a meaningful way for visitors to find the neighborhoods they’d love.
After hundreds of mockups and conversations and demos, I ended up putting together a quick HTML/JQuery prototype to illustrate an interaction I had in mind— and suddenly our CEO was on board. It was a lesson I’d never forget; a working prototype is worth a thousand conversations.
The city page became a single question posted to the visitor: “What kind of neighborhood are you looking for?” Available answers included “Touristy” or “Great Transit” or my favorite: “Loved by Locals.” Users could select multiple criteria to narrow down their favorite spots, and then filter Airbnb listings by those neighborhoods.
Launch Day
We had a lot of positive comments the day of the launch. “Airbnb’s launch of neighborhoods today is beautiful. From aesthetic, usability & utility points of view. Amazing job” is still one of my favorite design compliments.
Neighborhoods Legacy
Over the next several years, the neighborhood guides expanded from 7 cities at launch to a height of 23 cities, from Melbourne to Seoul, Tokyo to Tel Aviv. They were effective entry points for new users coming from Google, and points of pride for the local offices.
The guides were eventually absorbed into the core search flow in 2020, but their legacy lives on. We weren’t the first to use full-bleed photography, but we did help popularize it, especially in the real estate and travel space. It was interesting to watch the design language of the time propagate across the web. Here were Zillow and Redfin’s homepages in 2012:
And the same homepages the following year:
Unique, compelling photography remains a core piece of Airbnb’s brand.
And Compass still uses a nearly identical layout for their guides.
If you’d like to see a semi-intact original guide, this is the most complete one I’ve found: San Francisco’s Mission District on the Wayback Machine.
I’ve worked on many different projects over the years, but I’m still amazed at what our small, scrappy, incredibly talented team was able to put together in only a few months. From the photography, to building the back-end editorial tools, to the writing and the design, creating three hundred guides in seven cities was a herculean effort, and I’m proud to have been a part of it.
Want to see more of my work? Read about Curious Fictions.
