ABBI

ABBIConversational User Interface for Airbnb

 

Skills:
motion graphics
conversation design
branding/visual identity

Team:
Sharon Lee
Allissa Chan

Overview:
Abbi is a conversational user interface designed to help streamline the process of checking in and out of an Airbnb. To accomplish this, Abbi can provide specific check-in and check-out information, contact hosts, recommending restaurants/experiences.

Role:
I helped with initial brainstorming for the visual CUI states, identifying problem areas & complimentary functionalities, as well as creating and animating vector assets.

 

 

WHITE CIRCLES (INDIVIDUAL)

I started off the process by creating animations based on a few of the Cortana states individually. For this, I worked with the constraints of using one singular white circle. To emphasize the simplicity, I was unable to use effects/masks/etc. or have any part of the circle leave the canvas.

 

 

INTRODUCING NEW SHAPES (INDIVIDUAL)

After getting a sense of designing simple motions using these constraints, I began to work with color and an added shape (line) so as to introduce more elements into the design. Through the process of slowly taking away restrictions, it allowed me to pay more attention to more subtle design decisions, especially in

 

 

MOTION MAPPING

From here, I grouped up with Sharon and Allissa to map out our exercises based on categorization of our choice. We decided to look into intensity and positivity/negativity as a way to sort out each of our motion exercises. We mapped out the states followed by each of our exercises, and had them move based on the graph.

 

 

IDENTIFYING PROBLEM SPACE

From here, we decided to look into creating a CUI that would compliment Airbnb. We began to analyze the current user journey, comparing user testimonies and pain points.

Although there were many differences in each user’s experience, one constant was frustration with the process of checking into an Airbnb home, regardless of the location. As it is, there is no universal check-in process—hosts often relied on sending outside resources such as through Google Docs, PDFs, emails, plain text, etc.

 

 

DEFINING ABBI

Once we narrowed down our focus to the check-in (and subsequently check-out) process of Airbnb, we began fleshing out the functionality of our CUI.

We listed out a couple states that would be helpful in illustrating our concept and ended up with start, base, listening, processing, need more action, and confirmation.

 

 

STORYBOARDING

Due to the scope and timeline of this project, we decided to mainly highlight aspects of the check-in process. Our biggest challenge was to highlight parts of the application screens simultaneously with the character animation without making the flow of the video too overwhelming.

 

 

ASSET CREATION

From there, we began creating assets following the current illustration style of Airbnb. We focused a lot of our time designing our main persona as they would be highlighted most throughout the video. From there, we created backgrounds and various assets that would visually support the protagonist without being too overwhelming or competing.

 
ejfaeklgjl-23.png
 

SOUNDS

We began looking in to who might voice our main character and CUI. As the main character in question was created based on Allissa, we decided to user her voice.

As for ABBI, we decided on a few characteristics we wanted the voice to give off—welcoming, friendly, and informative. After considering the people around us, we asked our classmate Tammar to voice ABBI.

We found a soundtrack that was upbeat while not being too distracting to use as well.

 

 

COMPILATION

Finally, we matched up all of the assets with voice in After Effects. As we had a pretty fleshed out idea from our storyboard, we were able to place all of our assets quickly enough for us to work more in detail on the transitions and motion effects.

 

 

REFLECTION

While I had experienced working with CUI before, there was never really an emphasis on the visual form. Through creating ABBI, I was able to hone my skills pairing visuals with voice and functionality, especially by looking at the subtleties of looping motion.

Additionally, through this project, I gained a lot more experience working on motion graphics as a group. This project highlighted the importance of keeping files and layers named and organized.