MSN Apps for iOS and Android

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

As a Common UX designer, I led overall information architecture and the visual design of common elements such as hero, quick access, navigation bar, and article entity clusters. Microsoft’s modern design language was well blended with iOS 7’s new design and Android’s material design. I tried to bring our MSN app brand into the design while honoring standard UX patterns of iOS/Android platforms. I developed a grid system to support various types of iOS/Android devices and screen orientations.

As an experienced iOS developer, I contributed to design integration and design optimization for new iPhone 6 and 6 Plus devices. I made early design sketches and prototypes with Objective-C code before the project kick-off, to help the team envision how our apps would look like on iOS devices. This prototype made the design team proactively drive the project plan, design direction, and content migration strategy.

In the implementation stage, I helped the team achieve pixel-perfect design by actively working on the iOS front-end design integration, closely collaborating with the engineering team.

Through this project, MSN’s content experience became truly cross-platform.

Focus Areas

Navigation
Common Actions and Commanding
Flexible Grid System & Content Modules
Information Architecture
Hero – image, data/action tiles, motion, transition, parallax effect
Article Reader
Entity Cluster
Editable List View
Splash Screens
Design Integration

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.