MSN/Bing Sports for Windows Phone 8

May – Aug 2013, as UX Designer II, Bing App Experiences(AppEx) | Applications and Services Group(ASG) | Microsoft

The goal of this project was to bring Windows 8’s successful MSN app experiences to Windows Phone 8. Just like the Windows 8 version, we tried to provide a rich content consumption experience just like a magazine.

Role

As the main designer, I led the overall visual design, information architecture, and UX. As a family product of the Windows Bing/MSN app suite, I tried to achieve visual consistency while leveraging Windows Phone’s navigation and commanding pattern. Based on standard panorama and pivot patterns, I have optimized the content for mobile consumption.

In the implementation stage, as a designer who also has an engineering background, I helped the team achieve pixel-perfect design by actively working on the XAML front-end design integration, closely collaborating with the engineering team. Later, this became one of the best practices of the design-engineering collaboration for achieving high-quality design fit & finish. The team started building a dedicated design integration team based on this experience.

Design Elements

While maintaining the same design languages that I used for the Windows 8 version of the Sports app, the content was optimized for Windows Phone 8’s panorama/pivot navigation structure and the vertical scrolling per pivot.

Common UX Framework & Information Architecture

Initial explorations on how Bing/MSN app’s content can be optimized and structured for Windows Phone 8’s panorama & pivot framework. Since Bing/MSN apps have a rich set of content including news headlines, images, videos, and data points, maximizing the content canvas was crucial.

Header Design Explorations

Immersive Background & Color

Used background image and color as a navigational/wayfinding element just like the Windows 8 version. By seeing the background image which represents the ground type of specific sport, users can instantly understand which league they are currently in.

Below screens show how I was able to achieve the family app look & feel between Windows Phone and Windows version.

Hero Images

Hero image was one of the signature design elements of Bing/MSN apps for windows 8. This was used for some of the important pages such as player profile of the star players.