Cal Academy Museum Website Projects

California Academy of Sciences,
San Francisco

2017 — 2024

While working at the California Academy of Sciences museum, I took every opportunity to build a stronger web brand, engaging experiences, add a bit of humor, with the brand personality.

Homepage refresh
in 2019 the team re-designed the homeapage focused on visitor feedback and highlighting more of what the museum does. This was designed as a responsive mobile-first design.

Updated Homepage Examples

  • 1. Hero video. A series of clips were created to auto-shuffle on page load. These videos show the range of experiences without being exhibit specific.

  • 2. below the hours block, was a promotional space for purchasing tickets. The “iconics” (such as the rainforest biodome) block is scrollable.

  • 3. New or featured exhibits section with a link to see all and 2 featured exhibits blocks.

  • 4. Featured events section with a link to see all and 2 featured event blocks.

  • 5. Support section with a Membership block

  • 6. Support section with a donation block

  • 7. Updated footer with an email newsletter signup, quick links, and other key visitation information.

  • Desktop homepage update - 1

  • Desktop homepage update - 2

Previous homepage - Desktop

Previous homepage - Mobile

Site Navigation
The way visitors navigate Calacademy.org was a project revisited a few times. The major design update was in 2019 changing the branding from orange to Academy Green along with organizational updates. Later enhancements to footer elements and the language used for nav menu titles further refined the navigation.

Navigation Examples

Nav in Academy Green and re-designed to be responsive, accessible, and including 3 buttons to drive purchases

Compressed nav seen while scrolling. One version of the nav items which was later compressed for legibility.

Mobile nav doesn’t compress. This example includes extensive work on the footer to optimize and clarify important info for visitors.

Previous version of the site nav in orange. The language used for nav items was refined for clarity.

Featured content blocks.
A range of projects to enhance individual pages and add personality to the website overall. These interactive, playful, and animated blocks implemented across the website played a significant role in the digital brand.

Featured Content Examples

  • Interactive hero image to promote the 10 year anniversary of the building. By pulling the slider visitors could see how much the biodome rainforest has grown between 2008 and 2018.

  • Created an error page (404) with original illustrations by Michael Bartalos. The goal was to make a broken link or incorrect URL less frustrating to visitors.

  • Before the homepage redesign, the hero content was a carousel to feature and promote exhibits. This GIF is an example of some art created.

  • Popup with animated artwork by Lydia Ortiz. This one was specific for the Thursday evening events tarted at adults

  • Popup with animated artwork by the design team. This one was specific for our general audience email newsletter

The Team

Andrew Sawyer – UX, Visual Design & Strategy
Nick Colin – Content
Amie Wong – Project Lead and PM
Joe Mochnick – PM
Jinny Kim – Visual Design
Josh Ause – Web Development
Greg Rotter – Web Development
Rhonda Rubenstein – Art Direction