MSN Web Experience

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

The project was to update the entire MSN web experience to achieve cohesive UX across the devices and canvas by aligning with MSN App experiences on Windows 8 and Windows Phone 8.

As a Common UX designer, I led design for horizontal elements such as the overall information architecture, navigation, flexible grid system, hero modules, search results, section templates, and article reader.

Focus Areas

  • Information Architecture
  • Navigation
  • Common Actions and Commanding
  • Content Browsing Structure
  • Landing Page Sections
  • Hero – image, data/action tiles, motion, transition, parallax effect
  • Article Reader
  • Domain Section Design
  • Data Modules
  • Section Templates & Consistency
  • Search Experience – Flow, Auto suggest, Search Result Modules

The original MSN experience

MSN web adapted metro-style design language from Windows 8. However, the overall content consumption experience was visually overwhelming, hard to parse information. Many pages still had legacy design elements from the old web experience.

Information Architecture & Navigation

Created IA, Navigation, and Content-type guidelines to help the team clearly define the content for different depth levels and use proper navigation methods.

Content Browsing Structure

Design for content browsing patterns for different types of canvas.

Content Consistency with MSN Apps for Windows 8 and Windows Phone 8

Landing Page Section

Explorations on how each domain content can be presented and interacted with horizontal scroll.

Early Design Explorations

Refined Design

Hero Image & Content

Design of the editorial hero content layout, Bing search box integration, action list, and Ad module.

Domain Section Design

Design explorations on how the MSN app’s brand family look & feel can be achieved with similar color schemes and content modules.

Module Design

Section Templates

Designed a common library of section templates based on the requirements from various types of MSN content domains. This helped the team establish a unified design system which provides a coherent content consumption experience across the domains.

Search

Search Flow

Rich auto suggest

Design of the search experience modules that make it easy to discover rich content of MSN in various domains.

Search Result Modules


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
MSN HnF

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 iOS

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