Visual Storytelling of Smithsonian Corals
An interactive data visualization project that explores the diverse ecosystems of coral reefs through a storytelling lens. By leveraging open-access data and vibrant imagery, the project highlights the various species of coral and their environmental significance.
This project was done in collaboration with my classmate Ian Yu for our Major Studio course that was taken in the Fall of 2024 at Parsons School of Design
Team
Tools
D3.js
Python
Adobe Photoshop
Data Visualization
Interaction Design
Visual Design
Photo Editing
Role
Visual design, UI/UX design, and dev
Skills
Project Brief & Design Thinking
-
Project Brief
This qualitative data visualization project aimed to bring attention to coral reefs. The Smithsonian has a plethora of articles and helpful information about corals and how they are a crucial building block for many ocean depths.
-
Literature Review
There is fascinating information about how coral aids in cancer research and its anti-viral properties, along with its importance to many fish habitats. There are corals in deeper ocean zones that are suffering due to ocean trawling. This was a focal point that we wanted to make to highlight the findings in our research.
-
Design Thinking
We aimed for a minimalistic, vintage illustrative aesthetic to harmonize the research and qualitative data points. To guide users through the page, we employed a scrollytelling method, featuring a progress bar that encourages the discovery of new information.
The Smithsonian Invertebrate Zoology API provided taxonomic data, collection depth, and location of coral species, prompting Ian and me to explore a qualitative visualization that focuses on these categorical data points.
Our goal was to highlight corals' stories while showcasing the Smithsonian's extensive and well-documented coral collection (the largest in the world).
Concept #1
This concept focuses on the Smithsonian's country-specific data, showcasing the distribution of species by country and highlighting the institution's exploration and research expeditions. Clicking on a country reveals additional details about its most prominent species.
When you select a country, the second UI displays an animation of various images representing the species, overlaid on an illustration of the species. A computational shell will present data specific to that country category.
Initial Concept Sketches
Concept #2
This sketch highlights the biodiversity of corals in the Smithsonian collection through an interactive scrollytelling map.
Tooltips will display information from the Smithsonian API, such as the coral's phylum and class, along with images of the corals, triggered by their longitude and latitude markers.
Chosen Concept: 3
Concept #3
This sketch focuses on the effects of nutrient concentration at various depths to show coral health. This will attempt to tell a story about how the types of coral vary at different depths and what the chemical composition of the salinity at that depth affects the coral.
Feedback highlighted Concept 3 as the most compelling visualization, representing a natural progression from my initial project, which analyzed the depths of all invertebrate zoology specimens in the Smithsonian collection.
Feedback
Typography
Feedback on the scrollytelling section highlighted the need to refine typography choices and use design to better emphasize key information.
Illustrations
The overwhelmingly positive feedback on the illustrations suggested they could be used more strategically throughout the project to emphasize key information and balance out the feedback on the typography.
Changes & Implementation
Overview
While Concept 3 was selected, we aimed to incorporate elements from the other initial sketches. For the prototype, we adopted a scrollytelling format, maintaining the original visual concept of juxtaposing illustrative species with Smithsonian-sourced images. Additionally, we emphasized storytelling about corals, drawing on the Smithsonian's extensive educational articles to highlight the importance of coral reefs.
Information Overload
The depth extrusion which created an interactive webpage for people to explore information on the corals at that depth was taken as too visually dense.
After considering the feedback, our mockup closely aligned with the final project. To address the identified issues, we added a progress bar to help users track the scroll's progress, included more illustrations, and simplified the depth extrusion for better clarity.