Fresh Or Fishy

Amy Hogan
Carolina Vega
Fernando Reyes Jr

Background

Imagine you get home after a long day. You cook yourself the salmon you had been saving. You sit down ready to eat and skim through Netflix to watch something as you eat. You see a new Netflix documentary that talks about fish and the fishing industry and decide to put it on. In the documentary, they describe illegal fishing practices being conducted and the negative outcomes it has on the environment and sea life. Having finished the documentary you go through your fridge to check the package your fish came in. You don’t know what the labels mean or how to check if the fish were sustainably caught.

Client's Objectives

The team compiled a list of questions aimed at understanding the business and the client’s objectives and expectations. We compiled this list from the information gathered during our meeting with the client and ranked it by importance.

1. Friendly, simple, inclusive, and educational website
   
2. Solidify a branding for Fresh or Fishy (make a logo and style guideline)
3. Not include anything that says the words illegal or blockchain
4. Look legitimate and trustworthy
5. Create a one stop site for people interested in learning about fish sustainability
   
6. Show users sustainable yet affordable fish options near them
   
7. “About Us” section explaining Fresh or Fishy’s values
8. Scrollable diagram of the seafood supply chain
   
9. Possible mapping feature
10. Have a section for suppliers only
11. Wants a FAQ
12. Blog feature with alerts for subscribers/followers
13. A section for social media

Fresh or Fishy’s main objective is to be educational, inclusive, and inviting. Therefore, the design must be user-friendly, clear and concise. At the time of writing this, Fresh or Fishy does not have a website. They also do not have a logo, style guideline, or content. The goal of the project was to create a logo, style guideline, and a mobile and desktop website.

User Research

User Interviews

We interviewed 12 people from different backgrounds and ages to get a general idea of people's relationship with fish, their general knowledge of the fishing industry, and how users choose which fish to get. With this, we were able to create three different personas with user scenarios & use cases.

Personas

Persona 1 - Dimitri

These users don’t have the budget to spend more on better quality, sustainable fish, so their goal is to find the most affordable fish they can get when they buy fish or eat out at restaurants. This means that college students are likely buying unsustainable and/or illegal fish. Since Fresh or Fishy wants to be inclusive with their user base, we want to show ways that college students can be sustainable in an affordable way. We will do this by implementing a price gauge feature to our fish finder search feature.

Persona 2 - Fatima

These users care about the quality of the fish they are buying for their family and are willing to spend more for better quality fish. Fresh or Fishy’s goal is to educate these users about the difference between sustainable fishing and good quality fish because there is a big misconception that these concepts are the same thing. These users often look for restaurants and grocery stores that have good quality fish, so we want to incorporate a search feature similar to that of Yelp, to find restaurants and grocery stores that carry sustainable fish. This will be a simple way for parents to practice supporting sustainability within the fishing industry.

Persona 3 - John

This audience group focuses on restaurants that serve fish. Users in this group are looking for the best quality fish for a cheap price. Buying sustainably caught fish can mean an increase in price and a decrease in profits. With search features, we can help businesses look at cheap locally caught sustainable fish as a viable option and make it easier for restaurants to switch.

Audience’s Objectives

1. Learn about fish sustainability easily - A main reason for the target audience to use our website is to be educated on what sustainable fishing is and how to support it. Not only that but they are looking to learn about it in a manner that is inclusive, easy to understand, and interactive. The target audience will hope to have the information be broken down into easily digestible sections.
2. Check the different labels a restaurant/store has - Another major component for our target audience is to be able to find out the different fish labels a restaurant/store carries. Using Fresh and Fishy’s search feature will allow the user to see the different labels easily and quickly.
3. Where to get legal fish - Aside from being able to check the different labels a store carries, our target audience wants to be able to find the stores/restaurants that have legally caught fish. The user is able to see how much of their much is legally caught and where those stores are located.
   

Problem Statement

Although many fish consumers that care about sustainability are willing to pay more for better quality seafood, they need a more inclusive and trustworthy source that provides information on where to find more affordable and sustainable seafood options.

Competitive Analysis

For our competitive analysis we looked at: Monterey Bay Aquarium Seafood Watch, Fishcoin Project, Tasteatlas, Barn2Door, American Seafoods. Although some weren’t direct competitors to Fresh or Fishy, their sites included several features regarding navigation and content we wanted for our design.

User Flow

Hi-Fidelity Prototype

Making new users who stumble upon our site become passionate about seafood and sustainable fishing was something that our team worked on heavily to ensure repeated visits to our site. The inspiration for the homepage came from the feeling kids had when they first visited an aquarium. We really wanted to humanize fish and give the viewer a sense of awe. We also put a statistic about just how much illegally caught fish make its way to local markets. 30% is a lot and we wanted to have that at the forefront of the site to show people that it is a problem. We also tried to highlight reputable partners to help make our website more trustworthy.

The “What is Legal Fishing” page emphasizes the importance of supporting legal fishing by explaining illegal fishing practices in comparison to legal fishing practices. We felt comparing legal and illegal fishing would be the best approach to explaining legal fishing in an easy and digestible way for users.

Fish Supply Diagram

The most information-heavy and complex part of the website has to be the Fish Supply Diagram. The whole fishing supply chain is extremely complex and has many different components playing a role. The image below shows a simplified version of the fish supply chain that our client had worked on.

As you can see there are many pieces that play a role in getting fish from the sea to markets. Our team had to simplify the fish supply chain further in order to give users an easy-to-read experience that wasn't overwhelming.

We simplified the supply chain to 6 steps that explain how fish go from the sea to markets. Having done that we also wanted to show how illegally caught fish were able to enter the supply chain in each step. In order to have the site be more interactable and make users curious to learn more information, we had this section located in the "information" icon. With this approach, we were able to add more information without overwhelming the user and making each section easily digestible.

Fish Finder

Using the Fish Finder users can easily search for shops, restaurants, and markets in their area that carry legal fish for whatever price range they're looking for. They can also sea the types of fish each market carries

Changes Made From User Test

Challenges faced

One of the hardest parts of the project was turning our client’s project into a brand. Fresh or Fishy is a graduate project developed by our Teaching Assistant Sam and his group. There is currently no website or app for the "Fresh or Fishy" project. Our client’s graduate project focused on making a method for finding and flagging fishermen who were conducting illegal fishing practices. Because of this, at first, we had a lot of trouble designing the layout of the website that would fit both the user’s and client’s needs. Our team's job was to make a mockup of what their site would look.

We also had to create a logo, branding, and color scheme because our client had not intended to make the project into a real-life fishing label at the time. We had to use a placeholder logo we had until our client found a design he liked. 

Another issue we ran into was not having enough content for the website since there is currently no existing website. And, though we are trying to be as inclusive as possible, branding might be somewhat difficult because not many people are passionate about fish.

The fish finder was another aspect of the website that was hard to make because there was so much interactivity. Because creating an interaction for each filter and each checkbox would require a separate frame, we limited the interaction to showcase the usability for our user scenario. We were able to figure out the interactions for the Fish Finder on the desktop site, but given how we wanted to showcase the filter selections on the mobile site, we were not able to make the interactions smooth for the mobile Fish Finder.