The Airbnb User Journey

/portfolio

AIRBNB USER JOURNEY

In order to familiarise myself with Figma and put my UX/UI design skills to practice, I studied the Airbnb website user journey for booking a stay.

I first studied the website and produced paper wireframes which I then translated into digital ones. These served as a foundation for the interactive prototype and for the application of the interface styles.

Through this self-driven task, I have learnt how to efficiently use Figma; from creating a consistent design system to producing interactive prototypes.

PROJECT TYPE

Personal

SKILLS

UI/UX Design, Typography

Figma, UI/UX Prototyping Tools

FIELDS

UI/UX Design, Graphic Design

STATUS

Finished

2021

LIVE PROTOTYPE

Below is the live prototype that resulted from this project. The interface consists of four screens that follow the journey of booking a stay on the Airbnb website. Please note that the prototype is best viewed in full-screen mode (click the icon at the top right corner).

THE DESIGN PROCESS

Paper wireframes

The first step to this project was to study the user journey of booking a stay on the Airbnb website and sketch it out on paper. This allowed me to save time and increase efficiency while making the digital wireframes.

Digital wireframes

Once the paper prototypes were ready, I produced digital wireframes on Figma to serve as a foundation for the website layout and interface styles. You can see these below. I also utilised there wireframes to set up an initial interactive prototype to study the user journey.

Styles

After setting up the wireframes containing the main layout and user flow, I focused on the interface. While I aimed to maintain Airbnb’s styles, I applied my knowledge of typography and spacing and maintained a consistent style across all screens. Fot this, I set up a UI library in which I made style changes to components, which would then be automatically pushed to each instance of the component.

The final Figma live prototype is available at the top of this page.