Xbox One Dev Tools

DESIGN DIRECTION, UX/UI DESIGN

Xbox One dev tools are a rebranding of the entire ecosystem of the Xbox developer tool set. The ecosystem was not only for applications on the desktop but for the console and marketing materials (I.e. email, PowerPoint, website) that would be used as the primary outreach to the Xbox development community.

The end to end developer experience was an extensive ecosystem reaching from pre-production to production to post production with applications and services that ranged in between. Many of the applications had their own branding and style and some were even legacy applications from Xbox 360. 

Through many months of looking through the entire system and all the applications that were offered I was better able to understand what role they played and how I could reimagine them to make them better moving forward for developers within the community.

EXISTING ECOSYSTEM

Defining the Spectrum

Through research and discovery, it became very evident and clear that there were a few paths that were within the ecosystem and what their uses were.

Application Tools

The primary focus of application tools is utility and functionality over heavy graphical interfaces that are commonly over saturated. Light use of graphics is considered acceptable when appropriate but iconography should be the first consideration over anything else.

 

Customer Engagement Tools

The primary focus of Consumer Tools is to entice and engage our markets with strong visuals that convey key benefits and offering within our system. The use of graphical interfaces that are saturated with device photography, photography, colors and iconography are greatly encouraged to be used throughout any outwardly facing consumer experience.

Modernizing the system

After getting a full breath of all the applications and with a clear make-up of the ecosystem. I took some time looking at examples and created mood boards that reflected the type of modern clean design that I was looking for that would will be timeless and also adhered to the styling standards that Xbox people identified with.

For the logos I tried to create an aesthetic of having an image to represent what the application itself did along with a clear identifier that identified to the family line of the product.

 

For colors it was important to maintain the use of Xbox colors and also incorporate the colors from Windows 10 because the applications were being used both on Xbox and on desktop.

Making it work

It was paramount to create patterns, controls and flows that were as similar as possible across the different applications in order to create consistency and ease of use when pivoting between applications. Below is an example of Xbox One manager hierarchy and models.

UX TOOL EXAMPLE

Living across the ecosystem

By reimagining the ecosystem, it redefined the developer tool experience. Below are a couple examples illustrating the UI both in light and dark theme as well as for desktop and Xbox app experiences in consumer and in developer application mode.

TOOLS UI

© 2020 by LReed. All rights reserved.