Building equitable, healthier food systems by design
Overview
Project overview
About our client
Community Farmers Markets (CFM) is a nonprofit organization dedicated to providing access to food, propagating educational resources for issues concerning the food system, and developing sustainable modes of food distribution.
Project brief
The impact CFM has in educating the community about food waste reduction is currently stunted by lack of educational resources that engage users in a meaningful way.
The problem
Users of the CFM website do not have clear and reliable access to information that can support them live a sustainable, low food waste lifestyle."
The solution
Create an engaging and interactive online experience that provides clear information on how to address food waste reduction, at the individual level.
Project details
Roles
UX/UI Designer
Interaction Design
Quality Assurance
Timeline
Two-Week Design Sprint
Platforms
Web (Responsive)
Deliverables
Responsive Web Design
Design System
Animation Prototype
Research & Insights
What improvements can we make
To improve the organization of the content, we conducted research to identify places of improvement on the current website. The following research methods were used:
1. Heuristic Evaluation
We analyzed the CFM website against design principles and found three violations that were consistent throughout the site.
Key takeaways
Evaluating the user interface enabled us identify the following usability issues:
Current website pages
1. No visibility of system status
User are not given any visual indication as to where they are in the navigation header. It easy to get lost and hard to find specific information.
2. Inconsistent design elements
There are inconsistencies in layout design, clickable links, font style and font size. Credibility of the site and content is hindered.
3. Accessibility issues
An overwhelming amount of information is clumped together. Paragraphs are lengthy and there is limited visual breaks. Text is hard to to see because of the little contrast between text color and the background.
2. Competitive & Comparative Analysis
We looked at charities, libraries and the six leading farmers markets in the nation to see how they effectively communicate dense content. Features needed to incorporate into the CFM website:
Key takeaways
We identified that integrating these features into our website is crucial for optimizing the user's experience:
1. Search bar
2. Infographics
3. Educational Info
4. Newsletter
5. Responsive Design
6. Strategic Content Placement
3. Interviews
We interviewed individuals with some experience managing food waste and individuals who had the desire to know to reduce food waste.
Key takeaways
Compiling the research from the viewpoint of students revealed various pain points to be addressed in our design:
1. Food Shelf - life
2. Composting Methods
3. Composting Bin Locations
4. Way to ask an expert
5. Community Garden Location
Persona
Designing for our target users
Based off our research, we identified two personas that we would target.
Eco-Savvy Emily
"I want to be more eco-friendly, but I don't have the right resources."
About
Emily is a realtor who is currently residing in Atlanta striving to live a sustainable lifestyle. Early on in life, she realized how important it was to save the planet and strives to do everything in her life for the ecological good. She composts her food at home, but wants to connect more to her community and help others participate in food waste reduction.
Demographics
Age: 31 years
Occupation: Realtor
Location: Atlanta, GA
Frustration
-
Dislikes the lack of educational resources within her community.
-
Annoyed with the amount of time it takes to compost.
Goals
-
To make a positive impact on the environment.
-
Direct others on how to reduce food waste.
Needs
-
Find more resources on food waste reduction.
-
Ability to find the nearest composting bins.
Just Average Jim
"Wants to be sustainable, but won't go out of his way to do so."
About
Jim is a photographer living in Atlanta who tries to live a sustainable lifestyle, but fails to due to lack of resources and busy-lifestyle. He shops at the farmers market, but it always goes bad due to his lack of awareness around shelf life. He often finds it difficult to learn about sustainability since it is a dense topic. He is seeking resources to learn more.
Demographics
Age: 24 years
Occupation: Photographer
Location: Atlanta, GA
Goals
-
Incorporate sustainability into his everyday life.
-
Educate himself on food waste reduction.
Frustration
-
Difficulty maintaining sustainable lifestyle due to time and money.
-
Dislikes untrustworthy resources online when learning.
Needs
-
Methods of communication with credible sources to learn more about sustainability.
-
Digestible educational content.
User Journey
Understanding our users and their frustrations
To better understand the frustrations and needs our users were experiencing, we created a Journey Map for each persona .
Eco-savvy Emily
Click image for a closer look.
Just Average Jim
Click image for a closer look.
Key takeaways
1. Challenges
2. Emotions
Difficulty maintaining sustainable lifestyle due to time and money.
Frustration over the lack of educational resources within community.
3. Insights
Users need a way to find their nearest community garden.They also need more educational resources on food waste.
4. Opportunities
Creating a method of communication with credible sources to learn more about sustainability. Making digestible educational content.
Problem & Solution
Enhancing the online learning experience
The challenge
Users of the CFM website need clear and reliable access to information that can support them live a sustainable, low food waste lifestyle.
Enhancing the online learning experience
We believe that if we captivate users from the moment they land on the site by organizing content, present information clearly, and incorporate interactive elements then users will have a more successful experience connecting to the resources they are seeking.
The why
It's hard to garner attention of individuals around the topic of food waste when there's cluttering elements, lengthy writing, and limited visual breaks. Decreasing readability of information-heavy content diminishes user value and increases bounce rate.
Concept Design
Designing with our users in mind
Based on the research, we identified the following improvement opportunities:
Lo-Fidelity Wireframes
Menu
Restructure the global navigation to reduce search time.
1. Navigation
Composting Page
Redesign page layouts to make educational content easier to scan and read.
2. Layout
Resource Map Page
Construct a map of sustainable resources so that users can utilize them.
3. Resources
CFM Forum
Incorporate a forum where users can search information, post questions and share insights through comments
4. Forum
Testing & Iterations
Let's put our design to the test
We asked our users to perform 4 tasks to test the usability of our prototypes and this is what we found:
Task #1
Find more information about the shelf life of your produce
Task #2
Navigate to the community garden page to learn more about the benefits and how to get involved
Task #3
Locate your nearest community bin
Task #4
Navigate to the forum to get answers from community experts
Key takeaways
Issue: Section label was confusing and the card had no additional information.
Solution: Revise section title and details to be more specific and descriptive.
Issue: Users were confused with the section label Community Board found in the top navigation.
Solution: Revise name of the Community Board page to be more clear on what content lives there.
High-Fidelity Prototype
How it looks after testing and iterations
After completing the usability tests, the team made final changes to make the overall user experience throughout the website seamless.
Eco-Savvy Emily
Scenario 1
Emily wants to learn how to efficiently compost her food scraps.
Scenario 2
After learning new information, Emily wants to locate the closest Community Garden.
Just Average Jim
Scenario 1
Jim wants to learn more about strawberries life cycle after they went bad and how to dispose of them.
Scenario 2
Jim wants to expand his knowledge and find some DIYs from CFM experts.
Key Screens
Next Steps
Making the website seamlessly responsive
We understand that users could find this information quickly and reliably on their mobile, we will work to improve the mobile experience based on the success of the main site.
From our research we discovered that most users seek out concrete information from their computer or laptop. Quick pieces of information or directional information was assigned to their phone.
Breaking down the essential information and interactions from the main site to a responsive mobile site will include a considerable group of users that primarily rely on their cell phone for accessing information.
We will aim to make the website responsive and store content vertically. The speed of mobile searching will be addressed by reimagining the heading categories to be stored in a hamburger/drop down menu. Additionally the navigation bar will host a search bar that will always be visible as users scan through the site.
Reflection
Reflecting on my journey
Collaborating with the group proved to be an immensely enriching experience. Their impressive depth of knowledge constantly spurred my own growth. What truly propelled our success were the structured deadlines, meticulous task management, and our shared commitment to challenging ourselves to create the best possible product.