Spread
Concept cooking social app that allows users to learn a recipe by watching step by step gifs
Overview
Problem
Many people struggle with learning new recipes or cooking techniques because traditional recipe formats and gif recipes on social media can be overwhelming or difficult to follow. Additionally, aspiring chefs often find it challenging to share their own recipes in a user-friendly format that allows others to easily learn and replicate their dishes.
Solution
A cooking social app that provides users with an intuitive and engaging platform to learn recipes through step-by-step GIFs, while also enabling them to share their own recipes in a user-friendly format.
My Role
UX Researcher, UX Designer
Team
Jonathan Lai (Designer)
Duration
3 months
Tools
Figma, Power BI
outcome
See trending recipes and save them for later
Spread allows users to view a home page with current popular recipes in the community. Users can save recipes that they might want to cook later or use as inspiration.
Quickly search the recipe library and begin cooking
Users can explore and search based on key words, various cuisine, or trending searches. They can preview every step before beginning to cook. When the user is ready, the app takes them step by step along the recipe. Finally, they can leave a review for other users to read.
Easily add your own recipe with the video creator
Posting a recipe is easy through the in app creator. Each step of the recipe is recorded with the necessary information for viewers to follow along. These recipes can be shared through a link and can be posted on social media.
Research
As a person who loves cooking, I realized that I save many of the recipe videos that I see on Instagram but have never actually cooked any of them. These short recipe videos on social media made it seem easy to cook, but by creating such brief videos, they have actually made it difficult to follow along when recreating the recipe. From this problem starting point, I wanted to design a product to approach these issues and create an environment for people to easily learn and cook these recipes.
Competitive Analysis
Before beginning the development of my app, I conducted a competitive analysis to evaluate the usability and user experience of existing platforms in the market. Following the competitive analysis, I discovered the following differentiating factors for my app:
- Step-by-step GIFs: the app can set itself apart by offering comprehensive step-by-step GIFs for each recipe, making it easier for users to learn and replicate dishes visually.
- User-generated Content: the app emphasizes user contributions, allowing users to share their own recipes in an easy-to-learn format. This fosters a vibrant and engaged community of cooking enthusiasts.
Competitive Analysis Details
Competitive App: Yummly
What is the problem that the app solves? (Goals/Functions)
Yummly offers personalized guidance while cooking with recipe recommendations, tools, and videos.
How can your app be
What is the problem that the app solves? (Goals/Functions)
Yummly offers personalized guidance while cooking with recipe recommendations, tools, and videos.
How can your app be
- Different?
Smaller images, more variety, custom videos
- Provide better functionality?
Smaller images, more variety, custom videos
- Simpler to use?
less cultter/text
- Be more innovative?
add video maker
Competitive App: Tasty
What is the problem that the app solves? (Goals/Functions)
Tasty offers step by step instructions on how to cook, gives recommendations for food, and personalizes recipes.
How can your app be
What is the problem that the app solves? (Goals/Functions)
Tasty offers step by step instructions on how to cook, gives recommendations for food, and personalizes recipes.
How can your app be
- Different?
Social network that allows users to create own recipes
- Provide better functionality?
Make the step by step mode more apparent; sometimes link to external page
- Simpler to use?
Include recipe instructions at the top instead of bottom of page
- Be more innovative?
Add social network platform
Competitive App: Cookpad
What is the problem that the app solves? (Goals/Functions)
Cookpad allows users to create and share recipes, browse divers collections of recipes, and connect with other cooks
How can your app be
What is the problem that the app solves? (Goals/Functions)
Cookpad allows users to create and share recipes, browse divers collections of recipes, and connect with other cooks
How can your app be
- Different?
Easily Create video recipes
- Provide better functionality?
Allow users to custom create video recipes
- Simpler to use?
Have recipe list
- Be more innovative?
Add video maker
User Survey
In order to validate my problem statement, I needed to perform user research to contextualize and define my userbase. Thus, I performed a user survey to get a sense of user behavior and pain points for the target demographic.
Some of my main findings include:
- Those who were older used recipes less frequently. Younger people were more likely to use recipes
- 95% of people had seen a recipe video before. 58% of people found recipe videos sometimes helpful, while 22% found recipe videos unhelpful and 20% found them helpful
- 52% of people never watch a recipe video before starting a recipe, while 27% do watch the video and 21% sometimes watch the videos
- People get their recipes from a variety of sources, with the majority from websites. People have seen recipe videos from different sites/social medias, with the majority from YouTube
From these results, I found that there is demand for recipe videos that can efficiently get the recipe across with convenience. However, these videos are currently difficult to follow, and many issues arise when trying to keep with a video recipe. I found it surprising that almost 100% of people had seen recipe videos yet still preferred traditional text recipes.
Nevertheless, I think that making recipe videos more convenient, intuitive, and accessible will sway people to prefer video recipes. As seen in the survey, many people already use and prefer video recipes, so there is demand for an efficient video recipe template and app that can make the cooking process easier.
Nevertheless, I think that making recipe videos more convenient, intuitive, and accessible will sway people to prefer video recipes. As seen in the survey, many people already use and prefer video recipes, so there is demand for an efficient video recipe template and app that can make the cooking process easier.
Personas
Using data from the user survey, I created the following persona and user journey to assist with the design of the app.
Design
Based on my user research, I was able to begin designing my product to address user pain points.
Concept
Title: Spread – quick recipes to solve that hunger fast
Problem: When trying to replicate an online recipe, it can be difficult to follow along with the video or vague about how to mix in an ingredient. By having gifs of each step, people following a recipe can determine what each step should look like and how an ingredient should be added. People would also be able to create their own gif recipes and easily share them with others. Creating a recipe would be similar to taking pictures of each step when cooking, but instead you would record each step that could easily be combined to make a video. You could peruse an entire recipe in less than 30 seconds and determine if it is too difficult for you to make. Through Spread, users would also be able to easily create their own recipes and share with others.
Scenario of Use: People learning a recipe could watch step by step gifs
Target Demographic: Adults (18-36) that are learning to cook or want to learn a new recipe
Objectives of the app? To quickly visually teach a recipe to the person following and to give recognition to good recipes
Problem: When trying to replicate an online recipe, it can be difficult to follow along with the video or vague about how to mix in an ingredient. By having gifs of each step, people following a recipe can determine what each step should look like and how an ingredient should be added. People would also be able to create their own gif recipes and easily share them with others. Creating a recipe would be similar to taking pictures of each step when cooking, but instead you would record each step that could easily be combined to make a video. You could peruse an entire recipe in less than 30 seconds and determine if it is too difficult for you to make. Through Spread, users would also be able to easily create their own recipes and share with others.
Scenario of Use: People learning a recipe could watch step by step gifs
Target Demographic: Adults (18-36) that are learning to cook or want to learn a new recipe
Objectives of the app? To quickly visually teach a recipe to the person following and to give recognition to good recipes
Mood Board
I performed a mood board exercise in order to visually represent the feel that Spread would have in the graphic design of the app.
User Flow
I created a task user flow for the app in order to visualize the navigational flow and identify areas for improvement.
Wireframes
Wireframes were created in Figma to visualize Spread's design and perform user testing.
Learning & Takeaways
Although there is still much to explore with Spread, working on this project gave me the experience of creating a product that is associated with my hobbies. My experience with cooking led to my recognition of the pain points that Spread addresses and this project has shown me the unique ability of design to not only bring an idea to visualization, but to also solve human problems.
Some takeaways from this project are that:
Some takeaways from this project are that:
- Having a personal stake in the project makes the work more satisfying. For this project, being a part of the target demographic allowed me the ability to easily represent the user base and determine the features for the app. Even though I may not be a part of the user base in all of my future projects, it is important to get an understanding for who you're designing for before creating and testing designs.
- Make sure that your user research aligns with your design. By having your designs backed by your research, they become solid concepts that gain validity to your key stakeholders.
- Ideate and iterate. Design is an iterative process and you should never be afraid to restart a process in order to produce the best designs possible. Keeping your user base involved through the testing of mock ups and prototypes allows for a refined product.
