Digital Publishing

Client:
The California Academy of Sciences museum

San Francisco, CA

2024

A new section of the calacademy.org website devoted to long-form content called Phenomena. This design departed from the standard museum web templates to enhance image-forward storytelling on the web.

A landing platform 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

Website Features

This storytelling platform has a homepage with sortable articles and article pages created with a robust group of content blocks for more dynamic storytelling.

Desktop: Homepage with 1 featured story and 9 additional articles that can be sorted with two dropdown filters.

Desktop: Homepage with open menu of ways to filter the articles.

Mobile: Homepage with a responsive sized featured story block and indication there is more content below to scroll.

Mobile: Homepage article blocks.

Article page example.

Detail view of the article gallery in the article page.

Content Blocks

  • 1. Large image displayed in a lightbox style design, expanded from a gallery with caption.

  • 2. Design of side by side image blocks with vertical or horizontal images with captions.

  • 3. Featured content block in 3 colors. Shown with the varieties of content (headline + body copy, only headline, and only body copy)

  • 4. Gallery of images, and videos. These are expandable.

  • 5. Large image block scaled to be the same size as embedded video block.

  • 6. Full width image blocks, used sparingly to allow stories to play with pacing of the content and the scale of the images and content blocks.

  • 7. Recommended content block. This sits at the end of every article with 3 related stories.

  • 8. Pull quote design mocked up in 3 color variants.

  • 9. Title block. This includes content for the section, date, author, and read time to accompany the title and sub headline.

  • 10. Body copy blocks with a headline and two styles of buttons.

  • 11. Home page design with a featured content block. We also created a subscription for the block for readers to learn about new stories.

Voting by readers

DETAIL: The illustrations for the 4 emotions visitors can select to react to an article that mimic emojis and social media reactions. Hehe, Love, Woa, Zzzz .(clockwise)

In Situ: This This mobile friendly module sits at the end of each article and above the block to explore 3 additional and related stories.

Rest state. The team wanted to give readers a chance to engage with articles without including a comments section that required moderation.

While this is a touch-friendly module, it was also important that the design work for screen readers and keyboard access. The brand green was revealed when the module is engaged with in this way.

Process of developing this website

DETAIL: The illustrations for the 4 emotions visitors can select to react to an article that mimic emojis and social media reactions. Hehe, Love, Woa, Zzzz .(clockwise)

In Situ: This This mobile friendly module sits at the end of each article and above the block to explore 3 additional and related stories.

Prototype of voting block.

Breakdown of possible features as part of brainstorming sessions to be able to tell the widest range of stories including dynamic media.

The Team

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