I was asked to fly to Microsoft HQ in early 2019 to get approved and cleared for access to see a new device. They wanted me and my team (Outlook Mobile) to start exploring ideas for Outlook on the Duo. A new device that was still being designed. We were taken into a windowless room, asked to sign papers, and lectured about secrecy. The lead project manager opened a black box, revealing a dual screen mobile/tablet phone. I was excited right away. And the cherry on top was that it was going to run Android OS. Our Android Outlook app at the time had passed 100 Million monthly active users, and our team were considered experts in the field. From there, it all went really fast. This is the story of how we designed Outlook for Duo.

‍

“The Surface Duo is a lovely, well-designed object. Every millimeter of it has clearly been crafted with intention.”

‍‍

Learnings

We set up a secret area to work away from the team. A designer on my team (Joe W.) did an amazing job; he managed to come up with some really interesting ideas for drag/drop and find creative ways to use the second screen when certain elements were selected. Something we pushed early on was the use of Fluent icons. We had started the first Fluent set for Outlook mobile, and we wanted the rest of Microsoft to adopt it, too. Working with the Fluent team at the time, we managed to make that icon set the Duo default icon system.

‍

It's a journey

This was my first time dealing with a secret project internally. We had to be creative while crafting the experience since we were not able to get our hands on the actual device for a few months. We also wanted to respect Android while also defining our own signature OS, and that's when all the work we had been doing with Fluent really came together. From our colored headers to the icons, coherence and crafted mobile apps were finally shining on a Microsoft made mobile device.

‍

‍

Press

The Duo was well received. It started conversations in the press about the future of mobile computing. The merging of tablets and phones, and what it could mean for productivity on the go. Outlook and all the work we put into it was noticed. It's still the first version of this new category, and more work will have to go into it based on actual feedback from early adopters.

‍

“Outlook, in particular, is great: you get your email list on the left side and emails on the right. Hit forward, and the original email scoots over to the left and the entire right screen becomes the compose window for your new email.” - The Verge

‍

Thank you

A big thank you to Claire Anderson, Nate Clinton, Joe Woodward, Tali Roth, Jon Friedman, Benedikt Lehnert, Nando Costa and all of the mobile teams across Microsoft for coming together on this. This was a huge effort across the company with countless names to list. All visuals on this page were created by Microsoft designers.

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!