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.

Data Visualization

Player Stats and Matchup

Team Page Stats

Data Tiles

Various types of data tiles that combine player headshots, team logos, and data points.

Live Tiles

Search & Favorite Experience

Based on Windows Phone 8 OS level design with Sports app’s custom entities.

Design Integration

Front-end XAML code integration and polish for pixel-perfect design fit & finish.

Release Version Screenshots


Other Works on 2D App UX Design

Sports App for Windows 8

Metro-style default app suite for Windows 8

Sep 2011 – May 2012
MSN Finance

Finance App for Windows 8

Metro-style default app suite for Windows 8

Sep 2011 – May 2012
Sports Windows Phone 8

Sports App for Windows Phone 8

Metro-style default app suite for Windows Phone 8

May – Aug 2013
MSN HnF

Health & Fitness App for Windows 8

Metro-style default app suite for Windows 8.1

Jan – June 2013
HnF Windows Phone8

Health & Fitness App for Windows Phone 8

Metro-style default app suite for Windows 8.1

Dec 2013 – Feb 2014
MSN iOS

MSN Apps for iOS and Android

MSN app suite for cross-platform devices

May – Dec 2014
MSN Windows10

MSN Apps for Windows 10

In-box apps for Windows 10

Jan – June 2015

MSN Web Experience

Design update for MSN Web Experience

Oct 2013 – Mar 2014

Windows Bridge for iOS

Microsoft open-source project – iOS bridge solution

Oct – May 2015