bioGraphic

Multimedia Publication Platform

Project Overview

bioGraphic is an immersive, multimedia magazine created by the California Academy of Sciences to explore the natural world through science, storytelling, and photography. I led the UX and visual design strategy to transform complex narratives into a rich, intuitive digital reading experience.

My Goal

Create an immersive, accessible, and scalable digital storytelling experience that could handle long-form content, rich media, and scientific data, all while ensuring editorial flexibility.

bioGraphic started as an idea to share awe inspiring stories of nature, people, and it’s interconnectedness. The solution was to develop an online platform that would deliver those stories, highlighting beautiful photography, videography, and interactivity in order to fully immerse viewers into the scene of the stories.

From the initial phases, I developed both the overall brand system, as well as the layout system for each and every story, making sure to meet our audience where they are by creating dynamic layouts that would work for all screen sizes and devices.

I collaborated with a small, yet diverse team, to define user goals and content structure, then created wireframes and user flows to guide the storytelling experience. I designed a flexible visual system that supported multimedia content while maintaining editorial consistency. We tested interactive prototypes to refine layout, hierarchy, and accessibility, ensuring a seamless transition from design to implementation.

bioGraphic

UX Design
Visual System Design
Front-End Collaboration
Accessibility Integration

Early on, it was determined to build in a modular fashion, allowing elements to shift and stack for smaller screen sizes. Some elements completely change, depending on what devices they are viewed from.

Initial iterations show how the platform was created to stand out as vibrant and modern, while still being easily accessible to our intended audience. Homepage and interior story page design solutions were developed to increase text and image visibility without compromising layout, putting user needs at the forefront of our thinking.

bioGraphic's An Audacious Plan in the Twilight story page example

An Audacious Plan in the Twilight is the first immersive article for bioGraphic, and incorporates video, photography, data visualizations, and storytelling to describe some of the research that lead the California Academy of Sciences to discover new species and explore a relatively unknown region of the planet, the Twilight Zone. I developed the techniques used to showcase the animated visuals, imagery and content in this immersive storytelling piece.

bioGraphic homepage example on various screen sizes

Beautiful nature imagery combines with immersive storytelling through engaging layouts and interactive content. Periodically published storied include immersive articles, Spotlight photography pieces, Photographic Essays, video stories, and opinion articles. Each story type has it’s own set of stylistic guidelines that allow for unique qualities to each story, while maintaining a cohesive publication.

Outcome

BioGraphic increased reader engagement and time-on-page while establishing a scalable, accessible system that’s now used across multiple Academy communication platforms. The online magazine has helped position the California Academy of Sciences as a leader in immersive, science-focused editorial design.

What I learned

This project deepened my appreciation for how editorial collaboration enhances user experience. A well-structured design system can empower content creators and supports storytelling without restricting creativity. I also learned how cross-browser accessibility is crucial when reaching broad, non-tech-savvy audiences and how to balance accessibility, storytelling, and science, in a single platform.

Next Project