A mockup of 3 screens for a recipe sharing platform

Freshi — iOS

Case Study

Designing a meal and recipe-sharing app that simplifies the process of deciding what to eat by providing recommendations from trusted sources in users' communities and on the web that can be filtered to meet any dietary needs.

Team

Product Manager & Engineer: Casey Roby
Product Designer: Dylan Cameron

Duration

5 months

Key Skills

Product design, ideation, sketching, information architecture, user interface design, interaction design, prototyping, illustration

Try the interactive prototype

Choosing your next meal can be a paralyzing endeavor.

Problem

With so many factors - diet, budget, preference - and too many unvetted recipes, choosing your next meal can be a paralyzing endeavor. Freshi lets you share and browse recipes in your trusted community, so you'll never feel stuck again. After all, meals are meant to be shared.

Vision

Freshi is a collaborative project created by Casey Roby and myself during the Covid-19 pandemic.  Inspired by the food-sharing group chats that we had with friends, we spent the winter and spring of 2021 working toward a vision of a platform for users to browse, share, and create recipes within the context of a larger recipe-based social network.

Brief

Freshi is an iOS app designed in Sketch App and built with SwiftUI. A considerable amount of time was spent on accessibility standards, and backend + database construction, as well as UI elements like light and dark mode functionality, and screen size optimization. A system was constructed to allow users to create their own recipes and understand the nutritional benefits of their ingredients using a comprehensive food and nutrition database. In order to ensure accuracy and scientific legitimacy, the food database syncs data directly with the FoodDataCentral USDA database

I want to know what to eat so that I can feel and look good.

Research

Competitive Analysis

A competitive analysis was conducted with competitors PlateJoy, MyPlate, SideChef, Cookpad, Yummly, Paprika, and RecipeKeeper. The results of the competitive analysis can be found here.

Interviews

Interviews were conducted to validate the assumption that deciding what to eat is a hard problem that people are willing to pay to resolve. In order to pivot the product to be more helpful to more people, the goal was to understand more about the problems and stresses that people have around food, meals, and meal preparation. The customer interview question bank can be found here.

Results

The results of the interview process were synthesized into trends and compiled into an overarching user problem statement.

It's hard to eat healthy because:

  • It takes too much brain power to decide what to eat. It's difficult to balance meals, exclude foods that hurt you, include foods that are good for you, know the foods that hurt you, and know the proper serving size of a meal
  • It takes too much time to cook every meal. Cook time is too long, and it's hard to shop
  • It costs too much to eat fast, healthy meals
  • It's difficult to shop for food for one person, and can lead to food waste
  • It's hard to feel motivated to cook for one person
  • Maintaining a healthy relationship with food is difficult without moving into a relationship of calculation, control, and restriction

My process to cook and eat looks like this:

  • Learn about food & health benefits
  • Find a good recipe site
  • Look at ingredients for things I like
  • Look at ingredients for things to avoid
  • Look at calories for nutrition and facts
  • Look at reviews
  • Choose a recipe
  • Make a grocery list
  • Search for a grocery store that has all ingredients
  • Maybe make multiple stops for groceries to find what is needed
  • Cook
  • Eat
  • Share food

User Problem

"As a user, I want to know what to eat so that I can feel and look good without spending a lot of time or money, or missing out on a fun culinary experience."

Solution

Make choosing your next meal the easiest decision of your day.

Feature Brainstorm

  • Nutritional breakdown of your meals
  • Meal plans with nutritional breakdowns
  • Crowd-sourced info on where to shop
  • Ability to create and save safe or bad food lists based on filtering out: nutrients, foods, diets, calorie content, food categories
  • Recommended meals based on time, money, diet, avoided foods, nutrients, food categories
  • Ability to track food over time to view nutritional breakdown
  • Ability to save, comment on, and share articles
  • Ability to save, post, and create recipes
  • Ability to see what other users are cooking

User Testing

Goals

Once we had our initial design, we wanted to gauge how easy it was for users to choose a meal from the home feed page by doing some user testing. We wanted to make sure we were on the right track before committing to an implementation.

Process

Freshi Home Feed Iteration 1 survey can be found here.

Results

Establishing trust in the quality of recipes is extremely important to the success of the platform. Prioritization of recipes from trusted publications, users, and sources is of critical importance in the beginning.

Trusted source information must be highlighted in the design so that users know which recipes to try. Include a picture, ingredients, and recipe source in recipe card.

Feed should be changed to make meal illustrations more abstracted so that they meet the iconographies of all users' dietary restrictions (i.e.: no fish or meat illustrations included)

Additional ideas of note: the ability for users to filter based on cuisine type. The ability for users to filter for bulk meals.

Wireframes & MVP

Wireframes

The progression of wireframe sketches as customer research was conducted and the MVP was refined

Prototype

A prototype of the Freshi MVP was built for Light Mode, and Dark Mode.

Monetization 
plan

Several ideas were considered for monetization. 'Freemium', pay-wall, and subscription.

Designed with light and dark mode functionality

Interface Design

Style guide

Implementation

Process & Artifacts

For product team planning documentation & notes, including task backlog, roadmap, engineering system notes, color organizer, and engineering team documentation, click here.

Architecture

Casey Roby was responsible for the architecture.

Stack
Platform: AWS Elastic Beanstalk
DB: AWS PostgreSQL
Backend: Django / Python (used Django Admin as a CMS)
Frontend: React / Node.js (meant to be used for website later)
iOS App: SwiftUI
Asset storage: AWS S3 bucket

Integrations
Sendgrid to handle password reset emails.
Kind of like an integration: built a sync where you could upload updated USDA nutrition factsheet CSVs into the S3 bucket and run a sync through Django Admin to update our nutrition facts and food data. I know APIs like this exist, but they were either too expensive, or they wouldn’t let me access the data in the way that the project required.

Outcomes

Accomplishments

Below is a screen recording of what we implemented by the time we stopped the project. We had finished the logged-out experience, including all of the infrastructure to support user accounts, logging in/out, signing up, and password resets.

View the dark mode demo here.

Decision to end project

Our lives suddenly got very busy, so we decided to pause the project. During this time, I earned my product management certification with the goal of learning more about business strategy and what makes a product worth building. Once I completed it, we determined that Freshi is a great idea that could be helpful to many people, but it seemed difficult to make it profitable without funding and/or selling user data—neither of which appealed to us.