Microsoft, 2011 to 2015
One content and interaction system, adapted across Windows 8, Windows Phone, iOS, Android, Windows 10, and the web.
I helped evolve MSN and Bing from a family of individual apps into a coherent cross-platform product system. The work unified information architecture, navigation, interaction patterns, visual language, responsive grids, content modules, motion, and brand expression across a global portfolio of news, sports, finance, weather, health, food, and travel experiences.
Scope & Impact
Scope
Led and shaped common UX across information architecture, navigation, content modules, responsive grids, data visualization, article reading, search, motion, and product branding. Partnered with product, editorial, engineering, and platform teams, and contributed directly to prototypes and front-end implementation.
Impact
Created a scalable system that carried a recognizable MSN experience across six platform families and multiple content domains. The framework increased consistency and implementation quality while allowing each product to respect native platform behavior, device constraints, and distinct user needs.
The System Challenge
The suite had to make highly varied content feel related without forcing every experience into the same template. Sports depended on live scores, schedules, teams, and statistics. Finance combined real-time markets, charts, watchlists, and editorial stories. Health blended immersive media, plans, tools, and personal data. News, weather, food, and travel introduced still more content types and behaviors.
At the same time, the portfolio was expanding from Windows to phones, competing mobile ecosystems, universal apps, and the web. The design problem was therefore larger than screen adaptation. We needed durable rules for hierarchy, navigation, brand, interaction, and implementation that could travel across products while remaining native to each platform.
From Flagship Apps to a Shared Language
The initial Windows 8 Sports and Finance apps established the system’s visual foundation. Bold typography, full-bleed hero imagery, horizontal reading flow, structured data, and minimal interface chrome created an editorial experience that felt expressive but clear. These products also established reusable ways to organize dense content across multiple hierarchy levels.
Sports combined editorial storytelling with live scores, statistics, teams, and personalized content.
Finance translated complex market data into an approachable, content-forward experience.
A System of Rules, Not Identical Screens
Shared Information Architecture
Defined consistent hierarchy and browsing models for landing pages, section views, entity pages, article readers, search, favorites, and personalized feeds.
Reusable Content Modules
Created flexible hero units, data tiles, article clusters, media galleries, quick-access elements, and structured content patterns that could support different domains.
Brand Through Experience
Used typography, imagery, color, motion, and content rhythm to make the suite recognizable without relying on decorative chrome or rigid visual repetition.
Platform-Aware Interaction
Preserved a common mental model while adapting navigation, commanding, gestures, and layout to each platform’s conventions and technical constraints.
Adaptive Layout
Developed responsive grid rules and modular templates that scaled from compact phones to tablets, desktops, and large web canvases.
Design and Engineering Integration
Used working prototypes, production-oriented specifications, XAML and Objective-C fluency, and direct implementation collaboration to carry visual and interaction quality into shipped products.
Platform Evolution
Windows 8
Windows 8 established the foundation for the broader MSN system. Building on the platform’s Metro design language, I defined a media-rich editorial experience using bold typography, edge-to-edge imagery, horizontal navigation, and structured data views. The resulting Sports and Finance experiences also established reusable visual and interaction patterns that could evolve across later platforms.
Windows Phone
The Windows 8 editorial model was translated to a smaller, vertical canvas using panorama and pivot navigation, immersive headers, live tiles, and mobile-optimized data views. The experience retained the family identity while embracing native Windows Phone behavior.
iOS and Android
For Microsoft’s mobile-first expansion, I helped define the common UX foundation across News, Weather, Sports, Money, Health & Fitness, and Food & Drink. Shared hero elements, navigation, article modules, and responsive grids created continuity, while each app respected iOS and Android conventions. Early sketches and Objective-C prototypes aligned teams before implementation and informed content migration planning.
Windows 10
The system evolved into a universal, adaptive framework for phones, tablets, and desktops. I led foundational work across flexible grids, navigation, common actions, hero modules, data tiles, article readers, search, video, and motion. The resulting rules allowed a large content family to scale across screen sizes without losing hierarchy or identity.
Web
The MSN web experience extended the shared language to a responsive global content platform. Modular page templates, personalized feeds, editorial highlights, data components, search, and reusable UI patterns aligned the web with native apps while supporting the scale and flexibility of browser-based publishing.
How I Worked
This work combined system strategy with detailed craft. I moved between product architecture, interaction models, visual design, prototyping, implementation reviews, and production code. That range helped resolve system decisions with both user experience and engineering feasibility in view.
I also worked across product, engineering, platform, editorial, and localization teams. For Korean and Japanese releases, I explored typography and layout behavior for different writing systems so the visual hierarchy remained intentional beyond English-language interfaces.
The lasting lesson was that cross-platform consistency does not come from duplicating screens. It comes from making the product’s essential structure, behaviors, and brand qualities explicit, then giving teams clear rules for adapting them.
