Google Earth
UX Design for high-impact features

Led the end-to-end UX design for multiple Google Earth features, driving the full design lifecycle from discovery and user journey analysis to the design of initial-concepts, wireframes, high-fidelity mockups and microcopy.

For the "Historical Street View feature" (detailed below), the launch resulted in significant engagement growth and feature adoption, and it is currently serving millions of users worldwide. This project was officially featured in a Google Earth announcement on Medium..

(* A second high-impact feature is currently in final development stages and scheduled for launch.)

Google Earth Historical Street View prototype animation
Stage 1
Initial Discovery
User Journey

A user journey is the end-to-end sequence of tasks and interactions a user performs to successfully achieve a specific goal.

User Journey Example
As a Google Earth user who is an Urban & Environmental Researcher →
I want to view historical Street View images of various locations →
So I can explore, track & analyze Street View level changes while maintaining viewing angle & position →
To achieve this, I need to activate a timeline to navigate between past Street View images.

Google Earth Team Goal

Implement a "Historical Street View" feature to provide a dynamic "time travel" experience, enabling users to explore past Street View imagery and observe urban and geographic changes over time.


Feature Goals
  • Increase Engagement:
    Drive deeper user interaction within Street View and increase the overall usage frequency of the Google Earth platform.
  • Environmental Visualization:
    Enable the clear visualization of historical geographic and environmental transformations.
  • Market Differentiation:
    Distinguish the Google Earth historical experience from other platform offerings through seamless immersion.
Stage 2
Define the Need
5W1H
  • Why:
    To increase user engagement with Google Earth Street View by providing a tailored tool for visualizing historical changes.
  • Who (Audience):
    Google Earth users (25 MAUs) and specifically professional users who wish to understand historical changes in geography, urban development, and environmental impact.
  • What:
    Integrating a Historical Street View "time machine" feature into Google Earth with a dedicated user experience designed specifically for the platform's ecosystem.
  • Where:
    Integrated within the Google Earth Street View mode on Desktop and Mobile platforms.
  • When:
    The interface is dynamically enabled for locations with archived imagery and remains hidden where historical data is unavailable.
  • How:
    Leveraging the existing Google Earth interface, Street View interaction patterns, and archived imagery data to implement a new interface for navigating between historical moments.
HMWs (How might we)
  • HMW - Highlight the new functionality and best showcase historical changes?
    (Outcome Focus)
  • HMW - Design an intuitive and easily discoverable user flow within the existing Google Earth UI?
    (Process Focus)
  • HMW - Eficiently leverage existing Street View data and usability across Desktop and Mobile platforms?
    (Implementation Focus)
Stage 3
Legacy State UX Analysis

To establish a foundation for the new feature leveraging Google's archived imagery data an exploration of the current Street View experience was conducted across Google Earth and Google Maps, alongside an audit of Google Earth’s existing satellite-level historical imagery and timelapse functionality.

Google Earth Street View (Desktop / Web App)

Exploring the Google Earth Desktop (Web App) interface revealed, over the main interactive imagery, a semi-transparent top bar with address data and utility icons (Share, More, Back), while the bottom area contained attribution data, image capture button, and orientation controls (North arrow, Zoom).

Google Earth Street View (Mobile App)

The mobile experience showed a high similarity to the desktop UI, maintaining the semi-transparent top bar with address, while interaction buttons (e.g., North arrow and image capture) were updated for smaller touch-screen layouts.

Google Maps Street View (Comparative)

An audit of the historical imagery implementation in Google Maps revealed a "floating card" for date metadata and a bottom panel using image thumbnails and a mini-map to facilitate historical navigation between historical dates.

Google Earth Historical Imagery (Satellite)

Analysis of the existing satellite-level historical tool showed a specific interaction pattern where a toolbar icon triggers a sticky timeline panel, allowing users to toggle between past aerial photographs or transition into a "Timelapse" video mode.

UX Analysis (Legacy State)
Google Earth Street View Google Earth Street View (Desktop / Web App)
Google Earth Street View-mobile Google Earth Street View (Mobile App)
Google Maps Street View Google Maps Street View
Google Earth Historical Imagery Google Earth Historical Imagery
Stage 4
User Flow
Primary Interaction Path
  1. Initiate Street View:
    The user activates the Street View mode and is revealed to the blue line network, zooming in and orienting toward their required destination.
  2. Enter Street View Level:
    By tapping a specific location on the map, the user enters the immersive street-level view.
  3. Activate Historical Imagery:
    Once in Street View, users tap the "See more dates" CTA button, located in the app bar on Desktop and within the bottom sheet on Mobile.
  4. Navigate Between Dates:
    Users can then browse available time periods by scrolling manually-using a mouse on Desktop (or by using the carousel arrows available on Desktop only) or a drag gesture on Mobile.
  5. Select Date:
    Users simply tap a specific date to load the historical imagery for that location.
  6. Spatial Navigation:
    Users can navigate to a different location or address while maintaining the Street View mode on the selected historical date.
Extended Interactions
  • Collapse Interface:
    Users can collapse the Historical Street View list to maximize the visibility of the main imagery while maintaining access to the date navigation controls.
  • Close and Reset:
    Users can exit the historical mode and reset to the latest imagery by tapping the "Back to latest" CTA or "X" buttons on Desktop, or the "Back" icon button on Mobile.
  • Capture Image Integration:
    Users can tap a "capture image" button to save the specific image with its date, angle, and zoom level.
  • Empty State Handling:
    When a location does not have historical imagery available, the "See more dates" CTA button in the header is automatically disabled.
Historical Street View - Web App Flow
Google Earth Street View Flow Google Earth Street View Updated Flow
Stage 5.A
UX Design Solutions - Desktop Web App

Integrating Historical Street View into the Google Earth Desktop mode is designed to encourage the exploration of past imagery and increase overall user engagement. To achieve this, the following UX solutions were integrated into the flow to seamlessly incorporate the new functionality:

  1. App Bar Architecture
  2. CTA Button Integration
  3. Responsive Floating Panel
  4. Thumbnail Navigation
  5. Contextual Exit Logic
  6. Collapsed Navigation State
Desktop Web App - Design Solutions
1. App Bar Architecture

The app bar was refined to improve accessibility and de-clutter the main imagery. By using a solid background and clustering interactions - including a relocated "Capture Image" action - the design ensures consistency with the Google Earth ecosystem while enhancing the readability of the header.

2. CTA Button Integration

A prominent "See more dates" button serves as a familiar entry point, while a "Back to latest" button allows users to reset the view. These buttons utilize specific phrasing, action-oriented iconography, and coloring to clearly distinguish between actions and between active and inactive button states.

Google Earth Street View App bar
3. Responsive Floating Panel

A wide floating panel houses 16:9 thumbnails, providing an intuitive way to spot environmental changes. The panel is fully responsive to different screen sizes and various amounts of images, and includes "X" and "Collapse" buttons that align with existing Google Earth floating panel patterns.

4. Thumbnail Navigation

Navigation is simplified through a "scroll and tap" gesture, with the latest imagery anchored to the right to match the standard of another Google Earth historical timeline. This allows users to jump easily between non-sequential dates, leveraging existing mental models from Google Maps.

5. Contextual Exit Logic

Users are provided with two clear methods to exit the historical mode: the "Back to latest" CTA in the app bar or the "X" on the panel. Both options reset the imagery to the current date while keeping the Street View session active.

Google Earth Street View - Responsive thumbnails Panel
6. Collapsed Navigation State

When space is a priority, the panel shrinks into a compact date chip. This state maintains the collapse functionality found in other Google Earth features, allowing users to toggle through imagery via "next/prev" controls or tap the chip to expand the full list.

Google Earth Street View Collapse state
Full Desktop Web App Prototype
Google Earth Historical Street View prototype animation
Stage 5.B
UX Design Solutions - Mobile App

Implementing Historical Street View into the Google Earth Mobile mode is designed to ease the discoverability of past imagery and enhance overall user engagement, while leveraging Mobile functionalities and patterns. To achieve this, the following UX enhancements were integrated into the flow to seamlessly incorporate the new functionality:

  1. App Bar Removal
  2. Bottom Sheet Integration
  3. CTA Button Integration (and Exit Logic)
  4. Thumbnail Navigation
  5. Collapsed Navigation State
Mobile App - Design Solutions
1. App Bar Removal

The app bar was removed to de-clutter the main imagery and improve the readability and accessibility of the address and icon-buttons. This change ensures the user’s focus remains entirely on the immersive Street View experience while maintaining essential controls.

2. Bottom Sheet Integration

Functionality and information were clustered into a responsive bottom sheet to ensure consistency with Google Earth mobile patterns. This layout organizes action buttons - including a relocated "Capture Image" action - and ensures responsiveness on narrow screens by moving secondary actions into an overflow menu.

3. CTA Button Integration (and Exit Logic)

A prominent "See more dates" button serves as the primary entry point, utilizing the same hierarchy as other Google Earth bottom sheet buttons. To maintain a clean interface, the button does not appear when historical imagery is unavailable. Users can exit historical mode and reset to the latest imagery by simply tapping the "Back" button within the bottom sheet (unlike the desktop mode, which features a specific "Back to latest" CTA).

Google Earth Street View - Mobile App
Google Earth Street View - Mobile App CTA Button
4. Thumbnail Navigation

Navigation is optimized through a "scroll and tap" gesture using 1:1 aspect ratio thumbnails, which provide visual harmony, easy navigation between non-sequential dates, and UX differentiation from Google Maps. Following the standard of another Google Earth historical timeline, the latest imagery is anchored to the right.

Google Earth Street View - Mobile App thumbnails Web App thumbnails - Long image list
Google Earth Street View - Mobile App thumbnails short list Web App thumbnails - Short image list
5. Collapsed Navigation State

To de-clutter the view, the bottom sheet can be dragged down so a compact date navigation chip becomes visible. To expand back to the full thumbnail list, the user can tap the chip or drag the bottom sheet back up.

Google Earth Street View - Mobile App collapse thumbnails
Google Earth Street View - Mobile App expand collapse
Full Mobile App Prototype
Google Earth Historical Street View mobile prototype animation
Explore some
More of Morieldez Portfolio
E-mail Morieldez

morieldez.design@gmail.com