MSN/Bing Sports for Windows 8

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

As a default app on Windows 8, Bing/MSN Sports app was designed to show the full potential of Microsoft’s Metro design language.

Role

As the main designer, I led the overall visual/interaction design, information architecture, and UX. I developed a full-bleed ‘hero’ image concept as a signature design element of the Bing Windows 8 app suite. The app shows the bold use of typography, color, and imageries with rich data elements such as game scores, player stats, and news headlines.

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 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.

As a designer who can speak Korean and Japanese, I led the internationalization and localization effort. Investigated, proposed, and integrated design solutions for the layout challenges with international fonts.

Goal

The main design goal was to provide a rich content consumption experience just like a magazine. Based on Windows 8’s horizontal scrolling mechanism, I designed information architecture in a way that makes the user’s reading flow natural and enjoyable. Starting with the latest news ‘Top Stories’ section, the app shows score updates of my ‘Favorite Teams’.

Aggregates the best of the sporting information for me
Makes it effortless to follow my teams year-round
Awesome TV companion to watch live games
Makes it easy to connect with my sports friends
Surface relevant stats to make fantasy research easy and fun
Uncover hidden statistics by making them interesting

Competitive Landscape

As of 2011, most of the apps were designed based on skeuomorphic design and chrome-heavy user interfaces.

Windows 8 Design Principles

Throughout the design process, the Windows 8 Design Principles were used as guiding principles to make the Sports app one of the best examples of the Windows 8 app experience.

Pride in Craftsmanship
Be Fast and Fluid
Authentically Digital
Do More with Less
Win as One

Media Reviews

“It’s worth getting Windows 8 just for the SPORTS app”
“The BEST – even when compared to other apps in other operating systems”
“It all looks so clean-and-simple, yet so information rich”
“The BEST sports app I’ve ever seen”
“Hopefully we can see more third party apps going this route”

Key Design Elements

With massive sports data such as visual images, stats, scores, and the news headlines in multiple depths of hierarchy such as sport type, league, team, and player, the information hierarchy and architecture was one of the most important elements in designing Bing/MSN Sports app.

Some of the key design elements in the Sports app:

Curated full-bleed hero image with news headline
Immersive background as a wayfinding element
Player headshots with transparent background
Data tiles / Data visualization

Typographic hierarchy and grid system were founding grounds for designing the Sports app experience.

Initial sketches – early design explorations on information hierarchy

Different entity level pages (Team/Player/Match)

Entity levels & Navigation structure design

The Hero Image

One of the most interesting elements in magazine design is the use of photo images on the cover or section title pages. I wanted to bring the visual impact with the headline stories on the landing experience. To achieve this, I explored the hero image system where the user can instantly immerse into the sports stories with beautifully curated photos.

To make the hero image system possible in production builds, I worked with the news content editorial team and content publishing engineering to establish the image template system which automatically crops the hero image with proper focus areas based on different device resolutions and orientations.

Landing page design explorations

Hero Image Cropping & Overlay Elements

Diagonal cut on hero image, headline, and data tiles.

Player page design explorations

Matchup page explorations

Prototypes for Parallax Effect

Created many working prototypes using Windows 8 SDK to demonstrate interactive experiences such as parallax background scrolling effect and the flow of the content.

Immersive Background

Along with the use of full-bleed hero images, I also used immersive photographic background images as a navigational/wayfinding element. By seeing the background image which represents the ground type of specific sport, users can instantly understand which league they are currently in.

Early design explorations

Final background design & color schemes

Data Tiles

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

Data Visualization

Player Stats

Matchup Page – Score and Timeline

Internationalization & Localization

As a designer who can speak Korean and Japanese, I led the content optimization for the Asian languages. Investigated, proposed, and integrated design solutions for the layout challenges with international fonts.