The Xbox App

THE PROJECT

The XBox App is the most clicked on in-box Windows app. With over half a million active monthly users, it's a hub of XBox news, social networking and shopping.

MY ROLE

My job on this project was to help the development team with UI polish. I brought expertise in performant layouts, styling, adaptive pages and accessibility; all required to ship a quality app in Windows. I also worked with the design team to make sure design choices were practical and delightful.

ARENA TOURNAMENTS

The team decided the would be a great place for e-sports so we built out a new feature; Arena Tournaments. Gamers could organize and compete against each other in clubs - or third parties could organize sponsored tournaments to take it to the next level. Turns out there's a lot of information needed to organize tournaments at scale so we payed special attention to string lengths and word wrapping to ensure the experience adapted beautifully to different screen widths. 

I was the primary developer behind the brackets animation. Brackets are the first thing that come to mind when people think of a tournament, so we knew we had to get it right. I love this feature because it's ultimately a data visualization problem; a map of of how people progressed through rounds. The biggest challenge was dialing in the navigation paradigm - we didn't want to clutter the view with too many affordances, so we erred on the side of simplicity. We initially liked the idea of zooming in and out with the scroll wheel, but decided that data wasn't legible enough to be useful, so we stuck with a more rigid 'round by round' approach. To advance through, the user would simply click on the round headers or specific matches to bring into focus. Performance was always a focus; we ensured that tournaments with as many as 256 participants remained fluid and smooth.

LIGHT THEME SUPPORT

One of the perks of being an in box app is that you get to support broader Windows initiatives, like Light Theme. I owned bringing it to the XBox App.

Up to that point, the app had been designed and built around dark theme - so this was uncharted territory for the team. The biggest place we saw issues were text and icons that had been placed over images and accent colors. The white text of dark theme works great, the black text of light theme on a color is illegible. Rather than redesign around this, we implemented another set of styles to be used specifically on top of images and colors that maintained their white color regardless of theme.

Once the switch was flipped and a pattern defined, it was a matter of finding the hundreds of related bugs. This is a big app with lots of nooks and crannies. A systematic approach found half of them, but the rest was up to manual testing. With the deadline quickly approaching I opted to do something that comes naturally to folks at XBox; gamification. I offered a bug bounty to the broader development team and posted a big, fun leader board in a common area to spur some good spirited competition in tracking them down.

At the end of the sprint - the deadline was met, bug free, and users even took to reddit to praise the feature.

The Project

The Game Bar in Windows is a neat little utility that helps gamers capture and share their gaming experiences. This helped support one of the broader Microsoft Gaming strategies; our streaming service Mixer. Game Bar was a great way to get people streaming. Technically speaking, this is a UWP App, but with super powers. As a Windows component (rather than app) it's written with XAML, C++/Cx and we had to build many common surfaces like windows and fly outs from the ground up.

My Role

Initially, I worked with The Design Team to prototype their ideas and provided guidance on exactly what tools we had at our disposal. Sometimes, this meant finding innovative ways to create new controls (like a 4 state toggle button). Once it was nose to the keyboards, I was responsible for the UI architecture - creating styles, setting up layouts, animations and ensuring Game Bar is super snappy on top of games.

Big functionality - tiny foot print

As much as we would have liked this utility to be a big, grand, immersive experience - we knew that's not what our users wanted. The experience had to be fast and light weight so it never got in the way of gaming. That being said, broadcasting and recording are not a trivial tasks; there were dozens of states a user could be in and reflecting those succinctly was a focus of ours. We used a clever combination of iconography and button states to help the user understand exactly what was going on so they could get back to gaming.