FISH FOOD
Role
UX Researcher
UI Designer
Timeline
4 months
Tools Used
Figma
Figjam
Google Forms
Illustrator
Notion
Team
Dylan Wan
(Individual Project)
PROJECT OVERVIEW
FishFood is a mobile app I designed to simplify sustainable seafood purchasing decisions. The app helps users research and locate environmentally responsible seafood options in their local area through a comprehensive database of sustainability ratings, certifications, and real-time inventory tracking at local retailers. By providing educational resources about sustainable fishing practices and connecting users directly with verified sustainable seafood sources, FishFood removes common barriers to making environmentally conscious seafood choices at the point of purchase.
THE PROBLEM
Environmentally conscious consumers struggle to translate their sustainability values into practical food choices due to a LACK OF INFORMATION, CONFLICTING SUSTAINABILITY METRICS, and the LACK OF ACCESSIBLE DECISION-MAKING TOOLS when shopping for groceries or
dining out.
USER RESEARCH
ANALYZING COMPETING SUSTAINABLE SEAFOOD SITES
When studying competitor sites, I used seafoodwatch.org and msc.org, two websites specializing in the categorization of sustainable seafood. The analysis consisted of defining the sites usability by comparing different aspects to Nielsen’s 10 Usability Heuristics, such as error prevention, user control, and consistency. I then took those into consideration when designing my own platform.
Key Takeaways:
- Both competitor sites relied too heavily on assuming users already had a large amount of fishing/environmentalism knowledge, making the information relatively inaccessible to novice users
- Both posed strong navigation challenges, from inconsistent to hidden buttons/menu features
- Both helped users when errors were made, such as pop up messages when things were searched for incorrectly, though no recommendations were given
RESEARCH
OBSERVING HOW OTHERS NAVIGATE THOSE SITES
To gain a better understanding of my potential user base, I conducted a contextual inquiry on a pescatarian who can cook her own meals. The interview consisted of activities designed to give me insight into her thought process behind tasks related to sourcing sustainable seafood. From the insights I gained, I was able to start thinking about why and how a user would utilize the app.
Key Takeaways:
- Different preferences for view of sustainability info depending on if participant is viewing the product online vs in person. User preferred looking for a sustainability stamp/logo when browsing for products in person, but preferred plain words indicating sustainability when shopping online
- Participant is more likely to notice bad/warning signs than signs indicating good. For example in a dining hall, the user was more inclined to just avoid foods with a red label as opposed to just eating foods labeled in green
- Participant felt that sourcing sustainable seafood was difficult outside of a dining hall context which is very transparent about labeling all items by level of sustainability.
RESEARCH
EMPATHIZING WITH THOSE USERS' NEEDS
Our persona Jenny Kamakura, is full-time student and environmental studies major. She loves to cook meals from her Japanese culture, which is heavily based on using fresh seafood. Currently she has no reliable way to check if the seafood she buys is sustainable and the environmental impact of her choices weighs heavy on her.
This scenario maps out the current pain points found from the research and how this user would benefit after using our app. From the initial frustration of not being able to find adequate information regarding sustainable seafood to finding out her favorite items are out of stock, our app helps to alleviate those stressers.
OUR SOLUTIONS
Design an intuitive mobile experience that reduces the complexity of sustainable seafood purchasing by PROVIDING CLEAR SUSTAINABILITY INFORMATION and REAL-TIME AVAILABILITY, enabling users to make environmentally conscious DECISIONS WITH CONFIDENCE.
DEFINING
MAPPING OUT THE NAVIGATION EXPERIENCE
Through analysis of user interviews and market research, I identified three core user needs: quick sustainability verification, local product availability, and educational resources. I synthesized these insights into a focused feature set and information architecture that prioritizes immediate access to sustainability data while shopping. The app's primary user flow centers on three key journeys: searching for sustainable seafood options, evaluating existing products on the market to verify their environmental impact, as well as a store locator.
Key features and user flows include:
1. Logging in and profile creation
2. Fish search with sustainability ratings
3. Product search filtered by sustainable options
4. Combined fish search and store locator
5. Bookmark system for favorite items
IDEATING
ESTABLISHING CONTENT HIERARCHY
After creating the user flow, I honed in on the information architecture in order to effectively organize all the intended features. I created separate flows with wireframes designated for completing different tasks, just to make sure I wasn't overlooking anything.
INTERFACE DESIGN
TESTING OUT THE FLOW ON USERS
I tested the structure of my low fidelity prototypes, having participants demonstrate how they would naturally navigate between the different features by drawing on the wireframes directly about how they would navigate them. Their feedback revealed opportunities to streamline the login process and integrate educational content more seamlessly into the shopping experience.
Takeaways from User:
1. confusion as to why login was necessary.
I incorrectly assumed that having a profile could be more convenient for frequent users, as a profile would save their location. I highlighted the “Continue as Guest” feature in later iterations
2. combining tasks feature was confusing, as user didn’t know there were tiles to be dragged.
INTERFACE DESIGN + ITERATION
FULLY REALIZING THE DESIGNS + MORE USER FEEDBACK
Through cognitive testing with two users on the high-fidelity prototype, I gained crucial insights into how people interact with a fully formed version of the interface further. This type of testing is invaluable as it reveals any overlooked usability issues as well as inconsistencies within the design system. After allowing users to explore the app, they gave feedback through comments on the Figma file itself.
Key findings:
Accessibility concerns with undersized UI elements:
- Icons were difficult to identify at current scale
- Text in several sections fell below readable size thresholds
Inconsistent visual language:
- Button styles varied across different sections
- Typography hierarchy wasn't maintained throughout
Layout inconsistencies
Information architecture issues:
- Seafood sustainability table had a confusing layout
ITERATING
REEVALUATING ANY CONFUSING FEATURES
Second Iteration:
After taking into account user feedback and further evaluating the feature myself, it became clear that the feature was unnecessary and confusing. Furthermore, it doesn't make sense to create certain task combinations, leaving the ones left to be very few in number. Therefore, it made the most sense to scrap this feature/page completely in the final design.
SUSTAINABLE SEAFOOD
Explore sustainable seafood options, organized into three categories from best to worst choice, with alternatives included. Each category features three columns: Country of Origin, Harvesting Method, and Body of Water, for added specificity.
SUSTAINABLE PRODUCTS
The Sustainable Product screen displays seafood items available on the market, organized from best to worst choice and color-coded for clarity. Tags below each product name provide additional context, such as whether the fish was sustainably caught. Users also have the option to save items for later viewing
STORE LOCATOR
Store Locator screen, helping users find grocery stores near them with sustainable fish in stock within a given radius
BOOKMARKS
Effortlessly save and filter through all your bookmarked items. The bookmarks page lets users manage their saved content and apply filters for easier navigation.
PERSONAL REFLECTIONS
01
DON'T MAKE ASSUMPTIONS
Some of the features I initially added, intended to create a more convenient experience, ended up making certain pages too complicated or unintuitive. Conducting sufficient user testing before implementation reduces later iterating
02
BALANCING ACCESSIBILITY & AESTHETIC
some of the design choices I made based on my own aesthetic sensibilities ended up sacrificing accessibility, most often being color contrast and text size. Learning to find new ways to balance both was key.
03
CONFIDENCE IN
DECISION MAKING
this was the first individual UI/UX I'd ever done, so becoming confident in relying on my past experiences to make judgements was very important for personal growth but also for meeting deadlines.