Airbnb Mobile Interaction Prototype
GIT 314: Multimedia Design, Planning, and Storyboards
Arizona State University | Professor Quest Rogers
01/09/23-04/28/23
Introduction
This project showcases a UI/UX motion prototype for Airbnb, completed as part of GIT 314: Multimedia Design, Planning, and Storyboards. The focus was on creating engaging user interactions through motion design, using After Effects as a prototyping tool. This project allowed me to explore interface animation, user interaction timing, and motion best practices to enhance the digital experience.
The prototype meets key requirements, including four interactive screens, two unique user transitions, and a menu interaction, ensuring logical screen flow and visual continuity. I applied keyframing techniques, track mattes, and motion interpolation to create smooth and intuitive transitions. This project demonstrates a practical application of motion principles in UX design, reinforcing how animation can improve usability and guide user engagement.
Creative Brief & Sketches
Made and Sketched in Microsoft Word
This creative brief outlines the design strategy for a mobile app prototype for Airbnb, focusing on enhancing user engagement through motion design and seamless interaction. The goal is to deliver an aesthetically pleasing and intuitive experience tailored to modern travelers who rely on mobile platforms for booking accommodations and experiences. Built for the iPhone 13 resolution, the prototype emphasizes fluid transitions and interactive
UI elements that align with Airbnb’s brand identity. The brief references Airbnb’s official color palette, including Rausch pink, blue, and green accents, and brand fonts like Airbnb Cereal and Fira Mono to ensure visual consistency. By centering usability and motion, this brief sets the foundation for a prototype that brings together branding, storytelling, and smooth functionality in a cohesive user journey.
Composition
This composition was created using Adobe After Effects and Photoshop with AI-generated images from Midjourney.
This final motion prototype was created in After Effects and exported as an animated GIF to display the interactive flow. The project followed strict design parameters, including a 1080x1920 resolution, 30 frames per second timing, and smooth interpolation using ease in/out techniques.
Animations were designed within the 200ms–500ms range to maintain natural pacing and responsiveness. Transitions between screens were carefully crafted using track mattes and masking techniques to create a cohesive user experience. This final result demonstrates how motion enhances usability by providing visual feedback and guiding user interactions seamlessly.
Hi-Fi Storyboard
Created in Photoshop & After Effects
This storyboard presents the key interaction screens for the Airbnb mobile prototype, mapping out the user journey from discovery to saved experiences. Each screen, including Home, Results, Saved, and Location, is carefully designed to reflect the visual consistency of the Airbnb brand while highlighting fluid motion and intuitive layout.
The storyboard demonstrates how users navigate through core features, emphasizing large touch targets, clean spacing, and visual hierarchy optimized for mobile. By outlining these primary screens in sequence, the storyboard communicates both the functional structure and the aesthetic rhythm of the app, serving as a visual blueprint for how motion and user intent come together in the final prototype.
What did I learn?
Beyond technical skills, this project reinforced how human-centered design isn't just a concept.
It's a process that requires thinking ahead, predicting struggles, and proactively solving them through thoughtful interaction design.