Airbnb Media Uploader
2021 | Role: Experience Designer | Members involved: Joshua Pekera
The problem
Product teams at Airbnb were constructing and maintaining their own media selection and upload patterns. This includes the uploading of images, video, and documents.
This was creating inconsistencies in the product and causing engineering to maintain redundant patterns.
The goal was to design an adaptable pattern to be provided at a system level.
Guiding principles
Adaptable
Adapt to different file types
Adapt to a max number of selections
Clear
Provide affordance for selection guidance.
Provide expectations for what users are allowed to select (file type and quantity).
Provide feedback for what users have selected.
Goals
Create a media selection pattern that can be leveraged by product teams for their use cases.
Explore additional patterns that compliment the selection pattern.
Systemize how a source view represents the entry into a selection pattern as an empty state and non-empty state.
Research
I conducted an audit of upload experiences across Airbnb to understand the current state of things.
System
Solutions
Source view — Empty state
Where a user is prompted to add media.
Product examples
Source view — Updated state
Displays selected media for upload
User can intiate an edit view for an attached media item
User can intiate a preview view for an attached media item
User can remove an item that was previously added
Selection view
Where users browse photos and videos on their device.
Editing
Accessibility
To ensure we reached all users, we included the ability to add alt-text to the image.
