Xbox Avatars: Next Generation

I had the amazing opportunity to help create the next generation of Avatars. It was the pet project of my old co-worker Mark Kobrin and he brought me on to head up the UI/UX and to be his second lead in decisions for the whole avatars experience.

  • ClientXBOX
  • RoleUI/UX Design Lead
  • Team5 people
Project Overview
RESEARCH & CONCEPTING

Since we wanted to create a whole new experience with the avatars, that included starting from scratch. This meant re-thinking how we would allow a user to customize and interact with their avatars. We wanted to make the new avatars your online persona.

AVATARS ART STYLE

We needed to figure out what these new avatars would even look like. So I worked closely with Mark on picking out art teams to concept styles and going through iterations, user research, and versions until we nailed the right style.

XBOX CHANGES

We needed to do a “Avatars 1.5” experience in the current Xbox dashboard to start helping make the transition to the new style. I lead the efforts with the Xbox dashboard team to make these changes to the then current avatars.

Starting from the ground up

We really wanted the new avatars experience to be vastly different than the experience it had been. We wanted it to not just be for Xbox but to really have it feel like your complete online persona with no-barriers for customization.

CUSTOMIZATION

I did extensive research into how video games have been doing character customization since so many games have simple to very in-depth customization. It was a good place to start especially in how UI elements appear around the characters.

FASHION

One of the ideas I had was to treat clothing differently. I had an idea of an actual wardrobe where you can save your favorite clothing and accessories so you wouldn’t need to go through the whole list. Then you can make your outfits to easily swap out.

UI RESEARCH

I wanted to look far and wide on UI elements and not just try to 1 for 1 replicate what has already been done. I especially was interested in mobile UI elements since these tend to be very simplified and the touch screen platform I felt translated really well into game controls.

Creating the color wheel

I wanted to explore different shapes and layouts that could be used for the color wheel. I wanted to make sure that the design worked well with both a mouse/keyboard and with a game controller since the dashboard could be on both Xbox and PC. Once I picked a close to final design so that I could do a motion study.

FINAL VERSION OF CUSTOMIZATION (before I left the project)

This was the final state of the Xbox Avatars before I left for my FTE position at Microsoft Bing. I was still toying around with different layouts and interaction models. This was where I wanted the final to be but it was simple enough to have our working Unity box to help the dev get assets in and start coding in the interactions and the avatar motions.

HOW AVATARS 2.0 MIGHT LOOK ON THE XBOX

These were explorations of how the new avatars could be used on the xbox dashboard as more than just your visual persona. We tested out if you could use them for messaging, communicating with one another, or just adding more life to the Xbox dash.

MOTION EXAMPLES

I had to take the dashboard designs and create motion video mock-ups for them to help sell the idea and it was used as the foundation on what changes needed to be made to the Avatar 1.5 experience.

EARLY EXPLORATIONS

These are some of the early explorations I had made to figure out how I wanted to map out the content and to start figuring out on a very basic level on the interaction model.