s
01
Project Specs
2020・48 hrs・Mobile AppMy Role
UX Design・UI Design
Programs
Adobe XD
Competition
Runner Up・Top 12 / 365
Tags
Adobe/Airbnb Creative Jam・Team/F.Lin・Travel・Family/Friend Community
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.
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.”
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.”
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.”
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.
Goals
I aimed to include all of these suggestions provided in the prompt, though the gamified experience is an optional component.
Evaluations
As for evaluations, I kept in mind how the judges would view / analyze my prototype.
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
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
As for evaluations, I kept in mind how the judges would view / analyze my prototype.
︎︎︎ 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 /
Lo-fi & Hi-fi
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.
Rough digital sketches / first revision ︎︎︎
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.
Rough digital sketches / first 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.
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.
Fulfills
A feature to allow user(s) to learn, favorite / save stories, discuss, and safely connect.
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.
Fulfills
A feature to allow user(s) to learn, favorite / save stories, discuss, and safely connect.
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.
Included to Fulfill:
A feature for user(s) to add a single trip or multiple stories, during or after travel
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.
Included to Fulfill:
A feature for user(s) to add a single trip or multiple stories, during or after travel
Profile
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.
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
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
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: Review
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.
Wireframes ︎︎︎
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.
Wireframes ︎︎︎
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.
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
