MSN Web Experience

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

A cross-platform web experience reimagining how MSN delivers rich editorial content to users on the web, unifying design and interaction patterns with native mobile and desktop app experiences.

Context

The MSN web experience serves millions of users globally with curated editorial content, personalized feeds, and rich data across news, lifestyle, and vertical channels such as Sports, Money, and Health & Fitness. The project aimed to modernize the MSN web platform by aligning its visual language, information architecture, and UI patterns with Microsoft’s broader design ecosystem — creating a unified experience across web and native MSN apps.

Role

As the lead UX designer on this initiative, I owned the overall UX strategy, interaction paradigms, and visual design system for the MSN web experience. I collaborated with cross-functional teams, including product management, engineering, editorial, and data science, to define scalable design patterns, responsive layouts, and components that served both editorial and dynamic content.

Design Goals

Establish a cohesive visual and interaction language for MSN across web, mobile, and native app platforms.
Optimize content discovery and feed personalization through modern information architecture.
Support responsive design that scales across a broad range of device sizes and user contexts.

Approach & Key Contributions

Unified Design Language
I developed a flexible visual system that brought coherence to typography, color, and layout across the MSN web experience, while ensuring alignment with flagship native app designs. This system balanced editorial expressiveness with data-rich components such as scores, headlines, and trending feeds.

Responsive Grid & Layout Patterns
To support responsiveness across screens, I defined a modular grid and layout rules that adapted fluidly from mobile phones to large desktops. These patterns were essential to maintaining readability and visual hierarchy at every breakpoint.

Feed Architecture & Content Modules
Working with editorial and back-end teams, I helped define how content modules — such as personalized feeds, curated highlights, and dynamic data tiles — should be organized and surfaced to users. This included rules for ordering, spacing, and visual emphasis to support discoverability.

Component Library & Reusable Patterns
I established a component library of reusable UI modules — including hero units, article cards, picture galleries, and navigation elements — to streamline development and maintain visual consistency across vertical channels and page templates.

Design Integration with Engineering
Close collaboration with front-end engineering ensured that responsive behaviors, transitions, and content rendering were faithful to design intent. Regular design reviews and shared prototypes helped align expectations and execution throughout the build cycle.

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

Outcome

The redesigned MSN web experience delivered a modern, scalable, and unified content platform, strengthening brand continuity across devices and apps. By combining responsive design, modular UI systems, and refined content architecture, it elevated editorial storytelling and improved discoverability for diverse user interests.

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.