3 Systems (Upwelling, Carbon & Fog)

Client:
The California Academy of Sciences museum

San Francisco, CA

2018

Venn diagram shaped structure housing a trio of related touchscreen interactives. There is a projection mapped interactive map at the center of the structure. The three systems show in detail are Carbon Cycle, Ocean Upwelling, and Coastal Fog.

In situ

Touchscreen to learn more about systems. Each interface uses an illustrated landmass overlayed with sticker like buttons which trigger animations and storytelling describing the factors and impacts of these systems. Ocean Upwelling animation shown as an example.

Carbon Cycle interactive

This part of the exhibit was about volcanoes and tectonic plate activity. Selecting hotspots reveal animations that aid the content in demonstrating the ways carbon moves from the atmosphere into rocks.

Carbon Cycle — Key Screens

1. Home Screen - Carbon in Motion. Animation shows the temperature change.
2. Earth’s Carbon Exchange - Story about tectonic plates impacting the San Andreas Fault. There is an animation showing the land movement along the fault.
3. Earth’s Carbon Exchange - This story about volcanoes and acid rain. The animation shows all three states of the carbon.
4. Current Carbon Challenge - This view of the landmass includes seven hotspots with illustrations and popup stories.
5. Current Carbon Challenge - This story is about oysters and seafood. Other illustrations dim and the selected story highlights.

Clickthrough of the Carbon Exchange touchscreen as part of 3 Systems to show the UX and animations

California Fog interactive

Fog is such a prominent character of the Bay Area. This touchscreen shows examples of how fog moves as well as how it helps vineyards, the forests and much more. Hotspots reveal animations such as the cold and hot air cycling to create fog.

California Fog — Key Screens

1. Home Screen - Fog Formation. Animation shows the wind patterns that create fog.
2. Fog Ingredients - Story about the marine layer. This animation shows the fog condensing.
3. Fog Ingredients - This story about how the fog rolls in. The animation shows the fog moving through the hills.
4. Fog Effects - This view of the landmass includes six hotspots with illustrations and popup stories.
5. Fog Effects - This story is about the fogs impact on redwoods. Other illustrations dim and the selected story highlights.

Clickthrough of the Fog Ingredients touchscreen as part of 3 Systems to show the UX and animations

Ocean Upwelling interactive

This part of the exhibit focused on the oceans and how they are warming and the movement of nutrients. Hotspots reveal animations such as the cycle of warm water sinking and cold water rising. The interactive explores the impacts algae blooming, the feeding of plankton and larger sea creatures.

Ocean Upwelling — Key Screens

1. Upwelling Ingredients - Animation of the cold and hot water moving through the ocean. The animation is shown as a GIF.
2. Upwelling Ingredients - Story about ocean nutrients. This animation shows cold water and nutrients rising from deep ocean.
3. Upwelling Ingredients - This story is about toxic algae blooms. This animation shows the spreading of a bloom as water temperature rises.
4. Warming Oceans - This view of the landmass includes six hotspots with illustrations and popup stories.
5. Warming Oceans - This story is about an unusual weather pattern that impacted upwelling. The other hotspots and illustrations dim and the selected story highlights.
6. Warming Oceans - This story is about crabbing and the impact of warming oceans. Other illustrations dim and the selected story highlights.

Clickthrough of the Ocean Upwelling touchscreen as part of 3 Systems to show the UX and animations

Behind the scenes

User testing, process, iterative reviews

The Team

Andrew Sawyer – Visual Design, Animation & UX
Anna Simmons – Content
James Davidson – Illustration
Kat Whitney – Photography
Josh Ause – Web Development
Ken Ackerman – Animation