Viewing the Earth’s Surface With the New and Improved Google Earth Timelapse

Two design leads unpack their approach to creating new map imagery and implementing Material Design best practices

Google Earth
Apr 25, 2019 · 6 min read

By Samadrita Das, User Experience Designer, and Tom Gebauer, Design Lead

Editor’s note: In 2013, we launched Google Earth Timelapse, our most comprehensive picture of the Earth’s changing surface. In 2016, we added a few new years. Today we released a bunch of updates, including design upgrades and mobile support. Below, our design leads share how they approached redesigning Earth Timelapse.

Chuquicamata Mine, Chile

Google Earth Timelapse is a great example of how Google can take a massive amount of data, democratize it, and enlighten us — in this case about the planet we live on. There’s nothing like a living, moving image to show us how the world has changed over decades, as the zoomable video in Timelapse allows us to do for places like the Columbia Glacier or the Tibetan Plateau.

Today we’ve improved Timelapse so that the site can tell richer stories about the planet, and more people can share these stories. Our mantra in getting this project done has been “Earth Day or bust” — and thanks to some scrappy workflow improvisations, we made it!

Why we were up for the challenge

What appealed most to Sam was the chance to contribute to a platform that helps people visualize how the Earth has changed, in a very digestible format. She was also up for the tight-timeline challenge: It exemplified how teams in an organization as big as Google can be agile if the need arises.

With a scrappy team assembled, we focused on the problems to solve:

  • Mobile support: The existing Timelapse site wasn’t mobile-friendly. It was built using iframes, with tabs along the top and bottom of the screen — a format that worked fine on desktop, but doesn’t let users see the entire Timelapse image on a phone or tablet plus all the controls.
  • Timelines: Timelapse shows 35 years of global satellite images, from 1984 to 2018. That timeframe will change as we receive more images in years to come, and we want to accommodate a potentially infinite timeline. Also, in the future it might be possible to show change over a period of days or months, instead of just years. We want to make these views possible as well.
  • Highlights: Along the bottom edge of the Timelapse map, viewers can choose to see change in different global landmarks and cities, like the Dead Sea or Lassen Volcanic National Park. On mobile devices, people often didn’t click on highlights because they didn’t know what to expect — there wasn’t much visual distinction between the main map and the highlights controls.
Early sketches of some desktop ideas
Early explorations of the mobile experience on Balsamiq

In addition to solving these problems, we had to redesign with open source in mind. Timelapse is the result of a multi-year collaboration between Google and Carnegie Mellon University CREATE Lab, so our contributions would ultimately be brought into the Time Machine client library, an open-source project hosted on GitHub.

How the use case drives design

On a high level, the use case drives design: Timelapse is a tool for exploration, so we had to show people as much of the maps as possible while helping them understand what the map could do, and encourage users to explore. We already do this with Google Maps in general — users understand how it works. But Timelapse adds the element of time, so our design has to reflect that.

Since we had to go from initial concept to execution in a very condensed time frame, we got creative with our UX toolset. (This is where the scrappy part came in.) We normally like to work in InVision Studio or Balsamiq to prototype designs, but not everyone on the Timelapse team had access to those tools. We iterated pretty rapidly, sketching out animated mockups in InVision Studio and dropping them into Google Slides or Gallery to share them for review. When we had consensus on design, we’d go back to InVision Studio or Sketch to complete the work.

InVision prototype

This might have been a few steps above sketching the site design on a cocktail napkin, and isn’t the way we’d normally work. On the other hand, it was kind of liberating. It was a high-velocity project, but since our team was small, we had the freedom to experiment.

Immersiveness and discoverability

Discoverability was equally important. That comes down to an uncluttered experience that’s neat and organized. Timelapse users should feel confident about how to navigate around map options. On the other hand, we’re hyper-conscious of the fact that people have a mental model for how maps are supposed to work, so we didn’t want to replace that model.

For Timelapse on desktop, when a user arrives on the website, we expanded the side panel by default. This way, the user is exposed to the highlights. On Timelapse for mobile, we tried to keep the play/pause FAB (Floating Action Button) within close visual proximity to our timeline. This is a basic human-computer interaction principle: the idea that similar things should be grouped together.

An early draft supports a browseable menu of location highlights

We built in scalability to future-proof the timelines, so if we lengthen them or add options for different time increments, the design won’t break. One cool thing we added with the timeline, which we didn’t have before, is the ability to go backwards. Viewers can see what a landmark like the Aral Sea looks like today, then drag the timeline back — an interesting way to compare the present with the past.

Check out Timelapse, and stick around

When people visit the new and improved Timelapse, we hope they’ll observe and watch. We don’t usually sit and stare at maps for more than a few seconds. But for us, a successful redesign means users will find Timelapse engaging enough to stay a while.

Google Design

Stories by Googlers on the practice of design. For editorial content and more visit design.google

Thanks to Liam Spradlin

Google Earth

Written by

The whole world in your browser.

Google Design

Stories by Googlers on the practice of design. For editorial content and more visit design.google

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade