MSN/Bing Health & Fitness for Windows 8.1

Jan – Jun 2013, Applications, Media and Publishing(AMP) | Applications and Services Group(ASG) | Microsoft

The Bing Health & Fitness app is a personal companion for everyday living. We designed this app based on the belief that by bringing together nutrition, fitness, and medical information customized to users’ own personal needs, they can learn about their health and make smart decisions to lead a healthy life. Combining these things in one comprehensive app allows users to quickly learn about what’s happening with their body and discover ways to maintain or change their lifestyle with helpful and easy-to-understand content.


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 Bing Windows 8 app suite. The app shows the bold use of typography, color, and imageries with rich data elements such as market indices, stock charts, and news headlines.

To achieve a rich content consumption experience, we had created our own photo and video content with a fitness media partner. In this project, I spent a long time optimizing information architecture and navigation structure to minimize user’s effort for finding the right information.

Windows 8 Design Principles

Throughout the design process, the Windows 8 Design Principles were used as guiding principles to make the Finance 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

Design Explorations

Hub Page

The landing panorama is composed of three major topic sections – Fitness, Nutrition, and Medical. Used different color schemes for these topics as part of the wayfinding element.

Workout Detail Page – A

Workout Detail Page – B

Exercise Browse Page

Medical Detail Page

Wellness Page

Health Tracker Page

Page Header Studies

Color Studies

Release Version Screenshots