Designing for the Microsoft Surface Duo

Our early journey in crafting dual-screen experiences
I was asked to fly to Microsoft HQ 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 Duo. A new device that was still being designed. Something that had never been done at Microsoft. We were taken in a window less 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 be run by an Android OS. Our Android Outlook app at the time had passed the 100 Million monthly active users and our team was considered experts in the field. From there it all went really fast. This is the story on 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.”


Responsibilities

I decided to put Joe Woodward on my team as the lead on the project. We setup a secret area for him to work away from the team. Joe did amazing; 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 where 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 the Duo default icon system.


Challenges

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 define 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 shinning on a Microsoft made mobile device.

Press

The Duo was well received. Starting conversations in the press about the future of mobile computing. The merge of tablets and phones and what can mean for productivity on the go. Outlook and all the work we put into it was noticed. Yet 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!

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Dark Mode a journey across Microsoft experiences

Explore Case Study