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 to announce to The Verge during an interview that Dark Mode was next our roadmap. From there on we had to come up a solution that felt adapted to mobile devices no just a copy/paste from our large screen experiences but also understand what iOS and Android were going to land. One 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 need 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.

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 your core product principles. We started from 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. Wayne Sun on the team goes deeper in each one of these in this article he co-wrote with Joe Woodard.

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

It's a journey

The creative energy that came from exchanging ideas and collaborating with new peers was one of the most fun parts of this entire effort. 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 Outlook mobile 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