Airbubble

Empower families and groups of friends who travel together a collaborative way to document, organize, and share their travel experiences and stays to the larger Airbnb community.

Adobe/Airbnb Creative Jam 2020
Boston ID# 09220
Mobile App 48 hours
Runner Up Top 12 / 365・Honorary Mention
Product Designer
Adobe XD
Profile
Contents Hub Features

Overview

Adobe and AirBnb introduced a weekend long design competition for college students to build a storytelling mobile app that would give AirBnb-ers a new platform to create new memories with shared travel experiences, and go back to booking stays with AirBnb after COVID-19.

What is Airbnb?

“Airbnb is an online marketplace for arranging or offering lodging, primarily homestays, or local experiences. Guests can book and rate lodging, in-person
tours, and virtual experiences offered by hosts across the globe.”

Prompt

“Empower families and groups of friends who travel together a collaborative way to document, organize, and share their travel experiences and stays to the larger Airbnb community.

In a mobile app, provide a way to combine photos and/or notes and transform their shared family trips into immersive stories about the culture and destinations they visit.”

App Info / Users

AirBubble’s main feature provides a zoomable global map that empowers its audience — families and groups of friends — to explore photos, stories, and experiences of other visitors. This collaborative direction is a great way to document real-time sharing and participation in the AirBnb community, and transform the way each destination’s cultures are experienced.

Statement

Since COVID-19, there has been a significant drop in people traveling and booking for overnights, due to the world-wide stay at home order and travel ban.

Roles / Responsibilities

I entered the Adobe / AirBnb competition as a main UX/UI designer for AirBubble, and my responsibilities include designing and wireframing the mobile application, and providing a working prototype for Adobe / AirBnb judges.

Scope / Constraints

This Adobe Creative Jam is a 48 hour sprint using Adobe XD as the principal program. Timing and task dividing were the most important decisions within this project, especially because of a +13 hour time difference between me and another team member.

Requirements / Goals / Evaluations

{ Requirements }
In order for my submission to be valid, these 3 project requirements must be met before the submission deadline.

① Must use Adobe XD to create/submit a prototype with 20 or more screen

② Project must be created during event and not elements can be in previous projects

③ Projects must be original in content, artwork, or Adobe Stock images, or cited images/text

{ Goals }
For goals, I aimed to include all of these suggestions provided in the prompt, though the gamified experience is an optional component.

① A feature for user(s) to add a single trip or multiple stories, during or after travel

② A feature for family / friends to contribute to trip regardless of age

③ A feature to share / arrange photos, videos, notes, recommendations, links, etc.

④ A feature for a gamified experience

⑤ A feature to allow user(s) to learn, favorite and save stories, discuss, and safely connect

{ Evaluations }
In order for my submission to be valid, these 3 project requirements must be met before the submission deadline.

① Is the target audience’s needs met with your solution?

② Does the prototype solve the problem in an innovative way?

③ Is the user experience and interface intuitive?

Process

The project began with the Creative Jam kickoff and distribution of the prompt. Before devising a plan to tackle the main points of the prompt, there were 2 sections I familiarized myself with: goals and evaluations. If one of these sections were neglected, my prototype would miss the prompt, or be lacking solution-wise.

Day 1: Planning & Design

The first step in designing this app was to strategize a direction to build a structure on. In brainstroming for ideas, I suggested the team’s start with a map as a home for user(s) to get a gobal visual on who added videos and stories on different continents.

A site called My Blue Thoughts (discoved by a teammate) also furthered my thinking in crafting a more interactive design centering on a map. Though this did spark ideation, I further looked towards Snapchat’s quick content distribution in timed snaps, and Instgram’s 15 sec stories as other inspirations.

{ Feature sketches / first revision }

Quick 1 hour brainstorming sketches

First sketch revision

Focused Pages

After the map became the base, I branched out and focused on the features listed in my goals, mainly these three:

A feature to share / arrange photos, videos, notes, recommendations, links, etc.

A feature for a gamified experience

A feature to allow user(s) to learn, favorite / save stories, discuss, and safely connect

Messaging Page

The messaging feature is one of the main icons on the navigation. Details like search bar, time stamp, and profile image are displayed as content to live in the layout.

Fulfills : A feature to share / arrange photos, videos, notes, recommendations, links, etc.

Explore / Saved Page

A sample of content placement and revisions with appropriate images, texts, and transitions. Every button and icon now has an action or a destination to either an internal app page or an external site.

The explore / saved page gives friends, families, and individuals a network to discover more about others’ experiences through photos, videos, and recommendations. This person-to-person connection lets users discover new likes and preferences.

Search Page

Fulfills : A feature to allow user(s) to learn, favorite / save stories, discuss, and safely connect.

Saved Page

Add Trip / Refer to Airbnb Features

While adding a trip, a simple animation in transition will provide additional visual understanding for the user, such as selecting a house to stay at.

Fulfill : A feature for user(s) to add a single trip or multiple stories, during or after travel

Profile Page

Inside each profile, there are recent trips / bubbles that exhibit favorited connections and experiences. The left image shows (1) how the users sees their own, and (2) how followers see their profile. The right image shows the pages that open up when clicking a bubble, and what members of the bubble have shared in the trip’s feed.

This particular feature was created to isolate the conversations and shared items within each recent trip; a space to display personalized collections, and a way to build your AiBubble character in recommending stays to other community members.

Fulfills : A feature to allow user(s) to learn, favorite / save stories, discuss, and safely connect.

AirBubble Points Feature

For the gamified experience, I introduced a point system to encourage AirBubblers to share within the community. Members would recieve points based on destinational recommendations and social shares, that would translate to AirBnb deals in a current trip or future adventure.

Fulfills : A feature for a gamified experience

Day 2: Reviewing Wireframes & Prototyping Screens

The second day of the competition was dedicated to rewiewing and finalizing all features and goals for AirBubble. With the app set to submit in the afternoon EST, I analyzed all the components needed to answer the prompt.

A problem that I was not able to figure out in time was the zoomable map. Taking notes from Google Maps and My Blue Thoughts, I wanted to have a map that users could pinch in and out of for each destination. I tested out several transitions within Adobe XD for a best fit to the intended action, but opted for a tap transition due to time. Though the map didn’t carry out like I intended it to, its design was to answer the intuitive and innovation aspect in the evaluations.

Version 1 & 2—Fulfills the basic requirements of the prompt; it’s the stage where function is a priority.

Version 3 & 4—Contains elements, features, and animations to embellish the pages.

Quick Style Guide

While I focused goals, I also created a style guide to organize AirBubble’s design decisions. From typography to icons, this was a great way to stay on track in the short 48-hour sprint.

Samples

Prototype

End of Project Preview

Oh dang, you’ve hit the end of the project!

But don’t worry, there are many other projects to explore. Feel free to keep browsing.

product design ← design sys ← product design ← design sys ←

ux / ui ♡ mobile ♡ related ♡ ux / ui ♡ mobile ♡ related ♡

archive •ᴗ• archive •ᴗ• archive •ᴗ•

˶ᵔ ᵕ ᵔ˶ the big scoop ˶ᵔ ᵕ ᵔ˶ the big scoop ˶ᵔ ᵕ ᵔ˶ the big scoop