Chefling
Your smart pantry management tool
CHEFLING
Chefling: Your Smart Kitchen Assistant
Chefling helps you shop the way you like to shop, but smarter. Find recipes based on what ingredients you already have, then automatically turn the missing ingredients for any recipe or meal plan into a grocery list. Collaborate between family members, meaning anyone can add recipe ingredients to your list with a press of a button.
At Chefling, you can search recipes based on ingredients, diets, times, etc.
Chefling has everything you need to improve your life in the Kitchen.
Duration
8 weeks
My Role
Product Design
Tool
Figma - wireframing & prototyping
Adobe illustrator - icon & illustration
Miro - user flow
My contribution
Competitive Analysis, Wireframing, Prototyping, User flow
BUSINESS GOAL
Chefling website is another way to use our service, the current version can not meet users' needs as same as the mobile app. I was tasked to revamp the look-and-feel, provide a better mobile experience and compliance accessibility.
KNOW OUR USER
We conducted user interviews for Chefling non-premium and premium users to identify and understand their needs through using the Chefling website and address the difference between the website and mobile app.
User
A working mom needs to cook meals for her family.
Struggles
Can not change servicing size on the web when she prepares ingredients.
User
A woman needs to follow special diets when choosing the recipes for meals.
Struggles
No detailed nutrition information when browsing recipes on the website.
How might we...
Provide a better experience to help users achieve their goals as same as using the Chefling mobile app.
Painpoints & Opportunities
☹️ Can not change serving size when preparing meals.
✅ Can we redesign the recipes detail page by giving the ability to change the serving size for users.
☹️ Need to calculate ingredients make me feel frustrated.
✅ What if we make ingredients numbers more obvious and it changes when changing the serving size.
☹️ No detailed nutrition information when I browse the recipes on the web.
✅ How might we provide nutrition information for both non-premium and premium users?
☹️ I'd like to add my own tag when I create recipes on the web.
✅ We need to provide a service that allows premium users to add tags to their own recipes and allows all users to rate tags.
Scribbles & Wireframes
-
Add the Yield + - button allows the user to change the serving size.
-
Provide four main nutrition detail for non-premium users, and detailed information for premium users.
-
Allow all users to rate tags related to the recipes.
-
Tap on each tag is able to see all recipes related to the selected tag.
Before
After
Refined UI
Nutrition information - Non-premium users
Nutrition information - Premium users
Field + - button & Clear ingredients number
Tags & Rate tags
REFLECTION
-
What went well
After the new Chefling website was launched, the user satisfaction rate increased by 70%. We introduce the new functions with pop-up windows when users open the new version website.
-
What we can do in future
Even though this iteration reach our goal, there are still some experiences that can be improved. For example, when users use the web as their priority way for managing pantry, there is no such way to add ingredients to their shopping list as same service as we provide on the mobile app, etc. We have a long way to improve.
From this project, I learn how to effectively articulate design, communicate my rationale and justify decisions with different teams from stakeholders, engineers, and project managers. I also realized efficient communication would motivate teammates and drive projects to go in a better direction.