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
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.
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
This has been a 20% project for Tom and Sam. Tom is a design lead for Google’s Display & Video 360 project; Sam is a user experience designer on the Geo Enterprise team, primarily working on Google Maps Platform. For Tom, working on Timelapse was a way to do what Google does best: using data to create an amazing and focused experience. (Plus, when people ask Tom what he does at Google, he can say semi-seriously, “I work on time travel.”)
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.
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
Once we knew what to fix, we had to settle on guiding design principles, with Google’s Material Design as our foundation. Material Design reflects our brand and establishes some best practices, while encouraging open source contributors to use Material Design and the Material Theming capabilities announced at Google I/O last year.
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.
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
What users see on Timelapse today is the result of our “Earth Day or bust” project. Above all, we want these design updates to create an immersive experience. The map is the most important feature of Timelapse, so we devoted as much real estate as possible to it. On the other hand, we kept controls visible, like pausing and restarting the timeline or choosing highlights. We even tried to play with the opacity of these controls so that the map would still be visible beneath.
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.
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
The Timelapse redesign reflects Google design principles, and is consistent with the Google brand. Part of this goal is to support Timelapse’s users: If we create simple and straightforward designs with a clear purpose, people can share Timelapse maps, embed then in blog posts and social media, and start discussions about how the world is changing.
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.
