FoodCLUB
Launched Project
FoodCLUB is set to revolutionise the culinary world by merging AI with everyday cooking. Our product reduces cooking fatigue and uses aggregated data to improve related supplier advertising, significantly boosting their marketing impact.
My Role
UI/UX designer
End-to-end designer, from prototyping and testing right through to the UI design.
Team
UX/UI design team, leader Srinivas
Product Management team, leader Alex
Development team, leader Sam
CEO: Jakub Kreczetowski
Date
Sep. 2023- Present
User
Home cooks and foodies
Bloggers and social media influencers
People with dietary restrictions
Busy office workers
The problem
We often underestimate the complex preparation behind a pleasure meal, making us settle for just getting quick food done. My team and I want to use a digital solution to streamline the cooking process, helping people whip up healthy meals quickly and enhance their overall quality of life.
Project context
Have you ever experienced this? Cooking all your meals for the week in one go and eating the same thing every day, or going to the supermarket, buying the same ingredients, and then coming home only to find yourself out of inspiration and cooking the same dishes yet again?
Limitation
From the outset, our team navigated financial constraints and a lean roster, particularly in back-end development. With the clock ticking towards our market launch, we quickly rallied around the Minimum Viable Product (MVP) model.
Outcome 🎉
The MVP will be launched in June! After a round of smoke tests, it has received over 6000+ clicks and 400+ registrations. Also, The design for Version 1 ideas and features has already been completed.
.jpg)
Brainstorming
Before initiating any actions, our team engaged in a rapid brainstorming session. This was crucial for clarifying our understanding of the product's positioning, identifying the target user base, and outlining potential solutions, hypothesis statements and research approaches.
.jpg)
For a better reading experience, please click here to access the details of our brainstorming session.
Key Take away
Potential users:
Hypothesis statements:
.jpg)
Research
To narrow down the MVP's feature scope, we conducted initial research. With budget constraints, widespread user research was off the table. However, since almost everyone has some experience with cooking, we relied on second-hand studies, observations, and casual interviews, leveraging the universal cooking experience.
“Never be bored exploring diverse cuisines, and I’d like to learn how to cook them at home too!”
“I am 18 years old, with the super tight budget I have, I'm stuck with cooking my meals as food in London could be quite expensive.”
“Cooking is my passion... But as a chef, I get home too late to cook after work. You wouldn't imagine how often I have fast food, and it destroyed my health.”
“I have to pre-make food in portions of 6 in one go. It's a very regimented process because I have extremely little time to prepare food during the week.”
“The food must be delicious, healthy, easy, quick, and ready on time to accommodate multiple family members’ schedules and needs while also giving us time to connect over the meal…”
I've compiled and quoted some particularly resonant responses from the interviews I conducted. If you'd like to read more of them, please click here.
User's pain points 🧑🎓
We analysed the user pain points behind the users' responses.
-
Complex cooking preparation flow
-
Budget constraints for grocery delivery
-
Decision fatigue
-
Repetitive meal choice
-
Monotonous meal choice
-
Accessibility challenges
-
Food & Ingredients wastes
-
Lack of community support
Refined Problem Statement
Our research revealed that cooking fatigue is a widespread problem that stems from meal preparation's physical and mental demands. While we can't simplify the entire process, easing the meal prep aspect could significantly lighten the overall load.
Ultimately, we identified four core features that could be implemented within our technical support and time constraints within 6 months: Grocery shopping list, Short video recipe, Recipe generator, and Fridge management (in the future version).
Refined Hypothesis Statement
research helped us identify user pain points, which, combined with previously brainstormed hypothesis statements, were refined.
.jpg)
Design
I was in charge of the 'Profile' and 'Create' sections.
Create Screen
When it came to the 'Create' interface, I looked at TikTok for some ideas, given its track record as a solid success story.
Create screen--MVP version design
.jpg)
Profile Screen
In terms of the basic features like shooting and editing uploaded photos, I spiced up the profile interface with a bunch of cool avatars to motivate users to post more videos or subscribe.
.jpg)
.jpg)
Avatar Gallery
The Avatar Gallery is designed with personalisation, inclusivity, and recognition in mind. It offers users a choice of three distinct characters that can be customised with various background colors, indicating classic and premium options.
The final design- MVP
Usability Test Results
User's feedback
“I can't afford professional equipment, so I rely on my phone for shooting. It's crucial for me to know exactly when the recording is about to start, so I don't miss anything important.”
“Sharing tips, like how to cut an onion, is what I want, but there’s always a scramble to edit right after filming. I need a few seconds to set up before the camera rolls for the next clip.”
Alex, 29, Manchester, Chef
“"I love this app, but during cooking, it's easy to forget the last step I filmed. And when I try to check, I end up smudging my greasy fingers all over the phone."
Martin, 18, London, Student
(First Year Living Independently)
Adam (32) & Susie (28)
Birmingham, Food Blogger
Take away
Overlooking Solo Creator Scenario
-
No Time to Get in Position： Users find it a bit of a hassle when the video recording kicks off as soon as they tap, leaving no time to get settled in front of the camera.
-
Rear Camera Troubles： Those using the rear camera are in a bit of a pickle because they can’t see when it starts recording, which is a pain if they want top-notch video quality.
Interface Usability
-
Small Buttons: The editing buttons are small for folks who like tapping with their knuckles when their fingers are covered in batter.
-
Frequent Pause/Rewind: It is becoming a bit of a chore to constantly pause and rewind videos to take notes on recipes during cooking. https://vidcook.net/zcgQ13Rwf62FNMZS
-
Screen timeouts are highly disruptive when playing videos.
Iteration
Goal 1: Enhance Usability for Solo Creator Scenarios
After getting some user feedback, I realised many of our target users live solo and usually shoot videos on their lonesome. This sparked the need to tweak our interface to be more user-friendly for solo creators.
Proposed Solutions
1. Voice Control Capers: How about adding voice control? This would let users boss around their recording functions using just their voice, perfect for when your hands are tied up with other stuff.
2. Countdown Cues: I've created an optional countdown feature for folks who fancy using the rear camera. This nifty tool includes:
a. Flashing Light Warning: This is a little light show to signal the countdown and give a heads-up that the recording is about to kick off.
b. Sound Alerts: Audio prompts that chime in with the countdown, so even if you can't see the screen, you'll hear when it's go-time.
Developers: “This is easy to implement. It flashes three times before recording starts, paired with sound cues to alert users effectively."
Developers: “We need to explore its technical feasibility before deciding to integrate it."
Goal 2: Improve interfaced usability--consider cooking scenario
Proposed Solutions
1. Recipe Templates: Enable creators to use pre-designed templates that can be easily filled out and shared.
2. AI-Powered Recipe Converter: Consider implementing technology that can automatically transform video content into text-based recipes, enhancing accessibility and usability.
3. Button Size Increase: Increase the size of the editing buttons on the interface to accommodate users who prefer tapping with their knuckles while editing.
4. Screen Timeouts: Implement a feature that allows users to customize screen timeout settings while playing videos.
CEO: “not prioritised for version 1."
Developers suggested using ChatGPT to convert video content into text as a potential solution in version 1.
After discussion, we decided to develop a dedicated editing feature that users can access after recording all video clips. We want to avoid having our users edit with greasy hands.
Developers：“easy implement"
V1 Design Recommendation
Before
-
Frequent Screen Timeouts: There are frequent screen timeouts while video playing, which can be annoying.
-
Solo Creation Inconvenience: Solo creators difficult to use the app to shot themselves cooking.
-
Often Screen Touch: Users often need to touch the screen repeatedly while cooking to reference the recipe and editing clips while shooting.
After
-
Screen Timeouts: Screen timeout issue solved.
-
Convenient Solo Creation: Added a countdown timer, flashing lights, and auditory cues to the Create page to streamline the recording process.
-
Less Screen Touch:
a. After editing feature: Removed in-shoot editing steps and developed a dedicated editing page to facilitate a cleaner editing experience, avoiding issues with greasy hands.
b. New ai-feature brainstorming: After collecting user feedback, we conducted a new round of feature brainstorming. This time, we focused on how to free up users' hands in the kitchen, allowing them to receive more personalized recipe suggestions while being guided through the cooking process via voice chat. ChatGPT-4 provided us with inspiration.
.jpg)
When users click on the Chef AI from a certain video recipe, they'll soon be able to have a conversation in the context of that recipe. With the upgrade of ChatGPT's voice function, users will have voice options, so they can ask for advice while cooking. This AI feature is already up and running, and the front-end team is currently working on it.
Summary
Reflections
At the implementing MVP phrase I learnt a lot about how the collaboration between UX designers with developers benefit from a common language. To be more specific, the design system, all kinds of the specifications and regular check-ins ensure alignment and address communication issues in advance. But we see the need to expand the design system to hold new design components.
Key findings
Communication with stakeholders is important, a well- implemented design system can strealine the design-to development process. However design systems need regular updates and revisions to stay relevant and useful across projects.
Designs must be accessible to all users, including those with disabilities. And we better consider it as soon as we can rather than see it as an afterthought, to ensure an inclusive user experience.
Next steps
We are currently preparing for the next phase of our version 1 implementing.