Dark mode for AMs

Actionable messages let you take quick actions right from within Outlook, without having to leave your email reading pane. It's available across large screen and mobile endpoints. I was responsible for designing dark mode for actionable messages for iOS and Android, and crafting toolkits and guidelines for the same, so that partners, developers and other designers can create actionable messages in dark mode effortlessly.

INTRODUCTION

MY ROLE

THE TEAM

TIMELINE

Designing dark mode, and building dark mode toolkits for actionable messages on iOS and Android.

Solo designer, collaborating with Nupur Mukherjee and the wider Outlook mobile team, 1 program manager, 10+ engineers.

Jan 2019 — Feb 2019

ACTIONABLE CARDS ON iOS

ACTIONABLE CARDS ON ANDROID

☀️ People hate blaring brightness in specific situations

🎨 Aesthetic preference was a valid user motivation

🔋 Battery saving in OLED screens with 100% black

🚫 Actionable messages broke in Outlook dark mode

We heard from a bunch of users that in certain situations like lying in bed with the lights off or in an airplane when the lights are dimmed down, using light mode felt too bright and blaring.

Dark Mode saves a very little amount of battery in OLED screens when you use 100% black in parts of the design. Our designs were based on a black base, to enable this. However battery saving was not our primary goal while building dark mode.

WHY DARK MODE SUPPORT IS IMPORTANT

Some users do have a strong aesthetic preference for dark mode vs light mode and we wanted to give our users the power to choose what they wanted.

With the Outlook mobile app in dark mode, actionable messages started rendering in a broken manner in the email canvas. This was the primary trigger to build dark mode for actionable messages.

TOOLKITS

Building toolkits for dark mode actionable messages on iOS and Android to enable partners

Another key deliverable of this effort was to create comprehensive toolkits for both iOS and Android so that developers and designers from first and third party partner teams who wish to build their own dark mode actionable messages can do so with ease.

EXCERPTS FROM THE TOOLKIT ON iOS

EXCERPTS FROM THE TOOLKIT ON ANDROID

Dark mode for Actionable Messages on mobile