Screen capture of the prototype for hero carousels with a diagonal motion design implemented in pure CSS, here in Internet Explorer (for real). My role: prototyper.

Remaking MSN

Once the AMP design team had fully made its mark creating the default apps for Windows, the leaders at Microsoft saw an opportunity to bring our fresh, multiplatform approach to MSN, at the time a doddering, desktop-only experience.

We were merged with the extant MSN design team and together tasked with redesigning MSN for all devices everywhere, for every audience across the globe, to be more interactive, more colorful, more personal than ever before.

The prototype-as-spec aspect

One of our biggest issues was communicating with the large engineering team, especially given the existing culture which relied mainly on PNGs and email threads to deliver designs. This mostly got the job done, but inevitably involved a nontrivial amount of back-and-forth when it came to details about interaction, where to find the latest design, etc.

A demonstration of ICEχ in operation, showing carousel interaction, scroll-snapping, linking, design edition badges, configuration menu. My role: developer.

I had built a prototype out of mockups to show the homepage’s stack of carousels of cards, and we had the idea of letting the designers update parts of the prototype on their own. I released an internal tool we called ICEχ that the designers then used to update their designs, create new sample pages, and link pages together in a clickable experience all on their own.

This system, built on vanilla JavaScript and SCSS, became the central point of delivery for designers to the developers and to all of our stakeholders. It was even used in all-hands meetings and press releases.

Back to Portfolio