Google Play Store Dark Theme

The Google Play Store has 2B+ Monthly Active Users who come to find apps, games, and other digital content. Launching Dark Theme on Play meant ensuring accessibility for 2B+ users across the world. I worked cross-functionally across internal and external (Material Design) teams to ensure the highest levels of accessibility were met and shipped Dark Theme in time for the Android 10 launch in September 2019.

Role

Lead UX Designer

Deliverables

Visual Design & Icon consolidation

Documentation

Collaboration with internal & external (Material) XFN teams to ensure highest Google Accessibility Ratings (GAR4)

Implementation w/Eng

Team

Myself, Lead UX Designer

1 Senior Visual Designer

2 Engineers

Duration

2.5 months

Context

As a fast-follow to Play Store’s major 2019 Visual Design Refresh “VisDre” launch, Play needed to align with Material Design and all Google 1st part apps and ship Dark Theme in time for the Android 10 release in fall 2019. In addition to working closely with various teams as an advisor, DT authority, and bridge with Engineering to ship Dark theme, my responsibilities quickly grew to new feature UX in addition to maintaining and scaling Store’s design system and components.

Dark Theme required considerable cross-functional alignment and technical implementation due to a new Google Material 2 palette which affected all Store UI. By fixing existing bugs, educating design and eng teams about requirements, and creating a system for escalating issues, I resolved all bugs and improved accessibility collaborating across teams, which is critical to making Play an inclusive experience for all.

A major pre-work of Dark Theme was auditing and consolidating inconsistent and redundant icons throughout Store, and the creation of icons unique to Play.

Consolidating and Tinting Assets

Server side assets and icons, such as third-party game IARC ratings, couldn’t be programmatically tinted due to its rasterized .PNG format and required manual delivery in the two semantic values for both themes.

So, working closely with Store’s lead senior visual designer, we created a systematic and scalable way to consolidate both client and server side icons, with extensive documentation for engineers and designers alike, aggregating the newly consolidated icons, their paths, their two sets of semantic assets if not programmatically renderable (i.e. PNGs); and a semantic color palette for all dark and light theme colors used across the Play Ecosystem, below.

Problem

Material couldn’t cover every use case so I worked closely with them to create “in-between” colors for edge cases, which were more frequent and needed than initially thought. Grey “850” is an example of that; unique to Play Store, Grey850 was created for an existing light-themed background color for monetization UI. Where possible, I tried to minimize one-off colors however, knowing that each color registered in the back-end had to be created with its light or dark complement.

As the authority and POC for all of Play’s colors and its uses, I maintained this index and other documentation during the project and well after, when I evolved and maintained Play’s design system across Phonesky (mobile), tablet, and Chromesky (Chrome web). It is still heavily used by designers and engineers as the color guide for Play Store today.

Dark Theme successfully launched in September 2019 and is now available to all Android users globally.

Results

We received positive media coverage externally and internal feedback on how good Dark Theme looks on Play. It’s interesting how prevalent DT has become as the default mode on most native apps now. Prior to the introduction of DT for battery optimization, dark UI was not widely accepted and was thought to be bad for accessibility. The phase-4 A/B test of my optimizations of Quickbooks SEO pages made this clear, at least for pricing information before the late 2019s when DT became commonplace.