Project Team: Microsoft Xbox        
My role: UX/Product Designer III 
Project Tasks:  UX Design, Visual Design, Motion Design, Presentation Design, Presentation.
Design Tools: Paper & Pen, Balsamiq, Photoshop, Illustrator, Sketch, PowerPoint, After Effects.

Project Summery: 

In this team,  team members work on creating V3 avatars with new features and updating avatar editor app for the upgraded console and PC. 
Along with V3 avatar creation in the team, my project objective is to create new OOBE ( out of box experience) for V3 Avatar on different platforms. I am the only designer working on this project and managed to accomplish this project from initial concepts to deliver screen design mockups. I have collaborated with team members during the design process including  Art Director, Senior Product Manager, Engineers, 3D Artist  and Technical Artist.

Design Process:

Define the Product & Problem

First I had meetings with the Senior Product Manager and Art Director about this project to understand the problem, business needs and goals. 


Since V3 avatar is newly upgraded version, we need to create OOBE during the users’ sign in process to introduce V3 avatar, its new features and give users options to select an identity during sign in process. 


Create engaging and interactive OOBE to ease users' transition from V2.5 to V3 for different groups of users including new users and existing users in their sign in process.

Introduce V3 avatar and its new features. Integrate appropriate visual, informational and interactive design elements that appeal to target users.   
Give users an option to select a V3 avatar during the sign in process, and make users aware that they can customize the avatar later in the avatar editor app after they sign in. 


Research about : 
Xbox 360 current OOBE, 
New Xbox 360 Live Experience
Xbox One Console OOBE: Day One
Xbox One Avatars app: Day One

also played with controller to experience current user log in process on console and experienced the process on PC and mobile as well. Make notes on what need to improve, where to integrate the V3 Avatar contents in the log in process. 

Collected users’ reviews and feedbacks for current OOBE to understand users' needs and what needs to improve. 

Researched about V3 avatar, and its new features. Make sure to fully present the new features to users. 

Research current V2.5 avatar editor user interface and product brand style to keep the style consistency along the design process.

Review the project documentations and initial user flows from the senior PM. And communicate with him to clarify any question during the process. 

Clarify the project timeline, responsibilities and team members for collaboration along the process. 

Research is ongoing and it is parallel with other steps in the deign process, I always need to research to gather more data for each step to guide the direction. 


Base on the initial research, I collected some data and info needed for next step which is ideation. Brainstormed and sketched out several ideas to explore possible design solutions of OOBE and users flows. Collaborated with art director to review the design ideas, define the design styles, contents and gather texts copies for V3 Avatar new features introduction design. We narrowed down to one idea that works best for this project.  


After reviewing the initial user flows from the PM, base on the research, there are two big groups of users: new users and existing users. For new users base on what devices they use, Console, PC or Mobile, there are different OOBE flows for each platform. For existing users, base on their current status, do they have a V2.5 avatar or a gamerpic? There are different OOBE flows on different platforms as well. I redesigned the user flow diagrams base on the research and initial user flows. 

After clarifying the user flows for two groups of users. Thought through the steps of the interaction. Considering the different input devices, controller for console, mouse & keyboard for PC and touch for mobile, I designed different UI for different device input in need, also keep the style consistency on different platforms. I designed high-fidelity screen mockups and prototypes to present the OOBE design solution on different platforms. Also designed the V3 Avatar new features introduction slides to introduce the new features, ease users' transition from V2.5 to V3 and motivate users to customize their V3 avatar after signed in. 


I presented screen mockups on console, PC and mobile platforms to the team including project senior PM, art director, 3D artist, technical artist and engineers for review and evaluating if the design meets the business and users' needs, what needs to improve, is there technical challenge to implement the design? Also collect feedback from them as users. Base on the team reviews and feedback, I refined the designs in a few rounds to meet the project goal and users' needs. Iterated designs and mockups are delivered to the team for future use. 
V3 Avatar New Features Introduction Design ( A few pages of the design ) 
These images here are recreations of my design, texts are replaced by lorem Ipsum, 3D Avatars are blurred out in purpose.   
V3 Identity OOBE Design Screen Mockups ( A few pages of the mockups) 

You may also like

Back to Top