Support Virtual Agent
Support Virtual Agent
Support Virtual Agent
2024 / visual / animation
Support Virtual Agent is an LLM-based experience that helps Xbox players get the support they need when they run into issues. By accessing information from support.xbox.com, it provides quick, relevant answers that help players troubleshoot problems and get back to playing.
2024 / visual / animation
Support Virtual Agent is an LLM-based experience that helps Xbox players get the support they need when they run into issues. By accessing information from support.xbox.com, it provides quick, relevant answers that help players troubleshoot problems and get back to playing.
2024 / visual / animation
Support Virtual Agent is an LLM-based experience that helps Xbox players get the support they need when they run into issues. By accessing information from support.xbox.com, it provides quick, relevant answers that help players troubleshoot problems and get back to playing.
role
As a component of the support experience, the guiding principle for Support Virtual Agent was the user's goal of receiving effective help. I designed an embodied character that felt approachable and complementary to the experience, enhancing the interaction without becoming intrusive or overly anthropomorphic.
role
As a component of the support experience, the guiding principle for Support Virtual Agent was the user's goal of receiving effective help. I designed an embodied character that felt approachable and complementary to the experience, enhancing the interaction without becoming intrusive or overly anthropomorphic.
role
As a component of the support experience, the guiding principle for Support Virtual Agent was the user's goal of receiving effective help. I designed an embodied character that felt approachable and complementary to the experience, enhancing the interaction without becoming intrusive or overly anthropomorphic.
key product applications
Visual expression where trust is vital
Users encounter the Support Virtual Agent when they visit the Xbox Support homepage, often during moments of frustration or uncertainty. There is a possibility of sharing information related to their account, purchases, or technical issues. We knew it was essential to create an experience that felt trustworthy from the first interaction. Every aspect of the character's visual design was intentionally crafted to convey warmth and approachability while reinforcing the agent's role as a reliable source of support, rather than distracting from the user's primary goal of getting help.
key product applications
Visual expression where trust is vital
Users encounter the Support Virtual Agent when they visit the Xbox Support homepage, often during moments of frustration or uncertainty. There is a possibility of sharing information related to their account, purchases, or technical issues. We knew it was essential to create an experience that felt trustworthy from the first interaction. Every aspect of the character's visual design was intentionally crafted to convey warmth and approachability while reinforcing the agent's role as a reliable source of support, rather than distracting from the user's primary goal of getting help.
key product applications
Visual expression where trust is vital
Users encounter the Support Virtual Agent when they visit the Xbox Support homepage, often during moments of frustration or uncertainty. There is a possibility of sharing information related to their account, purchases, or technical issues. We knew it was essential to create an experience that felt trustworthy from the first interaction. Every aspect of the character's visual design was intentionally crafted to convey warmth and approachability while reinforcing the agent's role as a reliable source of support, rather than distracting from the user's primary goal of getting help.
Entrypoint in support.xbox.com
Entrypoint in support.xbox.com
Entrypoint in support.xbox.com
Deep dive into embodiment
When considering the presence of the agent, we explored a spectrum of representation, encompassing visual, audio and textual elements. To begin the design process, our team analyzed several elements that could be linked to an embodiment. This could be as simple as a static graphic or as complex as full robotic mobility. This was an effective exercise to think about where SVA best fits into this world, as well as the pros and cons that would come from each experience. Our intention of creating an empathetic and casual tone became clear during this process.
Deep dive into embodiment
When considering the presence of the agent, we explored a spectrum of representation, encompassing visual, audio and textual elements. To begin the design process, our team analyzed several elements that could be linked to an embodiment. This could be as simple as a static graphic or as complex as full robotic mobility. This was an effective exercise to think about where SVA best fits into this world, as well as the pros and cons that would come from each experience. Our intention of creating an empathetic and casual tone became clear during this process.
Deep dive into embodiment
When considering the presence of the agent, we explored a spectrum of representation, encompassing visual, audio and textual elements. To begin the design process, our team analyzed several elements that could be linked to an embodiment. This could be as simple as a static graphic or as complex as full robotic mobility. This was an effective exercise to think about where SVA best fits into this world, as well as the pros and cons that would come from each experience. Our intention of creating an empathetic and casual tone became clear during this process.
Graphic from our exploration process, making sense of varying types of embodiment
Graphic from our exploration process, making sense of varying types of embodiment
Experimenting with motion and form
These are just a handful of the many explorations I created. I focused on states for idle, thinking, and speaking. Those core states guided the exploration process, as I considered what would provide the greatest clarity (and delight) for users during an active conversation. At this stage of the process, the goal was to be experimental and explore broadly, while staying true to the Xbox look and feel. Adherence to the Xbox brand led to the idea to incorporate the logo. The visual of two intersecting lines within a sphere combined with aural green gradients took shape, and became our strongest direction.
Experimenting with motion and form
These are just a handful of the many explorations I created. I focused on states for idle, thinking, and speaking. Those core states guided the exploration process, as I considered what would provide the greatest clarity (and delight) for users during an active conversation. At this stage of the process, the goal was to be experimental and explore broadly, while staying true to the Xbox look and feel. Adherence to the Xbox brand led to the idea to incorporate the logo. The visual of two intersecting lines within a sphere combined with aural green gradients took shape, and became our strongest direction.
Experimenting with motion and form
These are just a handful of the many explorations I created. I focused on states for idle, thinking, and speaking. Those core states guided the exploration process, as I considered what would provide the greatest clarity (and delight) for users during an active conversation. At this stage of the process, the goal was to be experimental and explore broadly, while staying true to the Xbox look and feel. Adherence to the Xbox brand led to the idea to incorporate the logo. The visual of two intersecting lines within a sphere combined with aural green gradients took shape, and became our strongest direction.
Final animation states
The visual direction stayed consistent with the Xbox brand and directly referenced characteristics of the Xbox logo. Animations were designed to feel subtle and natural, supporting the experience without distracting from it. Rather than adding motion for its own sake, each animated state served a purpose by providing visual feedback alongside the conversation. I partnered closely with Babylon.js engineers to bring the character from design into a rendered, animated experience. I then developed a working understanding of the 3D engine and contributed to how the character was translated into motion and interaction.
Final animation states
The visual direction stayed consistent with the Xbox brand and directly referenced characteristics of the Xbox logo. Animations were designed to feel subtle and natural, supporting the experience without distracting from it. Rather than adding motion for its own sake, each animated state served a purpose by providing visual feedback alongside the conversation. I partnered closely with Babylon.js engineers to bring the character from design into a rendered, animated experience. I then developed a working understanding of the 3D engine and contributed to how the character was translated into motion and interaction.
Final animation states
The visual direction stayed consistent with the Xbox brand and directly referenced characteristics of the Xbox logo. Animations were designed to feel subtle and natural, supporting the experience without distracting from it. Rather than adding motion for its own sake, each animated state served a purpose by providing visual feedback alongside the conversation. I partnered closely with Babylon.js engineers to bring the character from design into a rendered, animated experience. I then developed a working understanding of the 3D engine and contributed to how the character was translated into motion and interaction.
Designing for user expectation
Introducing embodiment into the support experience brought both opportunity and responsibility. An animated character influences how users perceive the product and raises expectations for the quality of the interaction. If those expectations aren't met, the character can undermine trust rather than build it. To avoid that risk, we designed the character's appearance and animations to accurately reflect the capabilities of the support experience.
Designing for user expectation
Introducing embodiment into the support experience brought both opportunity and responsibility. An animated character influences how users perceive the product and raises expectations for the quality of the interaction. If those expectations aren't met, the character can undermine trust rather than build it. To avoid that risk, we designed the character's appearance and animations to accurately reflect the capabilities of the support experience.
Designing for user expectation
Introducing embodiment into the support experience brought both opportunity and responsibility. An animated character influences how users perceive the product and raises expectations for the quality of the interaction. If those expectations aren't met, the character can undermine trust rather than build it. To avoid that risk, we designed the character's appearance and animations to accurately reflect the capabilities of the support experience.
Idle
Thinking
Speaking
Putting users in control
The user can choose a different character, or dismiss the animation completely, depending on the tone they prefer for the conversation. Here is an example with Orbee, a playful character that was designed prior to this project.
Putting users in control
The user can choose a different character, or dismiss the animation completely, depending on the tone they prefer for the conversation. Here is an example with Orbee, a playful character that was designed prior to this project.
Putting users in control
The user can choose a different character, or dismiss the animation completely, depending on the tone they prefer for the conversation. Here is an example with Orbee, a playful character that was designed prior to this project.
Idle
Thinking
Speaking
Idle
Thinking
Speaking
impact
Improving accessibility
In a usability study, all seven participants valued the visualizations for making the experience more interactive. They highlighted the excitement of interacting with the character and exploring different options, reinforcing the value of adding delight to an otherwise impersonal support experience.
Adding delight
The study also revealed opportunities to improve accessibility. A low-vision participant found the interactions natural and easy to follow, preferring the combination of visual and audio cues over reading text. They described the experience as more personable and said it felt more like an actual interaction.