Digital Publishing

California Academy of Sciences,
San Francisco

2024

A new section of the calacademy.org website devoted to long-form content called Phenomena. This was a departure from all of the standard museum web templates for image-forward storytelling.

A landing page and a flexible layout for different types of storytelling. This design was lead by content needs and creating visual variety within a design system.

Explore for Yourself

Process of developing this tool

Homepage with 9 stories and one featured article. More articles are on additional pages.

On the Homepage, stories can be filtered by theme or by the date when it was written.

At the top of every article there is breadcrumb navigation and a short snippet about what the article is about. For frequent authors, a bio page was created and optionally linked.

At the bottom of every article there is a voting block for reader engagement, and a “Explore more” block that has 3 related stories

Content blocks

  • Explore related content block

  • Image gallery

  • Featured image with content cards in 3 colors

  • Photo gallery has a lightbox style viewer with caption content

  • Pull quotes

  • Article content block lockup. Article title with section name, short description, date, duration of time to read the article, and author(s) information.

  • Large sized images and videos

  • Full width images and videos

Voting: At the bottom of every story, the reader is invited to have add a personal reaction. This is instead of a comments section.

Voting: A green box surrounds the selection you are making of the 4 reactions. By selecting a reaction increases the tally.

The Team

Andrew Sawyer – UX, Visual Design & Strategy
Rhonda Rubenstein – Art Director
Greg Rotter – Web Development
Josh Ause – Web Development
Nick Colin – Content
Zoey Kroll – PM