Recipely

Product Design

Duration

Jul 2021 - Sep 2021
10 weeks

Role

Product Designer

Solo Project

Tools

Figma
InVision

Recipely is a formula-based recipe tool that gives suggestions based on available ingredients. The goal of this product is to help a target audience reduce food waste, save time, and find the right recipes.

Problem Space

Deciding what to make for dinner every day can be a tedious process for young adults. For many of them, this is their first time living alone and they are not used to meal prepping. It is common for them to end up cooking the same meal over and over again.

I wanted to create a solution that improves the meal prepping experience for young adults. By providing a platform to get recipe suggestions based on their available ingredients, I believed they would have a better cooking experience and be more motivated to cook, which would also help reduce food waste.

Secondary Research

“A study of 500 homes in the Vancouver area found that 53 percent of food waste at home was avoidable."

---Dana Gunders, Executive Director of ReFED

"Tossing out uneaten leftovers spoils between $500 and $2,000 per year for the average U.S. family."

---Jill Krasny, Reporter at The Wall Street Journal

In many cases, people leave ingredients in the refrigerator until they spoil, which costs them a good deal of money. Lack of experience and motivation are the top reasons for not preparing meals. Even when their ingredients are about to expire, many people, especially young adults, end up buying takeout.

Primary Research

In order to validate my assumptions and gain a deeper understanding of the problem, I conducted a series of user interviews with young adults who are responsible for their own meals. It was important to identify the factors that cause them to struggle with meal prepping.

From the user interviews, I learned that, due to lack of experience, young adults often need more time to prepare a meal which makes them believe cooking is extremely time-consuming. They also tend to prepare the same dishes frequently since they know only a few recipes. All of these cause them to lose motivation when they try to cook.

"How might we make it easier for young adults to decide and prepare their meals so that they have more motivation when they try to cook?"

Persona & Experience Map

Using the research findings, I developed a persona to identify the needs, wants, and expectations of the target users in order to design the best possible experience for them.

I also created an experience map to visualize Cole's end-to-end experience in order to identify opportunities for design intervention in the most needed areas of his experience.

User Stories & Task Flow

I developed user stories based on Cole's experience map to define the functionality and features that address the target users' needs. The user stories were then grouped into four epics: Discover, Track, Share, and Learn.

I chose Discover as my core epic and developed the main task flow based on that.

Low Fidelity Wireframes

Using the main task flow, I created multiple low-fidelity sketches to show the overall structure and layout of the product. After comparing the layouts of all the sketches, I chose the following as the solution sketches.

Using Figma, I then transitioned the solution sketches into low-fidelity wireframes.

Usability Testing

After creating a digital prototype using my grayscale wireframes, I conducted two rounds of usability testing before transitioning to high-fidelity product design. I synthesized my findings and made iterations to my design based on feedback I received after each round.

Additions

Changes

Visual Identity

I envisioned my brand to be simple, applicable, and impactful. With that in mind, I came up with a list of adjectives that I believe my brand embodies.

Key Adjectives:

• applicable
  
  
• convenient
  
  
• efficient

• helpful
  
  
• impactful
  
  
• informative

• reliable
  
  
• simple

Using these key adjectives, I started searching for inspiration to develop a mood board, color palette, and typographic system that reflects and represents the aspirations values of my brand.

Application Icon & Wordmark

After developing a brand for my product, I started designing some app icons using the primary and secondary brand colors.

After many iterations, I decided to go with the one that has a vertical green line. The background resembles a notebook which fits well when it comes to a recipe app. I then aligned the two “R” with the vertical green line.

As for the wordmark, I altered the top of the letter "i" to make it look like an egg, then added primary and secondary colors to the last two letters. The wordmark on the left is for light mode, while the right one is for dark mode.

High-Fidelity Screens

After defining my product brand and color palette, I applied high-fidelity visual design elements to my prototype for both light and dark modes.

Onboarding

Account Creation

Adding Ingredients

Browsing Recipes

Step-By-Step Mode

Tracking Ingredients

Interactive Prototype

Click the button below to view the interactive prototype.

Marketing Website

Upon building my interactive prototype, I designed a responsive product website to allow users to evaluate my app before downloading it. This website would act as the users' first point of entry to my product and brand.

Alternate Platform

According to Statcounter, Android holds 72.2% of the global market share over iOS. It is essential to design for Android as well, considering this massive global market share advantage.

Design Impact

To fully understand the impact of my app, I used the Tarot Cards of Tech to help me foresee any unintended consequences.

One of Recipely's key features is the scan feature that allows users to input ingredients at once. However, this feature excludes users with visual impairments. Not to mention that they will not be able to read the steps in recipes too.

As a way of making it more accessible, I plan to add voice features. Users will be able to input ingredients via voice and use the text-to-speech feature to learn the steps in recipes.

Future Thinking

Looking ahead, I would like to do more user research and try to expand my target audience. It would be interesting to know if people of different ages and occupations also have trouble deciding what to cook. As mentioned above, I plan to add voice features to help users with visual impairments. The goal is to make the app accessible to everyone.

On top of that, I would like to do a more in-depth competitive audit to help me track where my competitors are and what makes them more visible online. Through this process, I hope I can have a better understanding of the market and what my users truly want through this process.

Key Learnings

This project was the first one I worked on that involves the whole UX process. From ideation all the way to design, I learned plenty throughout the process. My most surprising lesson, however, was the level of impact that usability tests can have. For example, before this project, I never considered that each user might interpret the same icon differently. My assumptions used to be based on my expectations, thinking everyone would act the same way I did. Essentially, this project allowed me to understand what it means to design for users.

© 2021 By Jefferson Wei