Designing Airbnb for Apple Vision Pro

It’s an amazing time to be a builder. Apple’s Vision Pro is just months away from launch, the device is already in few developer hands and the visionOS simulator is available to anyone right now. More than fifteen years ago, Apple changed the world with the iPhone and its App Store. Will they do it again?

Designing or building for Vision Pro right now isn’t practical. Without a Vision Pro development kit from Apple, you can’t test your designs & apps on the actual device. Without users, you will be designing & building in a vacuum without any feedback. But you will be exploring uncharted territory.

A new computing platform shows up only once a few decades and this is one such instance. Vision Pro & visionOS are the culmination of more than three decades of Apple designing, building and fine-tuning their user interfaces.

Designing for visionOS feels visually different, yet functionally similar. As a designer or builder, you will feel familiar and yet be fascinated by the possibilities. This makes designing for visionOS exciting.

To begin designing for Apple’s Vision Pro, start with their design guidelines and WWDC videos. Among the many videos related to designing for visionOS, I found the following most helpful.

Additionally, set up Xcode and run visionOS simulator on your mac to become familiar with visionOS and Apple’s apps. This provides insights into their design choices.

Opening an app on our phones is frictionless. We do it so often and unintentionally that it is a problem. But, there is considerable friction in opening an app on the Vision Pro. You need to wear the headset first. To make the user come back, your app must deliver an unparalleled experience that is simply not possible on other platforms (mobiles or desktops).

When designing for visionOS, an important consideration is figuring out the level of immersion for each aspect of the user experience. Not every screen needs to be fully immersive. Each app should identify a core experience that compels users to return and design around that.

For example, when planning a trip and choosing rooms, experiencing a room in 3D with total immersion would make wearing the Vision Pro worthwhile. Although it's currently not possible to design an immersive experience on Figma, I created the user interface of the Airbnb app for visionOS leading up to the immersive view experience.

Apple's visionOS library for Figma provides styles, components, and templates to help you get started. This will allow you to focus on designing the user interface itself instead of recreating components and effects.

Designing for visionOS feels familiar thanks to Apple's use of familiar elements like navigation and buttons. With an infinite canvas and content taking center stage, secondary elements such as the tab bar and toolbar appear in separate small windows.

Tab bar feels familiar despite its new location on the left side of the app’s main window. A new toolbar floats closer to you than the content, but is tethered to bottom of the window. This toolbar is exciting and will contain the primary actions relevant to the page. For the Airbnb app, I used the toolbar ornament to display the nightly rate, dates selected, total price and the reserve button.

I love how modals work in visionOS by taking advantage of the depth and visual language. Modal elements like Sheets or Popups dim the background window and keep the modal at the same distance. They avoid eye strain and yet provide an illusion of depth.

The design language of visionOS prioritizes content over the user interface. Monochrome user interface elements don't distract from the content, and the "glass" window background adjusts to real-world lighting, ensuring crisp content display regardless of light or dark mode.

Some challenges I encountered included determining the right way to display tertiary actions. In the Airbnb app, I used underlined text for "Show more" to avoid excessive attention. However, this approach feels foreign to the platform, and better solutions will emerge in the future.

In the property details screen, deciding between using a box or spacing to separate relevant text was a challenge. I chose spacing and used a box for highlights, but there is room for improvement.

Given Vision Pro's initial target market of tech-savvy users willing to invest significantly in the device, I assume that for an app like Airbnb, users would want to experience a place virtually before committing to it. When you are paying a fortune for a place, wouldn’t you want to experience it before you go?

The additional friction in opening an app on Vision Pro is a positive aspect for now. It ensures that only exceptional experiences, impossible on other devices, are prioritized. What extraordinary experience will your app enable on visionOS?