airbnb logo

Experiences from airbnb introduces a whole new way to immerse yourself a travel destination. The design team was tasked to create an interface as immersive as the experiences themselves.

 

I worked heavily on many pieces of the Experiences UI and new search bar. I also created new city icon animations that are displayed after booking.

Experiences

 

The new Experiences UI utilizes video to immerse the user in airbnb’s new adventures. I explored many different options ranging from movie inspired trailers, music themes, text transitions and more to create a sense of excitement.

 

The UI itself also needed that same magical feeling. From the poster popup, seamless video transitions, and page scrolling, every detail was thought through.

Experience Poster Transition

 

I explored the transition from poster image to the video sequence as one of many in depth studies. These included theatrical fades, book-like openings, and traditional page swipe transitions.

Map Interface

 

Other pieces of the UI got revamped during the redesign, including the map search results. I explored ways transition to and from the map, as well as navigation, pin grouping, filters, and more.

Search Bar

 

The new search bar uses multiple scroll levels to reveal various levels of information. It smoothly transitions between each state regardless of scroll speed. During production, I also worked closely with developers to perfect the implementation on both Android and iOS.

Confirmation Icons

 

I had a lot fun with the icon animations on the mobile booking confirmation page. They were all created with vector shapes in After Effects and exported for code via Loddie. This process resulted in animations smaller than a single image. It allowed us to include a lot of animations in the code base, or download them on demand from the servers.