A product detail page from the EA Access app on Xbox One.

EA Access

Year

2015-2016

My Role

Interaction Design

Platform

Xbox One

Overview

EA Access is a subscription program for Xbox One gamers that allows them to access a growing library of games for just a few dollars a month. We had just launched the initial version of our Xbox One app for EA Access with a focus on immersion. Movies and videos filled the screen to bring a little of the games' worlds into what used to be a pretty spartan (Halo pun!) discovery app.

Our frequent usability tests informed our decisions to add more information, screenshots, and trailers. Now we had to figure out how to do that in a cool way without sacrificing usability.

Exploration

With the design language nailed down from the first release, and a robust design system built out in Sketch, I was able to jump right in and start wire framing at a high fidelity.

We didn't want to stray too far from the Xbox OS's horizontal scrolling pattern, but we also wanted to surface as much content as we could. Some designs got cut because the were too plain, or because they weren't apparent enough.

Six variations of product display page treatments.

Flows

Along with the added details on the main game page, we also overhauled the slide show. We had to capture things like timing of the film strip dismissal, as well as different patterns for how the slide show reacted when the filmstrip was up versus when an image was full screen.

The flow from the details page to the slide show. The flow while in the slide show.

Prototyping

Animations were critical to the experience of a game console. Our app felt lifeless if pages transitioned via quick cuts. I used Principle to prototype these animations to prove the value of the increased development time, and to provide curve and timing information to our engineers.

I also overlaid an Xbox D-pad and buttons on the prototype to give us a better sense of the navigation overhead. While it wasn't directly analogous to using a controller, it gave us a better representation than using a mouse, or providing screen-by-screen breakdowns in Keynote.

iOS versions of the home and article screens.

Next Steps

My favorite part of product design is that it's iterative. More functionality will be added to this page as Microsoft opens access up to its developers. We have already designed screens that start to bring in a player's friends' data in the hopes that we can make this app useful for more than just discovery.

Back