Dark mode for Actionable Messages
on mobile

UI design ·  TOOLKITS
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