Designing for the Microsoft Surface Duo
Our early journey in crafting dual-screen experiences
“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
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.
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.
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!
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.
