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
Health & Fitness App for Windows Phone 8
Metro-style default app suite for Windows 8.1