Context

After working remotely for airbnb in 2019, I was invited to join their team in San Francisco at the beginning of 2020 to execute one more project.

It was when I joined the Core Host - Organic Growth team for 4 months. A team responsible for designing the flow (List Your Space - LYS) that prospective hosts go through when they want to list their spaces on airbnb.

UX Visual Design Design System approach +Implementation

List Your Space Flow

The ask

-

Improve the experience of the Photos Step in the List Your Space Flow.

Why?

-

40% of prospective hosts say photos are a blocker from listing their spaces.

Together with an airbnb researcher, I could identify a few reasons why the photos step was a blocker to users and airbnb’s biggest drop-off:

  • People didn’t know how to take good pictures.

  • People were planning on fixing the house like cleaning or buying new furniture before taking the pictures.

  • People felt frustrated their pictures weren’t good enough.

  • People felt frustrated their spaces weren’t as beautiful or well-decorated as other listed spaces.

  • People prefer to take pictures during the weekend.

  • People were confused about how to. upload pictures.

Comprehensive

Audit

After talking to researchers to gather information about the photos step, I ran a comprehensive audit to better understand the entire flow and experience and find places for improvements.

For that, I mapped out all possible use cases on web, moweb and native. Applying heuristics allowed me to identify parts of the experience that weren’t behaving effectively.

Solutions

Some of the strategies explored to improve the Photos Step experience:

  1. Guiding users on how to take great pictures (both text and imagery)

  2. Consistent elements and behavior throughout the experience.

  3. Error prevention and error recovery.

1.

Guiding users on how to take great pictures

As one of the main reasons for users dropping off when getting to this step was the lack of understanding of how to take good pictures, I started by creating a definition of what good photos were.

Airbnb had previously created extensive research about what makes listings great and what makes photos great. But now, I needed something concise that wouldn’t overload users.

For that, I worked with a content strategist. Together, we choose what we believed to be the 6 most important factors of the research and transcribed that into a list of 6 simple bullet points with actionable information.

Quick tips for quality pics

The tips box was added to the right side of the interface. As I wanted to offer visual guidance to users who wouldn’t stop to read, for example, I worked together with illustrators to create 5 illustrations that were a great representation of how the photos should look.

The reason why illustrations were chosen instead of real images, is because it prevents users from comparing their spaces to the ones in the photos and consequently feeling anxious and dropping off this step.

According to the data scientists on the team, 5 pictures were the ideal minimum necessary to create a successful listing. For this reason, I chose to populate the interface with 5 illustrations that would be replaced as the users uploaded their own pictures.

2.

Consistent elements and behaviour

After working on guiding users with important information on how to take photos, I started working on creating a consistent experience as I identified, during the audit, that the design and the behavior for the uploading area and button changed throughout the experience, unexpectedly.

Upload photos area

I worked on creating different states for the uploading photos area as you can see on the right.

The different states are:

  • Default and default shrunken

  • Hover and hover shrunken

  • Loading and loading shrunken

Upload photos area

Based on the fact that the quality of the pictures and the amount are defining factors when it comes to creating successful listings.

I wanted to remove any friction users might face when adding pictures and encourage them to add photos by having the uploading photos area and button always present on the interface through a sticky bar as you can see on the right.

3.

Error prevention and error recovery

During the audit of the LYS flow, I tried to stress the system by uploading different files such as videos that were too small or too large.

During this process, I noticed that the system wasn’t offering any error message, prevention, or recovery to users.

Error messages

I worked together with developers to understand what files the system supported, creating error messages to prevent users from making the same mistakes several times or feeling frustrated with the system.

Responsibilities

-

As the product designer responsible for this project, my responsibilities were: Identifying problem areas, idea generation concept development, contact different stakeholders, managing design approvals, handing over designs to developers, among others.

The final delivery included designs for web, mobile web, iOS and Android.