PRODUCT DESIGN / RESEARCH / CONTENT DESIGN

Ciku

Encouraging Sustainable Eating By Suggesting Recipes With Local and Seasonal Produce

Ciku is a website application that helps people find out which fruits and vegetables are currently in season based on location (U.S. state) and the current month. They can also get recipe suggestions so that they can learn how to prepare meals with their choice of produce. Each recipe is given a sustainability score that indicates how many local and seasonal produce are in the dish. Once a person finds a recipe they like, they can save the recipe and add needed ingredients to a grocery list. 

The MVP for this project was developed as part of a fellowship called Chronic Coder Academy Season 3.
View MVP

Team

UX Designer/Researcher (Me)
Frontend Developer
Backend Developer/Product Manager
My ROLE
(User Research, Wireframing, UI Design, Content Design, Interaction Design, Branding, Prototyping, Usability Testing)

Duration

10 weeks

tools

Figma
Discord
Google Suite

Introduction

Problem
Local, seasonal food is tastier and healthier for you, your community, and the regional economy. Thanks to its shorter transport route, most seasonal and locally grown produce have a smaller environmental footprint than mass-produced food. However, there isn't an easy way for people to check which produce are in season or grown locally.
Goal
Encourage people to eat sustainably by creating a tool that helps them learn which fruits and vegetables are local and in season, and how they can prepare meals with them.

Research

1. User Interviews: How do people currently shop for fruits and vegetables?
I conducted 6 user interviews with people who had the following characteristics:
These interviews helped me gauge interest in sustainable food shopping, identify pain points associated with buying local and seasonal produce, and find opportunities for improvement based on people’s experiences.
2. Competitive Analysis: How do popular food websites help people find recipes?
I looked at the Seasonal Food Guide website to understand how it helps people find out when fruits and vegetables are in season, and if it recommends recipes. I also analyzed Food.com and Allrecipes.com to learn how their features help people find meals to prepare. Competitive analysis revealed that there currently isn't a website that both provides information on local, seasonal produce and ranks recipes based on sustainability.

Synthesis

1. Data Matrix
I used a data matrix to tabulate findings from each person I interviewed. It helped me easily see how people answered each question and to discover insights.
Data Matrix Excerpt Summarizing Responses to Seasonal Produce Interview Questions
Key Insights (from the data matrix above, in blue)
2. User Persona
The research insights helped me create a persona that would inform my design decisions throughout the project.

Design Process

Based on information from the interviews I conducted, my team and I decided to create a website application that would allow people to quickly look up produce that is currently in season for their U.S. state and find recipes. This app would eventually be responsive to allow flexibility for people using various devices, but for the MVP we focused primarily on the website app.
1. User Flow
I started by creating a simple user flow to help me think about how users would begin the process of learning which fruits and vegetables are local and seasonal, find sustainable recipes, and then prepare to buy necessary ingredients from the grocery store.
2. Wireframing
Wireframes helped spark discussions with the developers on my team about which features were necessary and where they should be located as a user navigates through the app. They also helped the frontend developer create the barebones structure of the web app.

UI Design

The color palette is warm and bright to evoke positive emotions in the users as they use the app. Green and orange are the main colors because “going green” is associated with sustainability and orange is thought to be a color that stimulates hunger. UI elements have rounded corners to make users feel that the app is safe and friendly.

I created the following style guide as a reference for the frontend developer as she built the user interface. 
High-Fidelity Designs
I had to rethink some aspects of the design from wireframes to high-fidelity because we realized that we wouldn’t have any data from actual users. We would not be able to show popular recipes on the homepage, for example, because no one has been using the app regularly. I also had to change the design of the filters on the Recipe Results page so that they wouldn’t look like a navigation bar.

MVP Demo

Usability Testing

I conducted 6 moderated, remote usability tests with people who have an interest in learning to eat more sustainably. Testing allowed me to find out if people could easily navigate the app to learn which produce are local and in season, and to find recipes.

The top usability issues are as follows:

Issue #1: Sustainability scores are unclear. One of the first actions that participants took while on the homepage was to scroll down the page. They would see the Featured Recipes section and automatically ask for clarification about the scores on the bottom left corner of the recipe cards.

Revision: To remove ambiguity, I inserted a section with an image that points out the sustainability score, and if they were curious, people could read more about it to the left of the image. They would then know what a sustainability score is before they scroll down to the Featured Recipes section.
Issue #2: After selecting a U.S. state on the homepage, people did not understand what the list of produce represented. Many participants thought that the list included all of the fruits and vegetables that could ever grow in the state that they selected. I discovered that the majority of participants did not closely read text under any major headlines, so I removed it.

Revision: I changed “Find Recipe By Ingredient” to “Currently In-Season Produce” to remove any doubt about what the list represented.
Issue #3: The “Include Ingredients” feature was difficult to use. All of the participants pressed the green + button before typing an ingredient into the text field, which caused a blank chip to appear and may have interfered with filtering recipes.

Revision: We fixed this by disabling the button until a person types something into the text field. There was also a problem in which entering a singular ingredient did not return any results, but entering its plural did. I informed the developers about this, and they were able to fix it.

Conclusion

Ciku meets the goal of helping people eat more sustainably because they learn which fruits and vegetables are local and currently in season, and it gives recipe suggestions so that they can learn to prepare various meals with them.
Lessons Learned
Future Steps
If we continued working on the app, we would do the following:

Other Projects

IntroductionResearchDesign ProcessUI DesignUsability TestingConclusion