MSN Apps for iOS and Android

Apr – Dec 2014, as Senior UX Designer, Information & Content Experiences(ICE) | ASG | Microsoft

Context

In 2014, Microsoft expanded the MSN app suite — originally designed for Windows platforms — to iOS and Android as part of its mobile-first, cross-platform strategy. This effort unified key content experiences (News, Weather, Sports, Money, Health & Fitness, Food & Drink) across major mobile ecosystems while maintaining a cohesive brand presence and seamless content consumption on both platforms.

Role

As a Common UX designer on this project, I led the overall information architecture and visual design of core UI components used across the MSN apps on iOS and Android. I defined reusable patterns for hero elements, quick access bars, navigation, and article clusters to create a consistent and flexible foundation for diverse content types. I also developed a responsive grid system to support multiple screen sizes and orientations across devices.

Leveraging my background as an iOS developer, I contributed directly to design integration and optimization for the new iPhone 6 and 6 Plus. Prior to project kick-off, I created conceptual sketches and Objective-C prototypes that visualized how MSN apps could look and behave on iOS. This early prototyping helped align stakeholders, shape the design direction, and proactively influence project planning and content-migration strategy.

During implementation, I worked hands-on with the iOS front-end code to ensure pixel-perfect execution, partnering closely with engineering throughout integration.

Approach & Key Contributions

Common UX Framework
I designed a common UX framework for MSN’s core building blocks — including navigation, hero images, article reader modules, and content tiles — ensuring consistent interaction patterns across news and vertical apps while accommodating native platform behavior.

Platform-Aware Navigation
Navigational structures were tailored to each platform: iOS navigation adhered to iOS UI conventions, while Android leveraged platform-standard patterns — all while keeping the MSN content experience effortless and intuitive.

Flexible Grid System & Content Modules
I developed a flexible grid and modular template system that scaled across iPhone/iPad and Android screen sizes. This allowed content modules — from simple article lists to rich multimedia tiles — to adapt fluidly to various resolutions and orientations.

Brand & Visual Identity
Visual treatment of headers, quick-access navigation bars, and hero components blended MSN’s brand identity with platform aesthetics, balancing Microsoft’s expressive style with each mobile OS’s native feel.

Design Integration
Leveraging my experience as an iOS developer, I contributed to hands-on design integration and optimization for iPhone 6 and 6 Plus layouts. I worked directly with front-end engineering to help achieve pixel-perfect execution and smooth UI behavior across platforms.

Outcome

MSN apps for iOS and Android launched in December 2014 and were well received across platforms, earning strong ratings from users in both app stores. The project helped make MSN’s content experiences genuinely cross-platform — bringing editorial content, data feeds, and personalized streams to a broader mobile audience while retaining design consistency and high usability.

Focus Areas

Navigation & Commanding
Flexible Grid & Module System
Common UI Components & Theming
Hero Image & Data Tiles
Article Reader & Entity Clusters
Search Experience
Design Integration & Pixel-Perfect Execution

Navigation

Design of the navigation and pivot system that meets both iOS’ common UX pattern and requirements for our content consumption experience.

Navigation Drawer

Grid System & Module Template

Designed grid & module system for various types of devices and screen sizes.

Search Exprience

Design for consistent search experience across the MSN app suite.

Header Design (Android Example)

Expressing MSN app suite’s brand identity yet providing consistent OS-specific standard experience.

Common Building Blocks & Module Template

Created a reusable module system for commonly used data tiles. Helped the engineering team to implement a design theming system which allowed us to achieve a consistent design. As an experienced iOS developer, I helped the team with hands-on coding for the pixel-perfect design.