Screen capture of part of ICEχ, here showing a design for hero carousels with a diagonal motion design implemented in pure CSS, running in Internet Explorer, delivered to user research for testing. My role: interaction designer, prototyper.

MSN’s central prototype

Redesigning MSN.com was a broad and multifaceted undertaking. At its center was the problem of scaling the connections between designers, user researchers, and engineers; how to quickly test new ideas, demonstrate established ones, and deliver polished designs to ship a new MSN to millions of users in just a year.

I released and maintained a monolithic prototype we called ICEχ that the designers then used to disseminate their designs. At first much of the prototype relied on rasterized media, but as our layout and interaction design matured the prototype came to manifest those aspects of the design system and needed less and less manual input (except where we wanted to try new ideas of course).
A demonstration of ICEχ in operation, showing carousel interaction, scroll-snapping, linking, design status badges, configuration menu. My role: interaction designer, prototyper.

Connecting to user research

The prototype allowed us to quickly produce testable design variations. As an example, I collaborated closely with our motion designer to produce a carousel with a creative application of geometry and motion (shown at the top of this page) which our user researchers used in qualitative tests to assess engagement with and attitudes about the new content.

We discovered through other tests using the prototype that a layout variation reducing media and article abstracts performed better in some East Asian markets where a layout emphasizing number of headlines was preferred. We also discovered high engagement with carousel patterns, which led to a design applying that pattern broadly throughout the product.

Connecting to engineering

As with the interaction designs & prototypes I delivered for Windows apps, ICEχ used statecharts for discretizing user input, coordinating animation & motion, and transitioning between views. This let us quickly test different interaction design models across the product. The final machine-readable SCXML would be used by the engineering team to guide development of MSN’s motion and interactivity.