MSN/Bing Sports for Windows Phone 8

May – Aug 2013, as UX Designer II, Bing App Experiences(AppEx) | Microsoft

The goal of this project was to bring the rich, magazine-like content experience of MSN/Bing Sports on Windows 8 to Windows Phone 8. The challenge was to adapt a data-rich, horizontally scrolling design to a mobile environment while maintaining visual consistency with the broader Bing/MSN app family and optimizing for Windows Phone’s navigation patterns.

Role

As the lead designer on the project, I was responsible for the overall visual design, information architecture, and user experience. I translated the core design language of the Windows 8 Sports app into the mobile context, leveraging Windows Phone 8’s panorama and pivot navigation structures.

During implementation phase, I collaborated closely with engineering, using my engineering background to integrate front-end XAML code and ensure pixel-perfect fidelity. This hands-on integration approach became a best practice within the team and helped form a dedicated design-engineering integration workflow.

Design Goals

Preserve the visual identity and content richness of the Windows 8 Sports app while adapting it for mobile consumption.
Optimize content presentation within the panorama and pivot navigation paradigms native to Windows Phone 8.
Maximize the content canvas to showcase statistics, images, headlines, and data tiles with clarity and impact.

Design Elements

Common UX Framework & Information Architecture

I explored how to reorganize and structure rich sports content — including news, images, videos, scores, and stats — for a vertical pivot layout. The objective was to make deep content browsing effortless while respecting mobile navigation conventions.

Optimized Navigation (Panorama & Pivot)

By applying Windows Phone’s standard panorama and pivot patterns, content was segmented into meaningful sections, enabling both broad overviews and deeper dives without overwhelming the user.

Header Design Explorations

Immersive Background & Color

Following the design language from the Windows 8 app, immersive background images and color were used as visual anchors and wayfinding cues. These elements helped users quickly understand which league or sport category they were viewing.

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

Hero Imagery

Hero images — a signature visual element from the Windows 8 suite — were used selectively for key screens (e.g., player profiles) to emphasize important content and maintain visual continuity with the Windows experience.

Data Visualization

Consistent data tiles and visualizations were designed to present player statistics, matchup details, and team performance in a layout optimized for the smaller screen.

Player Stats and Matchup

Team Page Stats

Live Tiles & System Integration

Live Tile support was included to extend personalized content to the Start screen, enabling users to pin favorite teams or leagues for quick access and glanceable updates.

Live Tiles

Search & Favorite Experience

Customized search and favorite features were built to align with Windows Phone 8 system conventions, making it easy for users to find and follow specific teams or content segments.

Implementation & Craftsmanship

By working directly with XAML front-end code and tightly aligning with engineering, I helped ensure that design nuances were implemented accurately in production — from typography scales to responsive layouts and motion interactions. This collaborative integration elevated the polish and quality of the final release.