Avatar Kinect
Microsoft
Avatar Kinect became the most popular app in Xbox Live’s “Fun Labs”, with many repeat users who regularly engaged in live chats or posted video recordings of sessions to YouTube and other social media platforms.
In a fast-paced development cycle, partnered with an Art Director, UX Lead, and a Back-end Developer, to develop concepts, designs, layouts, and interactive prototypes using Adobe Photoshop and Xbox “XUI” front-end development tool.
Client
Microsoft, Research & Development
Role
Visual and Interaction Designer
Location
On-sight
Scope
Create visual and interaction designs for an Xbox “Kinect” camera enabled experience. Users leveraged the Kinect camera to create videos or participate in live chats using their Xbox Live avatar.
Challenge
Avatar Kinect was created as an interactive experience for the Xbox platform where the user could use the motion tracking Kinect camera to create videos or participate in chat sessions using their Xbox Live avatar. Since there was nothing comparable to it prior, I realized that the entire experience would need to be designed from scratch.
Before I began designing the layouts and interactions, I created a series of market-research / mood boards, using Core DNA and Brand Promise terms as inspiration. Xbox Kinect games and chat applications were primary inspirations. Themes that emerged were a focus on the avatar and its relationship to space, color gradients, a sense of fun and simplicity.
I designed wireframes for the app’s home screen, focusing on the user’s Xbox avatar while exploring navigation options. The team and I chose a version with a six-item grid and an animated avatar that mirrored the user’s upper-body movements via camera interaction.
Action
Since there was nothing comparable to it prior, I researched Kinect enabled X-box games to understand the capabilities and limitations of the interaction model, which required users to gesture to the camera while navigating the UI.
After discussing with the design & UX team I narrowed down the color palette choices as well and then tried out several different iterations in the home screen layout to see what felt right.
A key UX feature was enabling users to trigger on-screen emojis during live chat or video sessions. I explored multiple interaction models, chose a simple, intuitive layout, and created a custom emoji library to support the experience.
I explored branding by incorporating the Kinect brand logo combined with the term “avatar”. Several iterations referenced the camera’s facial mirroring capability, but in the end my Art Director wanted to keep our brand simple and let the user's avatar speak to the face interaction aspects.
A unique feature of Avatar Kinect was letting users place their avatars in different virtual environments or “Stages” for chats or recordings. For stage and seating selections, I used the same simple UI as the rest of the app, plus I designed several stages and helped build the scenes in 3D Studio Max.
Result
Usability testing confirmed that users loved the fun, consistent and easy-to-use navigation system, with nine out of ten participants successfully creating live chats and videos with no instruction.
Avatar Kinect became the most popular app in Xbox Live’s “Fun Labs”, with many repeat users who regularly participated in live chats or posted completed videos to YouTube and other social media platforms.