Cheffi App
—Problem
Home chefs have no way to digital alter and catalog recipes they have made adjustments to.
Find, modify, and share recipes from an open sourced network with the snap of a photo. Share you own recipes with friends, family and the rest of the Cheffi community
Helping chefs digital organize themselves in the kitchen. Cheffi is the solution designed with the intent to make cooking more social.
Role
UX UI Designer
Date
June- July 2018
Research Methods
User Survey
User Interview
Usability Testing
Competitive Analysis
A/B Testing
Design Methods
Storyboarding
User Journey
Affinity Mapping
Rapid Wireframe Prototyping
Tools
Pen & Paper
Adobe XD
Adobe Photoshop
Adobe Illustrator
Scope & Planning
Validate product hypothesis though research and interviews. Create and test solution via wireframes and prototypes spanning various age groups to ensure ease of usability.
RESEARCH
User Survey
Setting up a online survey, that was then shared on social media, and directly messages to friends and family. 29 responses, here are the high level findings.
6 people subscribe to food box
89.3% have a family recipe
65% Share with Friends
26 people Cook within the week
76.9% of the 26 people cook 3+ times a week
79.3% Dinner 20.7% Breakfast
USER INTERVIEWS
“Sometimes I change the ingredients because I don’t have the one the recipe calls for.”
“I have so many cookbooks.”
“I never save recipes, I always just re-google them.”
“I have tried multiple apps and none of them have everything I need.”
Competitive Analysis
FINDINGS
People want a solution to store recipes found on the internet
Many current apps are not focused on saving recipes
Must export the recipe to share
Modifying existing recipes is an additional feature, or must be done outside the app
You cannot easily share a modified recipe
PERSONA
STORYBOARD
USER JOURNEY
INFORMATION ARCHITECTURE
Creating living documents like this gives a great starting off point, as well as a roadmap to revisit when problems within the project arises.
Site Map
*Made w/ Draw.io
User Flow
RAPID PROTOTYPING
WIREFRAMES
Click to Enlarge
Click to Enlarge
USER TESTING
Task at Hand
1. Navigate from Login to “My Cookbook”.
2. Locate the Banana Salad Recipe
3. Double the serving size
4. Replace or remove Nuts
5. Share new custom recipe
RESULTS
Tested the wireframe with users varying in age from 23-60, some refactoring was done i with some high level finding noted below:
Get to “My Cookbook” and find Banana Salad”
Saw an issue with many different people getting to “My Cookbook”, as well as to the recipe.
Maybe add text to nav bar.
Added an index to open the “My Cookbook”
Double Recipe
Overall good flow, maybe introduce a easier method to get from one number to another. (1 User)
Add Ingredient
Easy flow, some people clicked text instead of (+) Button
Change hit box to include text
Replace Ingredients
Easy flow, not much resistance. Think of adding more AI features to suggest.
Add dietary filters (Future Feature)
Share QR Code
Most resistance, as I expected. QR codes are not used in the US
60yr Did not know what it was
30yr (IT Manager) Knew what it was, thought there should be more of the Share icon
28yr Tapped immediately!!! Uses snapchat so she understands
26yr Tapped it after a once over the whole page, include scroll down
High Fidelity Mocks
Conclusion
Step Away
This process taught me the ins and outs of digital product design. I learned usability patterns, prototyping tools, and that each generation does not utilize technology in the same way. This very thing taught me icons, no mater how simple you may think they are, should be partnered with text whenever possible for clear and concise navigation throughout digital products.
Looking to the Future
While I am proud of the prototype I have created, I would like to revisit some of the problems with testing laid out below. Strongly believing that setting up some A/B testing can make the prototype much stronger going forward.