MSN/Bing Finance 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 Finance 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 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.
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
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 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.
Entity Detail Page Iterations
Data Visualization Elements
Release Version Screenshots
Finance app was released as part of Windows 8 on August 1st, 2012.