Seafood Watch Dedicated Mobile App and Responsive Webpage
Seafood Watch is a program developed by the Monterey Bay Aquarium, leader in the global sustainable seafood movement, focused on seafood sustainability. The organization needs a tool that helps people learn about sustainable seafood, manage their seafood consumption, and explore recipes using best choice seafood options. Seafood Watch’s primary target users include students and adults who are concerned about seafood consumption and who would like to learn more about catch methods as well as where to find sustainable and local seafood.
The problem:
Overfishing and our own consumption habits are just a few factors contributing to a decline in wild fish populations. This decline threatens the economic survival and food security of billions of people.
The goal:
Design an app that will improve education on sustainable seafood and provide best choice seafood options along with recipes using sustainable seafood to help people manage their seafood consumption.
My role:
UX designer leading the app and responsive website design from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User Research: Summary
I used Monterey Bay Aquarium’s data on catch methods and seafood consumption to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling unsure about their seafood choices, but they didn’t actively try to reduce or make changes to their consumption. The feedback received through research made it very clear that users would be open and willing to work towards sustainable seafood choices if they had access to an easy-to-use tool to help guide them.
Personas
Starting the Design
Paper Wireframes
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on seafood mongers nearby and simple recipe features.
Next, I sketched out paper wireframes for each screen, keeping the user needs of local seafood mongers and sustainable seafood recipes in mind.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the SeafoodWatch app. These designs focused on delivering personalized guidance to users to help find sustainable seafood options locally.
Landing screen offers a search bar and map for users to find sustainable and local seafood mongers nearby
Easy access to app features from global navigation
Low-Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of searching and connecting users to seafood mongers nearby.
Redefining the Design
Mockups
Based on the insights from the usability studies, I applied design changes like adjusting the global navigation to include the user’s most visited screens, and revising the language to better suit the user’s need in the SeafoodWatch app.
Mockups
The second usability study revealed difficulty viewing the search bar to locate and contact local fish mongers. To streamline this flow, I applied design changes like the color of the search bar to improve its visibility for the user.
Key Mockups
Accessibility Considerations
-
Labels
Clear labels for interactive elements that can be read by screen readers.
-
Focus
Initial focus of the home screen on map to and search bar to fin local and sustainable seafood nearby.
Responsive Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the SeafoodWatch sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Responsive Designs
Mobile Website
Tablet
Desktop
“The SeafoodWatch app helps bring caring about the environment to a personal level in a way that’s easy and engaging.”
— Research participant
Takeaways
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Impact
Users shared that the app made sustainable seafood consumption seem like something they could actually help participate in.
Next Steps
