MSN/Bing Finance 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 Finance app was designed to show the full potential of Microsoft’s Metro design language.

Role

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.

Since our target users were general Windows users, unlike traditional financial apps that typically have heavy look & feel with black dark themes, I designed the app with bright colors and layout while incorporating some of the important conventional financial data design patterns.

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 real-time stock market indices and ‘Top Stories’ news section, the app shows ‘Watchlist’, ‘Personal Finance’, and useful financial tools such as mortgage calculator.

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

Media Reviews

Key Design Elements

With massive financial data such as indices, stock prices, charts, and the news headlines in multiple depths of hierarchy such as market type, entity type(stock, bond, ETF, commodities, etc) the information hierarchy and architecture was one of the most important elements in designing Bing/MSN Finance app.

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

Initial Design Explorations

Initial design explorations focused on the visualization of the financial data based on the metro design language. Based on the ‘Content over Chrome’ philosophy, I explored the ways to simplify complex financial data using typography and graphical elements without unnecessary chrome / UI elements.

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

Stock Tiles

Stock entity tile is one of the most important data elements in the Finance app. To meet all feature requirements and provide a great user experience for all international markets, I went through many design iterations. Design iteration included considerations for the different market color schemes and RTL language support as well.