Interactive Exhibit ID system

Client:
The California Academy of Sciences museum

San Francisco, CA

2022

A responsive web app built to explore over 500 specimens and artifacts in the Hidden Wonder’s exhibit. Visitors can explore the content on personal mobile devices and on 15 installed touchscreens around the gallery. The whole exhibit was created to be multi-lingual.

Ways to access

The mobile app: Visitors scan QR codes to access case-specific content.

Installed exhibit screens: 15” touchscreen kiosks with attract animations and a design that mirrors the exhibit case layout. Visitors can explore objects and stories about groups of objects.

QR code to explore the mobile view of the digital IDs on your phone

One kiosk was installed in from of each exhibit case. If visitors choose to use their mobile device they can scan the QR code on the content rail at the bottom of the case. The responsive layout for this web app creates a unified experience, and intentionally built so it could easily scale to be used in future object heavy exhibits.




Scan this QR to experience the web app for yourself!

In situ

Installed exhibit photos with visitors using the devices

Key screens (hero user flow)

  • 1. Home Screen. Unique for each of the 15 exhibit cases to match the layout of the objects. Visitors begin exploring by clicking on a teal circle or the “See All” button visitors

  • 2. Object grouping (above the fold). This is where the main storytelling happens for the exhibit about groupings of objects. The photos click through to object detail pages.

  • 3. Object grouping (below the fold). A list view of all objects in the group as a way to get high level information before clicking in to explore more.

  • 4. Object detail page. Large images allow for pinch + zoom functionality. Bottom of the detail page includes links back to the home screen and to the object group page.

  • 5. See All list view. A visitor is taken to object detail pages by clicking on a row. The teal circle indicates that row will take the visitor to a object group page.

  • 6. Menu for navigating the entire exhibit. This mobile-only functionality allows for a visitor to continue engaging with content without needing to re-scan a QR code at each exhibit case. The list is organized chronologically to match the exhibit layout.

  • 7. Bird Song Recording. The data visualization of a recording is annotated with photos of the birds recorded to help visualize the differences between their calls. This is an example of content created to enhance the objects on display in this exhibit.

  • 8. Multilingual access and credits. By selecting the dropdown menu the visitor can access one of the 4 languages the exhibit content was created in. Giving credit to the photographers and scientists was important to include and creates a sort of reference guide for the exhibit.

Behind the scenes

User testing, process examples, iterative reviews

The Team

Andrew Sawyer – Visual Design & UX

Tina Besa – Animation

Anna Simmons – Content

Adrienne Van Allen – Content
& UX
Gayle Laird – Photography

Josh Ause – Web Development
Zoey Kroll – PM