MSN/Bing Sports for Windows 8
Sep 2011 – May 2012, 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.
As the lead 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
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.
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
- 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
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
“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.
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.
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
Various types of data tiles that combine player headshots, team logos, and data points.
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.
Release Version Screenshots
Sports app was released as part of Windows 8 on August 1st, 2012.