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.