top of page

Sustainable Seafood Guide

Interactive Data Visualization

Sustainable seafood comes from responsibly managed sources, fished or farmed to maintain long-term production without harming ocean ecosystems.

 

This hands-on, interactive learning tool was created as a student concept for the Seattle Aquarium to support families and children in learning about sustainable seafood together. Users can explore seafood species by category, water type, and sustainability rating, making complex data engaging and accessible to a general audience.

 

Designed to support the Aquarium’s sustainable seafood program, the guide encourages curiosity, responsible choices, and greater awareness of our impact on marine life.

Note: This project uses data from 2011 and may not reflect the most current seafood recommendations.

Client:

Seattle Aquarium (Concept Project)

Project type

Concept Project

Role:

Art Direction, UX/UI Designer, Front-End Developer

Tool:

HTML, CSS, JavaScript, jQuery, Adobe Creative Suite, MS Office

sustainable-seafood-guide-hero.png

2024

Challenge 

Consumers often find seafood sustainability confusing. The goal was to create an engaging, intuitive experience that breaks down complex data into simple, actionable insights.

Role & Process

  • Led art direction, UX/UI design, and front-end development

  • Conducted research on seafood sustainability data (2011) and user needs

  • Structured data for intuitive filtering and sorting by species and water type

  • Designed clear visual indicators for sustainability status

  • Built an interactive desktop-first experience using HTML, CSS, JavaScript, and jQuery

Reserches

Research has suggested that overfishing and pollution could lead to the collapse of various seafood species by 2048, posing a serious threat to oceanic ecosystems. 

 

During the design process, I discovered numerous organizations working tirelessly to protect our oceans, including Seafood Watch by the Monterey Bay Aquarium, NOAA's Fish Watch, Food Alliance, The Marine Stewardship Council (MSC), SeaChoice, FishWise, the Blue Ocean Institute, and many more. These organizations provide valuable data and resources that I incorporated into the guide to ensure it reflects the most current and reliable information on sustainable seafood practices.

FishWatch
Food Alliance
Marine Stewardship Council
SeaChoice.org
Fish Wise
Blue Ocean Institute
SeafoodWatch
sketch001.jpg
sketch002.png
sketch003.jpg

Sketches

I chose to design and develop an interactive data visualization showcasing the seafood consumed worldwide. The goal was to create a fun and engaging learning tool for families, providing valuable knowledge that can be applied in everyday life. By making sustainable seafood choices more accessible, the tool aims to inspire positive change and foster a greater understanding of ocean conservation.

Filter 3: by icon

Icons represented the four types of seafood—fish, mollusks, crustaceans, and other species. Each seafood card displayed the corresponding icon above the name for easy identification.

Seafood Type 1-4: Fish
Seafood Type 2-4: Mollusc
Seafood Type 3-4: Crustacean
Seafood Type 4-4: Other

Filter 2: by shape

Shapes represented different water types, saltwater and freshwater, along with species that complete their life cycle in both environments. This feature provided users with valuable information tailored to their geographic location, allowing them to quickly filter seafood options based on what’s most common in their area. For example, users in freshwater regions could quickly identify relevant options.

Water Type 1-3: Salt Water
Water Type 2-3: Fresh Water
Water Type 3-3: Salt and Fresh Water

Filter 1: by color

Color was the most impactful visual cue among the three filter styles in this interactive guide, effectively conveying key information. Red indicated "Avoid" due to high environmental risks, while green signified the "Best Choice," indicating sustainably caught or farmed seafood. Yellow indicated a "Good Alternative," offering a moderate environmental impact when a green-rated option wasn't available.

Color 1-3: Avoid
Color 2-3: Best Choise
Color 3-3: Alternetive

Enhancing Filters with Visual Cues

I elevated the media filter experience by integrating dynamic visual cues, including vibrant colors, intuitive shapes, engaging icons, and responsive elements. These interactive features adapt to user actions, fostering a more immersive and enjoyable experience that invites exploration and enhances user engagement.

Impact & Outcomes

A data-driven, user-friendly tool that distills complex sustainability information into a clear and actionable guide. This concept project showcases skills in interactive design, front-end development, and data visualization. The guide empowers consumers to make responsible seafood choices by categorizing options into best choices, good alternatives, and those to avoid. Its intuitive interface allows users to filter by seafood type and water type, providing a personalized, educational experience that promotes sustainable consumption and raises awareness about the impact of seafood choices on ocean ecosystems.

All Projects

bottom of page