Bélo
Timeline
September – October 2022
Team
Carol Auh, Claire Chen, Nina Gao, Shafiqah Zulfikar, Shelley Tao
Contribution
Research & Synthesis, Ideation, User Interface Design, Digital Prototyping, Video Production, Presentation
Tools
Figma, After Effects
Bélo is a voice user interface tailored for Airbnb, aimed at fostering seamless communication amongst guests, hosts, and Airbnb throughout the trips. Introducing the virtual assistant named "Bélo", we have successfully facilitated asynchronous interactions between guests and hosts, streamlined communication across all guests, seamlessly integrated with Airbnb experiences to anticipate user requirements, and provided a hands-free interaction mode – particularly useful when guests are preoccupied with luggage or transportation arrangements.
Problem Space
Our project's initial prompt was to develop a voice user interface for an existing platform, and after careful consideration, we chose Airbnb as our subject of study. Through extensive research, we unearthed Airbnb's core mission – create a world where anyone can belong anywhere. Meanwhile, since the two core products of Airbnb are the accommodation marketplace and Airbnb Experiences, we aimed to establish synergies between the two products and amplify each other's impact. This section will guide you through all the research and synthesis we undertook to identify the problem space.
Stakeholder Map
In secondary research within the Airbnb ecosystem, we translated our discoveries into a stakeholder map, illuminating the interconnected positions of stakeholders and the relationships that bind them. This map provides a panoramic view of stakeholder dynamics within the Airbnb landscape.
Primary Research
To better understand the target users of Airbnb, we conducted in-depth semi-structured interviews with frequent users aged 20 to 50 and gathered invaluable insights into their personal encounters, the intricate processes they've navigated, their preferred modes of communication, and their experiences with voice-driven interactions. We organized this information using an affinity map, allowing recurring themes and patterns to emerge, which illuminated our design trajectory.
Research Synthesis
Expanding on this foundation, we distilled our findings into essential insights categorized as "what we heard", "what we learned", and "what it means for design". The guidance from the third column shaped our approach towards identifying and embracing design opportunities that lie ahead.
Value Map
To streamline our focus and rank our discoveries, we constructed a value map that aligned with our project's criteria and our internal priorities. The insights we gathered were positioned along two axes: "relevance to VUI" and "value for users". This approach enabled us to pinpoint five design opportunities that worth deeper exploration in the upcoming stages:
- Answer questions directed to host:
The capability to answer guests' questions instantly on behalf of the host - Asynchronous option for orientation:
The option for guests to access the orientation of the Airbnb stay at anytime, without the need of in-person interaction - Personalized local recommendations:
Providing curated travel insights into local area and promoting Airbnb experiences to guests - Central information hub:
A holistic communication platform for guests, hosts, and Airbnb, ensuring information transparency - Hands-free interaction:
An accessible voice user interface allowing hands-free operations
Concept Development
Building upon our initial research insights and scope, we employed a range of design methodologies to narrow down the problem space and define the design opportunities. Subsequently, we developed design solutions with precision and relevance. The following section will lead you through this transformative journey by spotlighting the key stages of our concept generation process.
Journey Map
With reference to the interview quotes and our own experience, we generated a journey map with storyboards to demonstrate an imagined Airbnb user's journey with the presence of a voice-enabled virtual assistant, from "booking confirmation" to "during stay". We structured our journey into these five distinct stages for a specific reason. These stages include the design opportunities from the value map that hold the highest priority, and as a result, concentrating on these stages allows our solution to effectively address problems with precision and comprehensive coverage. This map helped us organize our ideas, identify touch points, and embed voice user interface seamlessly in our final deliverable.
Design Opportunities
Distilled and organized from the detailed journey map, we created this simplified version to showcase the pain points, from which the design opportunities were defined. This simplified journey map acts as a solid base for the design principles' development and the demo video production. The three design opportunities we concluded are as below:
- Build transparency among guests:
Promoting information transparency among guests, ensuring essential details like reservation information can be shared without the need for public broadcasting every piece of information. - Provide instant support for troubleshooting:
Delivering immediate assistance for guests' needs, eliminating any reluctance to contact hosts and mitigating potential waiting times for hosts' responses. - Suggest curated local travel experience:
Facilitating guest's access to a tailored travel experience in an unfamiliar place, while promoting Airbnb experience and supporting local experience hosts.
(Click the gif below to see a static version of the simplified journey map)
Value Proposition
Aligned with our established design opportunities, we formulated our value proposition, revolving around two fundamental principles: a centralized communication platform and hands-free interaction. The former value was defined based on the three design principles, while the latter value emerged from the inherent characteristics of voice interaction, which we've been honing since the project prompt. Our chosen modalities, mobile and smart TV, serve as the channels for fostering seamless communication among guests, hosts, and Airbnb. This choice not only elevates user experiences but also resonates with Airbnb's evolving business and brand direction. Now I will explain the rationale of our solution in detail.
Communication between Guests and Hosts
The voice user interface (VUI) plays a pivotal role in mediating communication between hosts and guests. By offering an automated and asynchronous communication channel, our objective is to address a key pain point identified in our initial research – the challenges associated with direct conversations between hosts and guests. This solution empowers users to ask questions at their convenience, eliminating any hesitation in initiating communication with hosts. Additionally, it provides immediate support for inquiries and troubleshooting. Hosts could also benefit from reduced repetitive queries, as frequently asked questions are compiled in the database for automatic retrieval. Crucial information, such as early check-in availability or house rule changes, can be seamlessly communicated to users through interactions with the VUI. This approach effectively streamlines the flow of information between hosts and guests.
Communication among Guests
Since group trips are very common among Airbnb users, our VUI seamlessly connects multiple users within a trip, facilitating efficient information sharing. This approach eliminates the burden on a single guest who initially booked the accommodation, ensuring that responsibilities for retrieving and disseminating information are evenly distributed. The mobile VUI empowers all guests with equal access to information, enabling asynchronous communication with the virtual assistant. Moreover, the smart TV VUI positioned at the Airbnb stay enables the entire group to engage with the virtual assistant simultaneously. This fosters group conversations, discussions, decision-making, and a collaborative curation of the trip experience. The result is a more cohesive and inclusive journey for all involved.
Communication between Guests and Airbnb
The VUI integrated into the smart TV serves as a communication channel connecting Airbnb and guests. By leveraging hotels' TV features along with the virtual concierge service, this innovation actively aligns with Airbnb's present business trajectory. On the TV display, expeditionary content from Airbnb stays and experiences will be presented to guests. The VUI-embedded TV takes the role of a promotional platform, allowing the Airbnb community to share their resources and insights, thereby enhancing the overall travel experience for the guest. This dual-purpose interaction supports Airbnb's business strategy and contributes to the comprehensive enrichment of the guest's travel experience.
Below is a visualized concept model to represent our values clearly.
Visual Identity
Concurrently with concept generation, we analyzed Airbnb's brand identity and visual guidelines to inform the design of the graphic user interface (GUI) and motion states of the voice user interface (VUI). To add a distinct touch, we named our VUI after "Bélo", because the Airbnb logo is known as "Bélo".
Visual Guidelines
Through secondary research, we analyzed the brand identity of Airbnb on to a radar diagram, and indicated its five core values, with Straightforward, Thoughtful, and Inclusive as the three primary values. These values were selected due to their resonance with Airbnb's brand identity, and our intention to infuse Bélo with a hospitable and efficient impression. This brand identity analysis helped us develop the logo and motion states of Bélo.
Below are the color palette, iconography, and typography of Airbnb that were used in our design system for graphic user interface. Regarding typography, as the Airbnb font (Cereal) isn't publicly accessible, we opted for the closest alternative in terms of line weight and height – Avenir.
VUI Identity
Developing the motion states for the VUI logo was a deeply iterative process. Our team did brainstorming sessions anchored by the three brand values: thoughtful, inclusive, and straightforward. Simultaneously, we were trying to communicate the notions of "voice" and "assistance" in the logo's visual presentation. By harmonizing these components, we created motion states that keep the essence of the VUI while remaining true to Airbnb's distinctive brand personality. Below are initial explorations for the VUI form and the finalized motion states of Bélo.
Mobile Prototype
Building on the value proposition (review model), we constructed real-life scenarios to showcase our proposed solution, specifically tailored to those three stages. These scenarios were used in the demo video, narrating the complete story of an Airbnb journey enriched by Bélo. To provide a comprehensive view, we complemented these scenarios with prototyped interfaces. This step amplifies the clarity of our solution, offering an illustrative glimpse of how Bélo seamlessly enhances every step of the guest's journey within an authentic context.
Templates
As we were embedding a Voice User Interface (VUI) into an existing application, we aim to maintain a consistency with the original Airbnb app's visual identity. In pursuit of this objective, we created templates for the VUI system, intended as blueprints to guide the construction of diverse pages. The entire spectrum of colors and components has been either directly implemented or adapted from the existing Airbnb design system, ensuring a smooth and harmonious user experience. Below are the components present in the current Airbnb app, which have been employed as reference points in the development of the VUI interfaces.
Regarding the template pages we created, the first page accentuates the positioning of Bélo within the app interface, denoted by the white floating circle positioned on the lower right corner of the screen. Deliberately designed, Bélo's function is tailored to assist users exclusively from the booking confirmation to checkout. As a result, this floating circle is only present during this period of time.
Moving on to the second page, bélo is occupying a compact section of the screen. Upon user interaction, the chat window smoothly expands to fill the screen as shown on the third page. This facilitates visibility of conversation history while adhering to the established Airbnb design principles.
Transitioning to the fourth and fifth pages, these exemplify the outcomes and option cards – integral components recurrently applied throughout our design. These pages underscore the consistent application of these elements in our interface design, enhancing both functionality and familiarity for users.
Booking Confirmation
Now, I will present the mobile prototypes in the scenarios that serve as prime exemplars of our design. The first highlighted scenario is the booking confirmation phase. Here, the reservation owner finalizes the booking process and is introduced to Bélo. To acquaint users with Bélo's function and role, we devised onboarding screens. This strategic inclusion immediately following the booking confirmation accomplishes several key objectives:
Ensuring User Awareness: By integrating the onboarding process right after booking confirmation, we guarantee that users are informed. Unlike notifications or messages that might be overlooked, this approach ensures awareness.
Enhancing User Engagement: This timing optimally increases the likelihood of users engaging with Bélo by presenting an overview of its advantages.
Mitigating Privacy Concerns: Addressing user privacy apprehensions through language and explanation, we alleviate potential concerns.
Within this scenario, we employ the "share trip details" feature to exemplify a typical interaction between the user and Bélo. This feature illustrates Bélo's role as a central communication hub among guests, thus reinforcing its value proposition.
Pre Check-In
The pre check-in stage is a novel addition to the original Airbnb app workflow. Positioned three days prior to the trip, its purpose is to gently remind users of their impending Airbnb stay, encouraging them to review trip details for accuracy. This proactive step allows users to double-check their plans, ensuring a hassle-free experience upon arrival. In cases where a user encounters an issue as demonstrated in this scenario, such as a request for early check-in, Bélo comes to the forefront. Bélo not only offers potential solutions but also takes the initiative to coordinate arrangements on the user's behalf – all without the need for direct interaction with the host. This illustrates Bélo's multifaceted capabilities: acting as both a proactive reminder and an asynchronous communication bridge connecting guests and hosts.
Navigation
Navigation stands as a significant challenge for Airbnb users, and we've addressed this concern by leveraging Bélo as an instantaneous, asynchronous communication channel between guests and hosts. With Bélo, obtaining address information and redirecting users to navigation apps becomes effortless. Moreover, Bélo conveys vital instructions from hosts to users exactly when required. The innate voice interaction feature further enables hands-free communication, which is particularly advantageous while driving.
TV Prototype
For the second user interface, the TV, we have integrated scenarios that comprehensively depict its usage. Additionally, we have prototyped various screen interactions to provide a tangible experience.
Templates
The user interface of the Airbnb app on TV comprises three distinct layers.
Conversation Layer: This layer is dedicated to displaying ongoing conversations between the user and Bélo. It serves as the hub for communication, ensuring accessible interaction with the virtual assistant.
Shade Layer: Functioning as a dark mode converter, the shade layer aligns with the familiar aesthetics of traditional TV UI designs. This feature mitigates the disturbance caused by ambient lighting, offering an enhanced viewing experience.
Bottom Layer: The bottom layer showcases Airbnb's recommended accommodations, akin to what appears on the home page of the Airbnb mobile app. This layer serves a dual purpose by providing promotional content while assisting users in discovering suitable lodging options.
Activation Modes
The diagram below demonstrates the various activation modes of Bélo on TV.
Pre Check-in: When the guest has not yet checked in, the Bélo area is depicted as a small circle featuring the static Airbnb logo.
Check-in: Upon the guest checking in by saying "Hey, Bélo", the Bélo area expands, triggering a welcoming animation to engage the guest.
During Stay: While the guest is staying, a static Bélo logo is commonly displayed within a small circle, indicating that it's in an inactive state.
Activation: When the guest activates Bélo by the initiating interaction, the circle enlarges, accompanied by a corresponding motion state to facilitate communication.
Fetch Instructions
To showcase the swift information retrieval capability of Bélo TV, we created a prototype depicting an interaction where a guest requests instructions for assembling a futon bed. This functionality serves as an effective asynchronous communication channel between guests and hosts, facilitating data retrieval from the host's information pool. It empowers guests to obtain pertinent information whenever needed, enhancing the overall guest experience.
Trip Recommendation
Another pivotal scenario we've spotlighted is regarding the trip recommendation feature of Bélo TV. In this scenario, when a user queries Bélo for activity recommendations, Bélo transitions into Explore mode, pulling information from Airbnb experiences. This interaction serves to recommend activities and promotes Airbnb experiences, creating a valuable communication link between Airbnb and guests. Additionally, an intriguing aspect is the collaborative decision-making process facilitated by Bélo TV. While one guest interacts with Bélo, others can observe and participate in the conversation, streamlining the decision-making process among all guests. This not only simplifies the decision-making process but also fosters a more inclusive and engaging experience for everyone involved.
Demo Video
Finally, this is the wholistic demo video that tells the story of a user's experience at Airbnb stay, with the aid of Bélo. The image below is a snapshot of our video planning process.
Reflection
Throughout this project, I had the valuable opportunity to dissect and reconstruct the components of an established app that has a mature visual system. The significance of templates and componentization became remarkably evident, particularly in a collaborative setting. This experience reinforced the essential practice of maintaining meticulous organization, employing proper names, and fostering healthy dynamics within the team. Even with a foundation in these principles from previous group projects, this project re-emphasized the perpetual need for thorough communication among teammates.
One of the main takeaways is regarding the conversation section of the TV prototype. Given more time, I would delve into a deeper exploration of VUI on TV, refining the differentiation between guests' and Bélo's speech displays. This enhancement would bolster the overall experience by increasing accessibility.
On the whole, I greatly enjoyed the project and flourished through effective collaboration with my teammates. In the context of the growing AI trend, I'm intrigued by the vast potential that lies within smart voice assistance development. Given the opportunity, I would venture deeper into this realm, exploring new horizons in the future.