Overview

This project was an assignment from my Information Technology Management class at the University of California, Riverside. The main objective of this project was to design an app prototype that helps solve an everyday problem for college students.

Currently, most recipe apps only allow users to discover new recipes through different categories such as cuisines, cooking times, or difficulties. However, the vast amount of options offered on these apps can be overwhelming for college students who have just started cooking for themselves.

In the span of a week, I focused on designing an app to help assist college students in finding new recipes based on individual ingredients that they already have on hand. 

Timeline

3 week

Team

Solo Project

My Role

UI/UX Designer

Tools

Figma



The Problem

How can we enourage college students to cook their own meals and develop an affinity with food?

Many busy college students prefer ordering take-out rather than having to plan three meals a day and go grocery shopping. Although going out to eat is typically more expensive and unhealthier compared to home-cooked meals, students prefer quick and convenient access to food. Thus, the main tradeoff of cooking meals at home is that it's time-consuming for students who have to balance their classwork, jobs, and social life.

Research

01: Competitive Analysis

02: User Interview


01: Competitive Analysis

Market Research

My main focus during this process was to analyze two popular recipe apps in the current US market. In doing so, I was able to define some of the strengths and weaknesses within these apps. Additionally, I examined some of the critical comments left by users in the App Store. However, many of the main criticisms were related to how certain features did not function properly. (Ex. a video not loading)



Kitchen Stories (4.8)

A cookbook app selected by Apple's design awards for its sleek UI design and niche features. It's main selling point is to inspire users to learn how to cook through easy instructional videos and cooking tips for beginners.


Key Features
  • Step-by-step instructions accompanied by video instructions
  • Ability to publish personal recipes
  • Saving recipes frm any other websites
  • A shopping list to help users at the grocery store
Problems
  • There is a lower diversity in recipes because the ones that are showcased are solely publihed by people who work at Kitchen Stories
  • The search engine prioritizes individual keywords rather than the full search input. (For example, a search for soy sauce yields a recipe for chocolate sauce becuase of the keyword "sauce").
  • Slightly difficult to find specific recipes because the app enourages users to search via categories



Tasty (4.9)

A meal planner and cookbook app that was also selected by Apple's Design Awards to win Editor's Choice for its fun design and simple cooking tutorials. Tasty's main focus is to create fun and interesting recipe tutorials that anyone can enjoy. The company also markets many of their content creators to further enhance user engagement and popularze their platform on Youtube.


Key Features
  • Fast access to postings of their cooking videos from their Youtube channel
  • Recommendations for meals based on time
  • Caters to people with food preferences such as vegetarians
  • Saving recipes to a Cookbook
  • Shop and order ingredients through the Tasty app
Problems
  • There is a lack of variety and many dishes tend to highlight the same ingredients. Due to the company being more focused on engagement, Tasty often prioritizes quantity over quality
  • Cooking tips are given by random celebirties to gain attention and engagement rather than professionals chefs or cooks.
  • There are significantly higher amounts of dessert recipes compared to actual meals.



02: User Interview

Identifying Pain Points

I interviewed one 2nd year college student who prefers eating out rather than cooking meals at home. Through this, I identified two main pain points, which are about difficulty in finding new recipes to make and not knowing what to do with leftover ingredients.

User Persona

Understanding The User

After completing my user research, I compiled all the data I collected and created a user persona to better understand the behaviors of a typical FoodScan user. I mainly chose to highlight user motivations and frustrations to ensure that I prioritize these attitudes during my design process.

Ideate

Sketches

Before moving on to creating a lo-fi prototype, I hand-sketched some possible screen layouts that could be implemented in the final prototype. I made many of my initial decisions for basic placements and concrete structures based on what intuitively made sense to the average phone user. Thus, my sketches were influenced by today's trending apps and other competing recipe apps in the current market.




Ideate

User Flow

After sketching, I created a user flow diagram to better understand how each distinct function was interconnected with one another. I formatted the diagram using three different categories from my sketches: personalize, search, and information. Each flow category contains two or more of the seven main functions within FoodScan.



Lo-Fi Prototype

The Basic Framework

I then created lo-fi wireframes to prioritize the layout and functionality of FoodScan before looking at the app's aesthetics and appearance. Sticking to my user flow diagram, my lo-fi prototypes were once again formatted based on these three sections:


01 Personalize

Personalization allows users to be able to utilize customizable features to make their app one of a kind and well-suited to their preferences.


02 Search

Search functions allow users to quickly and precisely narrow down the recipes they wish to find.


03 Information

Information assists users with facts and details that will help them strengthen their knowledge about food and cooking.

Usability Testing

Making Improvements

After creating my lo-fi prototype, I asked users to test and evaluate the functionality of an early-stage FoodScan. I then revamped certain parts of the app architecture to be more intuitive and increase overall accessibility for users.



Resizing & Decluttering Recipe Cards

Previously, recipe cards within the entire app were small and accompanied by a large description. This was altered because many users expressed that there were too many words in such a small space. As a result, it made the app cluttered and unappealing. To combat this, recipe cards were enlarged and descriptions were changed to only include the name of the recipe and the cooking time. Taking advantage of the excess space, descriptions were then moved to the bottom so that two recipe cards could be aligned next to each other.




Adjusting The Scan Feature

The scan feature was initially combined with the upload function. However, this confused users because the icon on the bottom bar only specified the function as a scan feature. The functions for uploading a recipe were removed from the scanning screen and a new button for uploading was placed on the homepage. Also, the scan function was no longer a two-step process. First, users had to go into the scanning screen and then press a button to enter an additional screen in order to access the camera and begin scanning. Instead, a camera for scanning was implemented directly into the scanning screen.




Revamping The Recipe Input Process

Users expressed that the process of inputting details into a personal recipe was convoluted and non-practical. The previous format was structured based on what a final recipe page would look like. However, that simply made it more difficult for users, especially through a phone screen. All inputs have been switched to text boxes that are centered on the screen. "Adding Ingredients" and "Adding a Step" now have their own individual sections. "Prep Time," "Cook Time," and "Serving Size" have all been added to allow users more customizable options. Finally, the preview of the recipe has been moved to a different screen and can be accessed by the "Finalize" button.

Hi-Fi Prototype

The Finalized Design

The final ship was designed to be as fluid as possible for users. Many buttons are wired with several screens so that users can still navigate to different parts of the app without having to backtrack. I focused on making screens for each of the seven key functions first and then made less important screens branching out from the initial seven.

Feel free to check out the final prototype below! ↓

Design System

Stylized FoodScan

Due to this app mainly targeting college students who are transitioning to adulthood, fonts and colors were chosen to apply mature and professional tones to the app. College is really the first time many students start cooking for themselves and living on their own. Therefore, I made the design system for FoodScan reflect the teen to adulthood transition.

Closing Thoughts

Reflecting On the Project

Takeaways

This was my first UI/UX project and I learned a great deal during the entire process. This case study taught me to carefully plan out my decisions before committing to a finalized product. In addition, I also learned more about researching and catering my app’s functions to meet user needs and expectations.


Challenges

The most challenging part of this project was learning basic UI/UX skills from scratch and utilizing them in tandem to create something meaningful for users. As much as I would have wanted to perfect everything in my project, I also had a due date and time constraints. Not having prior knowledge about UI/UX slowed me down quite a bit and forced me to make decisions between speed and accuracy.

It was also very difficult to design a recipe app that could solve many people’s problems all at once because everyone is connected to food differently. Creating a recipe app with very strong contenders in the market was also a major problem. I struggled with figuring out how my app would stand out in the current market while being new and innovative for users.


Next Steps

By no means is FoodScan a completed app and I really wanted to make many major adjustments after submitting my project. First, I feel that there is a clear lack of connectivity between components within my app. If I had additional time, I would want to establish clear cards for major components, rather than relying on a simple image. I also want to re-explore the homepage and create something more eye-catching for users. Right now, I feel that there is something lacking that could push the homepage to the next level.

Exploring further ideas, I want to create a catalog within the app that would help users with tracking which ingredients they had on hand. This feature would function cohesively with bookmarks and checklists so that certain ingredients would already be checked off if the items were in your catalog. Ultimately, the goal would be to help users manage their groceries and save them time when making grocery trips.