https://design.google/library/exploring-color-google-maps/
Could a new color system help simplify Google Maps, a complex data visualization of the real world? This team’s idea sparked a year-long collaboration and led to a feat that no one in Map’s 15-year-history thought was possible. They dramatically streamlined a palette of 700+ colors down to 25 major and minor tones—all while making the Map more accessible and more recognizable-ly Google.
Applied to new satellite technology, the approach has paradoxically unlocked our ability to reveal more of the earth’s details. It also creates a stronger foundation for design breakthroughs of the future.
When it launched in 2005, Google Maps served as a navigation tool to get you from point A to B. Now it can help you decide where to go in Bangalore, learn about Mount Kilimanjaro, and explore coral formations in the Great Barrier Reef. As teams further evolve content, typography, shape, and texture, success will continue to depend on rigorous, systematic approaches to change. Here, Google Maps designers join product and engineering managers to discuss how we took on color.
The original system used one color for each detail from forest bogs to shrubs, resulting in differences so subtle that it was difficult to distinguish important elements like roads, text, and borders.
Dana Steffe, Staff Visual Designer, Google Maps: The color work started by exploring our hypothesis on whether we could reduce the palette down to a smaller number of swatches that align more closely with Material Design, while retaining all of the rich details of the Map.
David Cronin, UX Director, Google Maps: One of the challenges with legacy systems is that parts of it may be undocumented. In this case, we needed to look for color patterns in the code itself. The team started by attempting to fully understand the range of colors that had been implemented over the years. When I saw the inventory, I remember my jaw dropping because there were so many colors.
Sang Han, Creative Director, Google Maps: Legacy systems tend to have a lot of complexity so the team’s focus on simplification had myriad benefits. The new color system helps our users better understand the world around them, while aligning it to the Google palette sets us apart and builds brand equity. Because the system is easier to update, it also positions our team to keep moving the brand forward.
Dana: I had just transferred to this team from Material Design and a lot of my job there was thinking about how we improve the velocity of designers and teams: How do we make something really easy to understand and use? Fresh eyes lended themselves to being a bit naive about how complex the system was. In this case, that was good because I approached it like: ‘Of course we can do this! I think? Maybe!’
The Google Maps team experimented with distinguishing map details, improving accessibility, and reducing the range of colors.
Diego Perez, UX Design Manager, Google Maps: We started with a couple baby steps. Last year, we were looking at forests on the Map and had the realization that we had four different colors to represent pretty much the same thing and thought: ‘If we condense those, does the Map still work?’ It was a relatively small release, but it armed us with confidence to be able to take on the grander exercise.
Michael Davidson, Engineering Lead, Core Maps: I’ll admit that I was pretty skeptical, but also excited by the possibilities. I’ve worked in this space for quite a long time and had a sense of the complexity. Hundreds of colors were all there for something. If we could succeed at getting the number of colors down to a manageable number, it would make future releases much easier.
Before & After: United States
With subtle tones and transparency effects removed, bold colors now clearly distinguish map details
Mt. Rainier National Park