Overview and Process

Our project tackled a unique challenge: developing a digital hub for a new aquaponics venture dedicated to sustainable food production.

The design needed to appeal to a wide audience: chefs, consumers, students, and fellow growers by providing clear, engaging insights into aquaponics, species and feeding, and culinary uses.

Through an iterative, user-centered design process, we crafted a digital experience that both educates and inspires, helping to make aquaponics a familiar and accessible concept.

Aquaponics: How it works

Aquaponics is a sustainable farming system that combines raising fish and growing plants in a closed, symbiotic environment. How it works:

1. Fish Tank: Fish are raised in a tank where they produce waste.

2. Natural Fertilizer: The fish waste contains nutrients that plants need to grow. Instead of letting this waste build up, it’s circulated to a plant bed.

3. Plant Bed: The plants use these nutrients to grow, and in the process, they filter and clean the water for the fish.

4. Cycle of Growth: The clean water is then cycled back into the fish tank, creating a continuous, balanced cycle.

In essence, the fish feed the plants, and the plants clean the water for the fish. This system requires less water than traditional farming, doesn’t need soil, and can grow fresh produce and fish in a compact, eco-friendly way. It’s a win-win for both the environment and sustainable food production!

Research

Survey

we crafted a survey to collect quantitative data on target audience attitudes toward sustainable food production.

Survey design

• Questions covered user engagement with sustainability, familiarity with locally-produced items, willingness to adjust diets for sustainability, and awareness of aquaponics.

• Survey questions were primarily closed-ended and based on a Likert scale (1-5), allowing participants to indicate their level of agreement or interest.

• Distributed through team members' Facebook pages, aiming for 100 responses; we ultimately received 103 responses, mainly from young adults aged 18-35.

Interviews

To complement the survey, we conducted six semi-structured interviews to explore deeper motivations and behaviors around sustainability.

Approach

• Questions focused on what makes a website appealing, how new interests develop, and factors influencing sustainable consumption habits.

• Interviewed a diverse group of users in the age group of 18-36, with some interviews conducted by phone due to COVID-19 restrictions. Interviews averaged around 30 minutes.

• After transcribing, we identified and organized key phrases and words into themes. This process involved comparing keywords across interviews to find commonalities in their thought processes and behavior patterns,

Key Findings from Research

1. Low Awareness of Aquaponics: Most users (85.4%) were unfamiliar with aquaponics, underscoring the need to introduce and explain the concept clearly.

2. Interest in Sustainable Choices: Despite limited knowledge of aquaponics, participants showed strong interest in sustainability and were open to spending more on eco-friendly products if prices were reasonable.

3. Preference for Visual Appeal: Users preferred websites with clear navigation, visual content, and minimal text, highlighting the need for a visually engaging, user-friendly design.

4. Desire for Practical Applications: Participants wanted practical uses for sustainable products, like recipes, which motivated them to try unfamiliar items related to aquaponics.

5. Relatable and Inspiring Content: Users valued relatable stories and benefits that would inspire them to learn more, suggesting a focus on personal stories and visual examples.

6. Dual Motivation—Environmental and Economic: Participants valued both environmental and economic benefits, indicating the site should highlight aquaponics' positive impact on the climate and support for local businesses

Survey Results:

• Analysis of the responses provided insight into users' knowledge and attitudes.

• 57.3% of respondents were women, and 42.7% were men.

• Most respondents had little knowledge of aquaponics (85.4% were unfamiliar), but there was a strong interest in sustainable consumption, with many willing to spend more on locally-produced, eco-friendly products, provided costs weren’t too high.

Define Phase

Defining the Problem

Our research revealed a key challenge: aquaponics is still relatively unknown in Sweden, and potential customers need more motivation and inspiration to invest in sustainably produced products.

To accomplish this, our design needed to be engaging and informative that introduces aquaponics to users and encourages climate-conscious choices. By combining clear, visually appealing content with actionable insights, the website seeks to make aquaponics accessible and appealing to a broader audience.

Persona

Based on interview data, we created a persona that encapsulates user motivations and frustrations.

Goals for the persona included inspiring sustainable lifestyle choices, providing a sense of motivation, and ensuring easy navigation.

Frustrations with complex navigation and non-functional technology informed a clean, calming design with intuitive pathways..

Sketches and Wireframes

We began with individual sketches, exploring layout ideas for the site’s main components. These were combined into collaborative wireframes in Figma, where we refined navigation and content placement to ensure a cohesive user experience.

Visual Communication

Typography

We agreed on “Bebas Neue Pro” from the sans-serif family for headers and the logo. Its clean, modern look enhances readability and aligns with the overall design theme.

For body text, we used “Garamond, sans serif,” left-aligned to improve readability and placed centrally to draw focus, as research suggests users tend to skip over text positioned at the edges

Color Scheme

The color palette was inspired by research on similar websites and our persona’s goals, such as a desire for eco-friendly choices and reduced stress.

To create a calm, harmonious, and eco-conscious feel, I used earthy base colors like beige, green, and blue, complemented by black, white, and orange accents to enhance visual appeal.

Logo

The logo incorporates shades of blue, green, black, white, and beige, reflecting the aquaponics cycle. Its circular design with a fish and leaf symbolizes the natural cycle of aquaponics, reinforcing the connection between the brand and sustainable farming.

User Testing

First Iteration User Test

With a low to mid-fidelity prototype in Figma, we conducted user testing with two participants to evaluate layout and navigation.

Feedback led to adjustments, such as reducing white space and adjusting font size, to enhance readability and create a more user-friendly experience.

Prototype Testing with Target Users

At the end of the design process, we conducted usability testing with 6 participants to gather feedback on the final prototype. Each user completed two tasks:

• Find information on the fish Tilapia.

• Locate activities available at the farm. We focused on key areas such as readability, layout, scrollability, and navigation, with each test lasting 10-12 minutes and including a brief interview, task execution, and closing feedback session.

Key Insights

• Navigation Clarity: Users found some headings in the navigation bar unclear, and long text blocks were difficult to scan when searching for specific information. Suggested improvements included adding subheadings, changing the “Read More” button to “Go to Fish Page,” and reducing text on the “Background” page in favor of more images.

• Visual Interest: Users suggested using more vibrant colors to boost engagement.

Based on this feedback, we prioritized changes that aligned closely with our persona, such as clearer section headings and improved visual interest, to enhance user experience and accessibility.

Client Feedback

Once our wireframes were complete, we held a meeting with the client to review the layout, functions, and sections of the site. While pleased overall, the client requested a few adjustments:

• Separate the aquaponics overview and background information into distinct pages.

• Divide the “Fish” and “Crayfish” sections into two pages.

• Rename the category label from "Herbs" to "Plants." These changes were implemented to align the website with the client’s vision and to enhance clarity.

The Design

Based on research and the project brief, the design emphasizes clear navigation, engaging visuals, and layout choices to inform and captivate users about aquaponics.

Menu Categories

• About Us: This section provides subcategories like “Aquaponics,” “Background,” and “Visit the Farm,” answering core questions (What, How, Why, Where) with text, images, and video.

• Our Produce: Subcategories like “Fish,” “Shellfish,” and “Plants” present product information visually. Each fish page includes recipe links, shown to boost interest in trying new products.

• Contact: Includes an email form and Google Maps for easy location access, supporting the client’s goal to encourage farm visits and enhance transparency about the production process.

Back-End Solution

Anticipating that the farm might expand its product offerings over time, we created a conceptual model for an admin interface where the client could log in, add new products like fish, and have them automatically appear under the “Fish” category.

• Admin Access: We developed an admin page accessible through a link in the footer. Upon clicking, a pop-up login window appears, securing access to prevent unauthorized changes. This login is prototyped visually but not fully functional.

• Database Design: We set up sample tables for “Fish” and “User” on a school server, showcasing how new products would be added to the “Fish” category. After discussion, we concluded that a more flexible table, “Article,” would better support all categories (“Fish,” “Shellfish,” and “Plants”) under “Our Produce.”

• Future-Proofing: The “Article” table includes a “type” field, allowing the client to categorize products via a dropdown menu. Additionally, we designed a table for storing recipe data linked to each fish product.

This setup enables the client to easily update content as the business grows, with a clear, user-friendly admin interface.

Navigation

• Navigation Bar: The streamlined menu includes three main headings with dropdowns, keeping it simple and focused. The sticky navigation bar follows users as they scroll, ensuring easy access between sections, a key need from our persona.

• Usability Enhancements: Shortcut buttons and scroll arrows reduce the need for extensive scrolling, addressing user preference for quick, seamless navigation.

User Impact

100% task success rate: All test users successfully completed their tasks, such as finding information on the fish Tilapia and locating farm activities. This result showed that the navigation was intuitive and the content structure effectively met user needs.

Feedback on Navigation Clarity: Users highlighted the ease of use with the sticky navigation bar and shortcut buttons, which minimized scrolling. This feature was designed in response to feedback on navigation frustrations and contributed directly to a smoother browsing experience.

Improved Readability: Users pointed out that some text sections were lengthy, which prompted a design adjustment to include subheadings and improve readability. This change resulted in enhanced clarity for 80% of users who previously found certain areas harder to scan.

Visual Engagement: Test users reacted positively to visuals like the video on the Aquaponics page, with 90% reporting increased interest in learning about the process. This response validated the choice to use multimedia elements as a key part of the user experience.

Interest in Visiting the Farm: After viewing the “Visit the Farm” section, 70% of users expressed interest in an actual visit, demonstrating the website’s effectiveness in promoting real-world engagement with aquaponics.

The End

Thank you for reading my case study!