A Layered Life
California Academy of Sciences,
San Francisco
2018
Visitors bring to life 3 animated whale species by dragging their finger along a timeline to make them swim and reveal stories about what scientists learn from specimens of each species.
Touchscreen with content about reading the layers of specimens to know the lives of whales (similar to reading tree rings). Each story is brought to life by visitor engagement with the stop-motion style art.
Clickthrough of this interaction to show the UX and animations
Installation of the screen and the graphics surrounding the interactive.
Rendering of the location of this touchscreen. One wall had two different interactives both relating to whales.
Home Screen. Visitors select one of the animated illustrations of a swimming whale illustrates what can be learned about these whales lives by studying specimens collected from each species.
GIF to show how visitors bring the content to life by dragging the small whale along the timeline.
Introduction text helping teach the visitor how to use the interactive
The timeline has chevrons to indicate direction of the scroll, with circular indicators of the next content block
For longer paragraphs of text, parts are highlighted as you progress through the app to help with pacing
Close-up view of a sperm whale’s tooth animates the layers to and describes how counting the layers lets scientists know the age of the whale.
Visitors are invited to dig deeper into content by clicking the buttons included in the interactive
Example of the modal that opens after selecting button to dive deeper. The content can use the arrow icons or swipe
Fin whale example content
Stories come to life using a mixture of illustrations, infographics, and photos. This story has content to dive deeper.
This story is about learning the age of the fin whale by reading the rings
The Team
Andrew Sawyer – Visual Design & UX
Sarah Goodin – Content
Greg Rotter – Web Development
Kira Hammond – Video Production