Xbox One

Re-defining an iconic brand’s motion language.

Xbox One

Re-defining an iconic brand’s motion language.

The Challenge: Multi-screen, multi-input

10 3oot, desktop, tablet, and mobile all have different user needs, different input modalities, different platform capabilities, and different spatial resolutions. Launching a new generation of Xbox on the console paired with mobile Smartglass experiences and enhanced social experiences amplified the need for a consistent motion language across the brand.

The Approach



Build a world-class motion team

Designing new experiences across a family of Xbox devices and apps was going to need a large motion team. The bar was high. Finding the right fit required searching locally and nationally. Requiring a keen eye, fantastic collaborative skills, and technical acumen, I found and staffed a team of talented designers who would all go on to lead motion teams in their own right.



Create repeatable motion common controls

Once we had a complete inventory of all the needed interactions in a screen experience, we identified motion commonalities and created and labeled movements as motion common controls. Looking across screens we tried to find patterns and align where it made sense for the platforms. Thinking of motion as a way to help users discover patterns across screens, we standardized and aligned many of our movements.



Craft motion principles that enhance usability

Motion for broadcast/cinema and motion for interaction have different needs, but require similar sensibilities. Using the mantra of “just because you can, doesn’t mean you should,” we made sure we used motion to associate interactive behaviors, reinforce directionality and muscle memory, and create delight that would hold up after repeated interactions.



Architect a motion toolchain that ensures delivery

Motion is a tricky business, particularly when easing works differently across all platforms. We designed and developed a motion tool that allowed export of motion parametrics from After Effects using Penner easing equations. This tool afforded motion in the builds to map directly to what was designed.

THE APPROACH



Architect a motion toolchain that ensures delivery

Motion is a tricky business, particularly when easing works differently across all platforms. I designed and led development of a motion tool that allowed export of motion parametrics from After Effects using Penner easing equations. This tool afforded motion in the builds to map directly to what was designed.



Build a world-class motion team

Designing new experiences across a family of Xbox devices and apps was going to need a large motion team. The bar was high. Finding the right fit required searching locally and nationally. Requiring a keen eye, fantastic collaborative skills, and technical acumen, I found and staffed a team of talented designers who would all go on to lead motion teams in their own right.



Create repeatable motion common controls

Once we had a complete inventory of all the needed interactions in a screen experience, we identified motion commonalities and created and labeled movements as motion common controls. Looking across screens we tried to find patterns and align where it made sense for the platforms. Thinking of motion as a way to help users discover patterns across screens, we standardized and aligned many of our movements.



Craft motion principles that enhance usability

Motion for broadcast/cinema and motion for interaction have different needs, but require similar sensibilities. Using the mantra of “just because you can, doesn’t mean you should,” we made sure we used motion to associate interactive behaviors, reinforce directionality and muscle memory, and create delight that would hold up after repeated interactions.

Motion Interaction Direction 100% 100%
User Experience 100% 100%
Team Building 100% 100%
2D and 3D Motion Design 100% 100%
Multi-modal Interaction Design 90% 90%
Design Strategy and Incubation 80% 80%
Budgeting and Team Management 80% 80%
Toolchain Architecture 50% 50%

Contributions

Senior Design Manager for motion with a team that scaled between 5 and 12 designers and producers. Responsible for creative direction of motion interaction in partnership with Creative Director. Additional responsibilities included team management, budgeting and project management, design integration and execution, incubation, product previsualization, recruiting, tool chain improvements, and vendor management.

Product Website

Contributions

Senior Design Manager for motion with a team that scaled between 5 and 12 designers and producers. Responsible for creative direction of motion interaction in partnership with Creative Director. Additional responsibilities included team management, budgeting and project management, design integration and execution, incubation, product previsualization, recruiting, tool chain improvements, and vendor management.

Product Website

Motion Interaction Direction 100% 100%
User Experience 100% 100%
Team Building 100% 100%
2D and 3D Motion Design 100% 100%
Multi-modal Interaction Design 90% 90%
Design Strategy and Incubation 80% 80%
Budgeting and Team Management 80% 80%
Toolchain Architecture 50% 50%

The Outcome

Xbox One launched holiday 2013 to generally mixed reviews. Kinect was not a hit with customers, and the mandatory Kinect purchase would soon be decoupled from the bundles. Once we could de-emphasize oversized gestural input “touch targets” required by Kinect’s NUI, many improvements could be made to the UI. This talented team of designers would quickly pivot to make enhancements.

I transitioned to lead the Microsoft Band UX team as Xbox One was shipping, but left behind a crew of outstanding motion designers that would eventually lead teams at Xbox, Hololens, 343 Industries, and Razorfish. Have a read about one of them below.

READ ABOUT ANDREW