MSN Apps for Windows 10

Jan – June 2015, as Senior UX Designer, Information & Content Experiences(ICE) | ASG | Microsoft

As a Common UX designer, I led design for horizontal elements such as overall app’s information architecture, hero image, actions, navigation pane, flexible grid system, and article reader.

Focus Areas

  • Navigation
  • Common Actions and Commanding
  • Flexible Grid System & Content Modules
  • Information Architecture
  • Hero – image, data/action tiles, motion, transition, parallax effect
  • Article Reader
  • Entity Cluster
  • Editable List View
  • Splash Screens
  • Live Tiles
  • Video Player
  • Web View
  • Retail Mode

Flexible Grid System

From Windows Phone 10 mobile device to large display desktop, to make a truly Universal Windows App, I have developed a flexible grid system. It was used as a guideline for designing responsive and adaptive content. This grid system was designed with consideration of our various types of content such as images of the articles, headline texts, videos, and structured data.

Hero Image & Content

As a signature element of our apps since Windows 8, I have explored various types of hero images and personalized content to achieve visual impact, brand personality as well as content accessibility. Worked closely with the editorial team to make sure full-bleed image cropping works for various types of screen sizes.

Prototypes for Hero Content Interactions

I built interactive prototypes to explore and demonstrate subtle details on the hero content elements such as parallax effect, animated blur, data tile movements, etc. Made with Objective-C on iOS devices.

Data Tiles

Common UX Consistency

Established a design system for common actions and content types to achieve a coherent user experience.

Add/Adjust/Remove for Editable List View

Common Entity Page Structure & Actions

Navigation System

Collaborated with Windows design team to figure out the best navigation system for our apps and to align design details with other inbox apps.

Article Reader

Aggregated design iterations in previous platforms, analyzed and extracted core design features that we want to achieve on Windows 10. In the design process, I made various Article Reader prototypes with Objective-C on iPad to test design ideas such as article transitions, film strip UI, inline videos, and pull quotes. Closely collaborated with PMs and Devs to achieve the best content consumption experience within various types of constraints.

Content Layout Pattern & System Design

To provide the best reading experience for various types of content feed, I designed a system with the engineering team that can construct layout patterns based on the data elements. For example, an image should appear after x amount of the paragraph, an image larger than x pixel width should occupy the entire width, when to extract a pull quote, etc.

Immersive Reading Experience

Immersive article reader design explorations
End of the article section

Responsive Design

Flipper Navigation
Filmstrip Navigation

Live Tiles

Video Player


MSN Apps for Windows 10 was launched on July 29, 2015

Other Works on 2D App UX Design

Sports App for Windows 8

Metro-style default app suite for Windows 8

Sep 2011 – May 2012
MSN Finance

Finance App for Windows 8

Metro-style default app suite for Windows 8

Sep 2011 – May 2012
Sports Windows Phone 8

Sports App for Windows Phone 8

Metro-style default app suite for Windows Phone 8

May – Aug 2013

Health & Fitness App for Windows 8

Metro-style default app suite for Windows 8.1

Jan – June 2013
HnF Windows Phone8

Health & Fitness App for Windows Phone 8

Metro-style default app suite for Windows 8.1

Dec 2013 – Feb 2014

MSN Apps for iOS and Android

MSN app suite for cross-platform devices

May – Dec 2014
MSN Windows10

MSN Apps for Windows 10

In-box apps for Windows 10

Jan – June 2015

MSN Web Experience

Design update for MSN Web Experience

Oct 2013 – Mar 2014

Windows Bridge for iOS

Microsoft open-source project – iOS bridge solution

Oct – May 2015