Maps dark theme

Two smartphones showing maps of Boston

Immediately after the redesigning Microsoft Maps' light style, we redesigned the dark theme, changing it from a night mode to a dark theme designed to be usable in all light situations.

Problem

The original was too dark. Designed to reduce nighttime eye strain and protect night vision, it was no longer functional for our most common use case: people who have dark theme set as a full time preference. These users found the map unreadable in daylight.

Two smartphones showing very dark maps of Boston

Research

Working with a UX researcher, we held a small workshop to get a baseline on dark theme usage and followed up with unmoderated remote studies to verify the workshop findings of why and when users choose dark themes with maps.

We were also able to draw on previous studies of dark theme usage among users of Office and Windows to help guide our visual thinking.

Competitive analysis

We reviewed dark themes for different maps and different apps.

A table of color swatches from various online maps

Iterations

Based on the research and competitive analysis, we explored color schemes for the base layers and and experimented on road and text color variations.

We also began testing the color schemes in remote usability studies with the maps in a variety scenarios with lightweight prototypes.

Lots of smartphones displaying different map designs

Final design

More by Brook Durant

View profile