I began this project by auditing the current state of the assistant design across all devices. This revealed several challenges including: major difficulties in tracking current files, the necessity to collaborate with many device team designers, and plenty of inconsistencies and key hardware constraints.
Pain Points
Research revealed several pain points including: a lack of trust associated with the Facebook brand due to the Cambridge Analytica lawsuit, inconsistent brand identity, caused by the siloed nature of teams and customized approaches for each device, and poor awareness of the assistant compared to competitors like Google, Siri, and Alexa, necessitating efforts to create a memorable, prominent, and optimized identity that aligns with the new Meta brand.
LACK OF TRUST
INCONSISTENT BRAND
POOR AWARENESS
Among all the variations across devices discovered in the audit, the one consistent element was the assistant's color. My design phase started here to ensure the new identity aligned more closely with the Meta brand.
Before
The legacy design featured an attention system which was the mechanism by which the assistant communicated its states to the user. It consisted of 3 SVG animated states: Listening, Processing, and Responding.
LISTENING
PROCESSING
RESPONDING
The original Facebook Assistant drew its color values from the family of apps (Instagram, Facebook, and WhatsApp). Due to a lack of trust in the Facebook brand, the new alignment with the Meta brand, and associations with Google Assistant, it became crucial to move away from the rainbow color scheme.
What felt like the most natural option was to lean into the Meta blue. After all, it was how we announced the brand to the world. However, when I presented this direction, I received pushback noting that we did not want to conflate our assistant identity with the new Meta logo. Nevertheless, we wanted to make sure it would feel like an extension of the brand.
After taking a step back, I reconsidered the assistant's purpose as a guide or north star through the metaverse. This inspired a metaphor of the northern lights for its colorway. I worked directly with the brand team to develop a new Meta color palette, contributing to feedback sessions and convincing them to create a saturated palette. We aligned the team by leveraging Meta blue at the core, complemented by pink and teal accent colors to differentiate it from the Meta logo.
The next step was to work with device teams to establish the assistant's position and placement compared to other notifications and device UI. The exploration began with a focus on Portal. I explored various options, from full-screen takeovers to voice interactions, and landed on a bottom-left position for the assistant. This optimized legibility (left to right), allowed for progressive disclosure as it dynamically scaled, and enabled multitasking by keeping the underlying UI visible beneath the assistant.
For Quest, it was important not to interfere with the direct line of sight during gameplay, so the assistant worked best just below the main field of view, remaining in your peripheral vision. In effort to adapt to different scenarios, it worked best when anchored to the UI in the home view and anchored to your headset during gameplay.
When it came to Wrist devices, given the most limited screen real estate, it made sense to have the assistant take over the screen. This approach provided a more focused experience, especially when returning answers or confirmation states.
After defining the color and elevation, the final and most crucial step was to determine the assistant's expression. The first exploration was the line expression. It was simple, consistent across all devices, and was very performant. However, this approach had some drawbacks: it was too similar to competitor devices like Amazon Alexa, struggled to easily communicate the assistant's three states effectively, relied heavily on animation, and did not offer a strong brand presence compared to the original avatar.
The second exploration was the Ring + Avatar expression which reintroduced the distinctive SVG avatar for Portal with new colors and placement, and included a more prominent ring expression on the wrist, making it more visible and easier to understand. However, after bringing this direction to our crit, it was noted that it also increased the complexity of expressions and potentially hindered the assistant's identity further. It posed accessibility challenges and legibility issues on Portal, and required higher levels of effort for engineers and more work for designers to update and manage three separate assets.
The final design was the 3D Avatar expression which provided a unified, cohesive visual identity that maintained a clear indication of states across devices. It embodied the Meta design principles of materiality, dimension, and glow while leaning into the metaphor of the northern lights. By collaborating with prototypers and device engineering teams, we discovered a method of exporting a PNG sequence that was both performant and indistinguishable from live rendering or video files. This approach reduced the level of effort and the need to manage multiple design files.
With the color, position, and expression of the assistant agreed upon, I designed and directed a series of prototypes to showcase how the new Meta assistant would function across all devices. This was my favorite part of the process and crucial for gaining leadership buy-in for the design concepts. The goal was to demonstrate the nuances and contextual use cases of each device, presenting a compelling narrative to Jon Lax and RL leadership. This ultimately led to approvals to move into development.
XR Prototypes
Given my passion for XR, I embarked on a mission to explore the possibilities of assistant design for MR and AR Glasses. I learned Unity for mixed reality use cases and used Figma and Protopie to create prototypes for Nreal glasses on device. Additionally, I used a Bluetooth ring controller to navigate the prototypes on the Nreals on the go. I published internal documentation for the team on my process providing resources on how to get into designing for XR devices.
MIXED REALITY
SMART GLASSES - V1
SMART GLASSES - V2
The new designs created a cohesive system across all devices, optimized for context, scenario, form factor, and hardware constraints. This thoughtful design strategy significantly improved key metrics, including OOBE completion rates on the RBS View App, NUX click rates on Quest, and NUX impressions on the Quest app store.
OOBE COMPLETION
INCREASE
Next