julio.io

Amex Dark Mode

Overview

Dark mode American Express mobile app screens
Year 2020
Team American Express Mobile UX
Product Amex Consumer Mobile App | iOS & Android
Role Lead UX Designer

A semantic color system for the American Express consumer mobile app.

Summary

With multiple data visualization projects in flight, the design team needed to extend our current set of colors to use in charts. While exploring a system of colors for data, we took the opportunity to revisit our color system to increase accessibility and make dark mode, a top feature request from customers, possible.

Dark mode was a success with over 40% of user adoption in the first year. American Express set a precedent by being the first major financial institution to implement dark mode in a mobile app, a step forward for accessibility and for reducing eye strain for our customers.

Summary

With multiple data visualization projects in flight, the design team needed to extend our current set of colors to use in charts. While exploring a system of colors for data, we took the opportunity to revisit our color system to increase accessibility and make dark mode, a top feature request from customers, possible.

Dark mode was a success with over 40% of user adoption in the first year. American Express set a precedent by being the first major financial institution to implement dark mode in a mobile app, a step forward for accessibility and for reducing eye strain for our customers.

Original American Express mobile app color palette
The original color palette
Expanded semantic color palette for American Express dark mode
The extended palette based on the original

Base Palette

I began by extending our current color system into multiple shades and tints to make more colors available while staying within our brand guidelines.

Typography and icon color documentation for American Express dark mode

Type & Icons

Given that accessibility standards are higher for text than graphic elements, I broke the colors up into two categories: text/icons and layout.

Layout color examples for American Express dark mode screens

Layout colors

Semantic color families for American Express dark mode

Color Families

An initial idea for a visualization color system grouped into three families:

  1. General Data
  2. Card Member Activity
  3. Merchant Categories
Product color mappings for American Express dark mode

Colors by product

  1. Platinum Card
  2. Gold Card
  3. Green Card

I explored using patterns to extend values beyond colors.

Profile screen color documentation for American Express dark mode

Profile Colors

Data visualization color documentation for American Express dark mode

General Data Colors

Spend category color examples for American Express dark mode

Spend Category Colors

Production American Express dark mode mobile screen

In Product

I broke with the HIG and Material dark mode guidelines to leverage our brand colors rather than simply using a black and gray palette.

Outcome

Dark mode was a success with over 40% user adoption in the first year. American Express set a precedent by being the first major financial institution to implement dark mode in a mobile app, a great step forward for accessibility and toward reducing eye strain for our customers.