Duration - 6 weeks
Team - Carol Auh, Claire Chen, Nina Gao, Shafiqah Zulfikar, Shelley Tao
Tools - Figma, Adobe After Effects
Skills - Interview, Research Synthesis, Journey Map, Flow Diagram, Ideation, Storyboarding, Prototyping, Filming, Video Editing, Presentation
Our team designed a voice user interface for Airbnb, to provide a communication platform among guests, hosts and Airbnb during stays. Through the virtual assistance Belo, we enabled asynchronous communication between guests and hosts, established a central communication channel for all guests, integrated with Airbnb experiences to predict user needs, and offered hands-free interaction when hands are busy with luggages or vehicle. Below is our demo video showing the key features and user journey with Belo.
Research
After deciding on our client – Airbnb, we conducted deep interviews with Airbnb frequent users aged between 20 to 50 and asked them a list of questions. The interviews began with questions about their demographics and then focused on their experiences with Airbnb, including the specific processes and communication. We also asked about their overall experience with voice user interface. Finally, we extracted the data we collected and organized it on an affinity map to identify trends and patterns.
Building on that, we synthesized the key points in terms of "what we heard", "what we learned", and "what it means for design". The third column informed our future decision on design opportunities.
In order to narrow down our scope and prioritize our findings, we created a value map according to our project requirement and our own priority. The findings were plotted on two axes: "relevance to VUI" and "value for users". This allowed us to identify three main areas or scenarios that we should explore further as the next step:
- Answer questions directed to hosts
- Different types of orientation upon check-in
- Navigation to Airbnb homes/parking
We then created user journey map to identify design opportunities, especially those related to voice user interface (VUI).
Meanwhile, we analyzed the current Airbnb app interface, as well as voice user interfaces on different platforms.
Concept Development
Design Opportunities
With reference to the detailed journey map, we highlighted the most essential and typical pain points along the user journey, and identified three key design opportunities for the VUI of Airbnb:
- Build transparency among guests
- Get instant support for troubleshooting
- Access curated local travel experience
Proposed Solution
Overview
With the design opportunities set up as our goals, we mapped out our value proposition around two main values of our design – a central communication channel and hands-free interaction. The latter value stems from the nature of voice interaction which we have been structuring since the selection of the client, whereas the prior one was developed based on the core issues that we want to address. We chose mobile and smart TV as two modalities to facilitate the communication between guests, hosts, and Airbnb. It not only enriches the experience of the users but also supports the new business and brand direction of Airbnb.
Between Host and Guest
The VUI mediates the communication between the hosts and guests. By providing an automatic and asynchronous communication channel, we aim to alleviate the pain point found from initial research around a direct conversation between the host and guests. Users can ask questions anytime without hesitating to start a conversation with the host and also get an instant support for questions and troubleshooting. At the same time, hosts can reduce the load of repeatedly answering questions from guests. The frequently asked questions will be stacked on the database to automatically be retrieved while crucial information such as availability of early check-in or change of rules can be updated through communicating with the VUI.
Among Guests
While it is a common case that a group of people share a trip, the VUI connects multiple users to the trip, allowing all the members to efficiently share information regarding the trip. It alleviates a certain guest who booked the space being responsible for retrieving and sharing all the information and asked to handle issues. Through the mobile VUI, all the guests will have same accessibility to the information, allowing them to asynchronously communicate with the VUI. On the other hand, the smart TV VUI on the Airbnb location will allow the group of guests to simultaneously interact with the virtual assistant. It will ease the conversation within the group, leading to effective discussion, decision making, and designing the trip experience together.
Between Airbnb and Guest
The VUI in the smart TV also acts as a communication channel between Airbnb and the guests. Combining the hospitality TV in hotels for the device and concierge service as the VUI, it actively supports the current business direction of Airbnb. Through the back screen of the TV, the expeditionary contents from Airbnb space and experience will be naturally exposed the guests. The VUI will be the promotion channel for the Airbnb group to share the resources that they have in order to enrich the guest’s whole trip experience.
Storyboard
After narrowing down on our values and opportunities, we started to depict the major stories in the user journey of an Airbnb guest that will best represent the features of our VUI design. As a result, we created storyboards to help understand the main elements of the stories that we wanted to bring out. Below are the five stories explained in detail:
- Booking Confirmation – the virtual agent is introduced to the guest and the guests ask the agent to share the trip invite to other guests who are coming to the trip.
- Pre check-in – a few days before the trip, the reservation owner is notified about their upcoming trip and the agent helps the user to request for an early check in.
- Navigation – user asks the agent for the exact location of the Airbnb home before leaving and gets assistance about the garage entrance when near the location.
- Orientation – the agent welcomes the guest when they arrive to the home and provides the basic house rules and instructions, users can also ask questions to the agent regarding the home.
- Recommendations – Airbnb recommends places for the guests to visit and sends details to all the guests on their phone.
VUI Identity
Meanwhile, we started to analyze Airbnb's brand identity and visual guidelines in order to design the interface and motion states of VUI. For the font, as the Airbnb font (Cereal) is not available for public we replaced it with the closest match in terms of line weight, height etc. The font we are using is Avenir. We also named our VUI as Bélo, since the name of the Airbnb logo is called Bélo.
Brand Identity
VUI Form
The process of creating the motion states for the VUI logo was highly iterative. Our team brainstormed using three key brand words: thoughtful, inclusive, and straightforward. These words were chosen because they align with Airbnb's own brand personality and because we wanted the VUI logo to convey a welcoming and efficient character. Additionally, we aimed to ensure that the logo would effectively convey the concept of "voice" and "assistance."
The final VUI logo retained elements from the original Airbnb logo, such as the use of a single line in 3D and the same color scheme. The shape of the logo was modified to convey the concepts of "voice" and "assistance", representing a virtual assistant for guests, similar to a hotel concierge. The brand identity of being inclusive, thoughtful, and straightforward was also taken into consideration in the design.
As soon as the form of VUI has finalized, we are able to explore the motion states. We did research into prevalently used VUIs such as Siri and Google Home, and determined the motion states after several iterations. The finalized motion states are shown below.
Mobile Prototype
Template
In our endeavor to design the voice user interface (UI) for an existing application, we have made a mutual effort to maintain consistency with the visual identity of the original Airbnb app. To this end, we have developed templates for the voice UI system which can serve as a reference for the creation of various pages. All colors and components have been directly implemented or adapted from the existing Airbnb app. Below are components in current Airbnb app that we used as reference to develop the VUI interfaces.
The first page below highlights the position of Belo within the app interface, represented by the white floating circle on the bottom right of the screen. Given that Belo's role is limited to assisting users from the booking confirmation stage to checkout, it was deemed unnecessary to embed Belo within the bottom menu bar. The second page depicts the initiation of Belo, occupying only a small portion of the screen. Upon interaction with the user, the chat window expands to occupy the full screen, allowing the user to clearly view the conversation history while conforming to the established Airbnb element. The fourth and fifth pages showcase the results and option cards, which serve as components utilized throughout our design.
Booking Confirmation
Now I will present the highlighted scenarios that best represent our design thinking. The first scenario is booking confirmation, where the reservation owner completes the booking and is introduced to Belo. We made the onboarding screens to explain the basic function and the role of Belo in the Airbnb experience. Inserting the onboarding process right after booking confirmation can i) make sure the user is aware of this onboarding process — when the onboarding is in the form of a notification or message, it is likely for the user to ignore; ii) increase the chance for the user to use Belo by giving an overview of Belo’s benefits; iii) decrease user’s concern of privacy issue through our language.
In this scenario, we used “share trip details” to illustrate a typical interaction between the user and Belo, as it is the most essential step in booking confirmation stage and reveals Belo’s value as a central communication channel between guests.
Pre Check-in
The pre check-in stage is not in the original Airbnb app workflow. We added this step three days prior to the trip to remind user of the Airbnb stay details, in order for the user to double check their trip. If the user encounters any problem – in this case, the user requests an early check-in – Belo will suggest solutions as well as making arrangement for the user without talking to the host. This represents Belo's ability to act as an active reminder and an asynchronous communication channel between guest and host.
Navigation
Navigation is one of the Airbnb users’ major pain point, and we tackled this issue by using Belo as an instant, asynchronous communication channel between guests and hosts. Belo can easily extract address information and direct the user to a navigation app, and also conveys host’s instruction to the user instantly when it is needed. The VUI property also allows hands-free communication which is suitable during driving.
TV prototype
Template
The user interface of Airbnb app on TV has three layers – the conversation layer used for the display of on-going conversations between user and Belo, the shade layer acting as a dark mode converter which aligns with traditional TV UI designs and decreases disturbance of lighting to users, the bottom layer casts Airbnb's recommended houses that also appears on the home page of Airbnb mobile app which acts as a promotion.
Activation Modes
Below is a diagram explaining the different activation modes of Belo TV. When the guest has not checked in, the Belo area is a small circle with static Airbnb logo. Once the guest checks in by saying "Hey, Belo", the Belo area enlarges and the welcome animation plays. During the stay, the guest will often see a static Belo logo on a small circle showing that it is not activated, and when Belo is activated by the guest, the circle enlarges and the according motion state plays.
House Instruction
To demonstrate Belo TV's ability to fetch instructions instantly, we prototyped this interaction when one the guest asks for instructions for making the futon bed. This feature acts as an asynchronous communication channel between guest and host, enabling the guests to fetch any data from the information pool set up by the host.
Experience Recommendation
Another highlighted scenario we chose is the trip recommendation feature of Belo TV. When a user asks for recommendations of activities, Belo will go to Explore mode and pull information from Airbnb experience. This promotion of Airbnb experience acts as a communication channel between Airbnb and guests. While the guest is interacting with Belo TV, all guests can watch and join the conversation, which makes decision-making easier among all guests.
Reflections
For this project, I had the chance to analyze and recreate the components of an existing app with a mature visual system. I felt the importance of templates and componentization, especially during team work. One lesson I learned was to always keep everything organized with appropriate names, and communicate with teammates timely. Although I was already doing these for previous group projects, I still feel the pressure to get everyone on the same page. Therefore, communication is never enough among teammates.
One thing that I would like to improve is the conversation section of the TV prototype. If we had more time, I will do more in-depth research into VUI on TV and discriminate the guests' and Belo's speech in a better way.
Overall, I enjoyed this project a lot and worked really well with my teammates. With the current trend of AI, I see more potentials on the development of smart voice assistance. I would definitely want to explore more in this area if I have the chance in the future.
