Exploring Smithsonian Invertebrate Zoology Images
Explore the various ocean depths and discover the captivating and beautiful invertebrate images in the Smithsonian Zoology Collection.
Skills
Tools
Visual Design
Data Cleaning
Data Visualization
Interaction Design
Adobe Illustrator
Figma
D3.js
Python
Project Brief & Design Thinking
-
Project Brief
The primary goal of this project was to find interesting metadata within the Smithsonian Collection and clean/prep the data to tell an engaging story focusing on quantitative data.
-
Data Cleaning
Depth intervals were binned into oceanic zones—epipelagic, mesopelagic, and bathypelagic—to categorize species by their collection depths. The metadata included a unique identifier (GUID) which is pulled to display Smithsonian images through an API.
-
Design Thinking
Inspired by the vibrant colors of bioluminescent invertebrates, a color palette was created using hues from the images. The vertical bubble chart is designed to evoke the experience of descending through the ocean depths as the user scrolls.
*Unfortunately the Smithsonian website has been down, so if images are not displaying it is because the API is not able to fetch the images from the website.
Initial Prototype
Overview
The initial prototype allowed users to search for invertebrates and view them in a vertical bubble chart, sortable by parameters like phylum and class. At this stage, interactivity was left out to gather initial reactions and feedback on the project’s direction.
Feedback
Visual Clarity:
Although the overlapping bubbles were visually appealing, they made it challenging to distinguish between different depth intervals.
User Guidance:
Suggestions were made to prioritize an intuitive interface that would guide users unfamiliar with invertebrate zoology, rather than relying on a search function that assumes prior knowledge.
Terminology and User Understanding:
Users noted that terms like epipelagic and mesophotic may be unfamiliar to those without a background in the topic. It was suggested to introduce these terms earlier and repeat them throughout the project to ensure clarity and better understanding.
Coded Mockup: D3.js
Overview
As I began coding the project, I realized that while randomly scattered bubbles were visually appealing, this layout didn’t effectively convey depth.
Instead, I organized the bubbles by descending depth intervals, creating a sense of moving deeper into the ocean as users explored the images. I used an arbitrary x-axis position to simulate a gentle slope, echoing the natural contours of the ocean floor.
Navigation Enhancements:
Add a button at the bottom to allow users to return to the top without having to scroll back up.
Include a footer to indicate the end of the page and anchor the project visually.
Add downward arrows to prompt users to continue scrolling.
Confusion caused by an arbitrary x-axis:
Users needed clarification on the purpose of the x-axis
Feedback
Legend:
One user suggested making the legend sticky while scrolling to help keep track of what each bubble size represents, as it was easy to lose context.
Text Density:
Several users noted that the descriptions of ocean depth zones felt too text-heavy and suggested reducing or breaking up the text.
