Dark Mode a journey across Microsoft experiences

Crafting it together for mobile devices
People often think of Dark Mode as a choice between a black or white screen, but this feature involves a wide spectrum of decisions. Dark Mode exemplifies our ability to craft simple and powerful Microsoft 365 experiences that give users choice and flexibility. This is the story of how we managed to ship it across all our apps.

Story

This project started when I made the “mistake” of announcing to The Verge during an interview that Dark Mode was next on our roadmap. From there on, we had to come up with a solution that felt adapted to mobile devices; not just a copy/paste from our large screen experiences, but also an understanding of what iOS and Android were going to land. One of our Fluent principles is to design apps that feel at home on each mobile OS. At the time, I was leading the Outlook design team in charge of mobile apps. I quickly realized this was going to be a project that needed to involve all our other app partners across the M365 Suite. I ended up leading a group of designers across Word, Excel, Powerpoint, Yammer and Teams to land the first version of Dark Mode for Microsoft mobile. 

Learnings

The main objective was preserving continuity across our apps so that users felt at home when Dark Mode was on. Here's a few lessons we learned along the way: we had to stay true to our core product principles. We started from a pure black color palette and explored from there. Elevations in the UI took a lot of tweaking. We built a semantic system with our engineer partners to be able to scale it. And finally, we added a way to switch from light to dark in our design tool. Two designers on my team: Wayne and Joe go deeper on the semantic part in this article


“Microsoft goes all in on dark mode for iOS 13’s launch.” - Tom Warren

It's a journey

The release was a hit with our users, who loved the details we crafted. Our design research team specifically focused on these contexts where folks would want to use Dark Mode, and the response was very positive. While some Dark Mode experiences can be neon or overly bright, people felt that Microsoft apps kept the kind of relaxed feeling you might want in a dimly lit living room or bedroom. They described the experience as comfortable, crisp, clear, and aesthetically pleasing, a nod to how Dark Mode can reduce eye strain.


“Great video and great news. Dark mode on iOS will be sick!” - The Verge

Thank you

A big thank you to Claire Anderson, Ting Zhang, Wayne Sun, Joe Woodward, Corbin Reynolds, Tali Roth, Michael Palermiti, 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.

Designing for the Microsoft Surface Duo

Explore Case Study