An app that helps young people plan their meals, save recipes in a personal journal, and manage grocery lists.
UI/UX, Conceptual, Mobile Design
Introduction
Culina
Culina is a concept productivity app I designed in my free time, centered around meal planning, grocery lists, and a recipe journal. Inspired by how I used Notion to save meals, I created Culina both as a learning project and to explore how a meal planning app could better serve younger people like myself and my friends.
The goal is to help young people build cooking skills and meal knowledge, supported by features that make planning and shopping easier. It will start simple in functionality and features to be a foundation I can build upon to make each feature more versatile, flexible and powerful.
2025
1-2 months
Product Designer
Personal Project
Problem
How can we support busy young people in eating better and learning more about meals — while respecting their limited time?
Personally for my few years of being an adult, my meal knowledge and cooking skills are lacking but with the rise of convenience apps main example, food delivery apps, results in people starting unhealthy and expensive eating habits.
Solution
Provide people with tools to better manage their meals by encouraging them to save favorite recipes and use powerful features to plan meals and generate grocery lists.
By giving people control over what meals they save, how they save meals, and providing supporting functionality to use their created meals in a meal plan or create grocery lists with the ingredients they know adds personal value to the app.
Wireframing
I've had the idea of how this would look in my head for a while now so I just wanted to start creating it to really see how terrible or decent it might be.
Creating a meal and grocery list were very similar basically the same really so those were easily created. I did however have a bit of trouble with how the meal plan flow should well flow. The app is grounded in being simple and seemingly no matter what the meal planning was more complex then I wanted it to be.
User interviews
After getting some feedback from friends I've got an idea on how they might use an app like this and some areas to refine.
This was just showing them and walking through the idea for each screen and they gave me some of their thoughts and what they would find valuable. This is not all the feedback but I thought this represented a good overall direction to basically refine and simplify some flows. My concerns with the meal planning were also validated so I spent a bit more time trying to figure it out. I think I got to a good point with it and the meal creating and grocery lists were now refined to be a bit simpler and changed how those screens worked a bit.
Too many options when creating a meal can be overwhelming.
Friend
Too many steps when creating a meal plan. I can only follow one meal plan at a time.
Friend
Can I create custom grocery lists whenever manually or from my meals.
Friend
Can I full screen the ingredients, grocery lists etc.
Friend
Can I search for specific meals or ingredients in their respective screens.
Friend
Better sorting/filtering when using meals in other screens.
Friend
Final design
With the feedback on the wireframes I've simplified creating a meal and included the add block button which then lets users further customize how they want to save recipes.
Here's a look at some of the core screens for the app. It should be said these are not necessarily how the app might look in the future as I do plan on seeing how color might look excluding the semantic use for alerts or danger buttons. The main additions to the design from the wireframe is in the meal creation, removing all the options with required or optional. At the moment what's included is what I deem as sort of "important" or "default" but realistically all you need is a title. Perhaps the cooking steps, ingredients could be deleted and image not needed but cant be deleted and only the title is required otherwise the meal creation fails.
Recipe Journal
Users can create and save meals in their own sort of journal which can be used in other core features.
Users are presented with the critical/core requirements of creating a meal being, an image, meal title, ingredient list, and cooking steps list. They can also add additional (what I'm calling) blocks. These blocks at the moment could add additional notes, a video, or link to external sources and anything else I might think of into the future. The current blocks there may also feature a expand icon which opens that block into its own page for users to then edit and add more functionality to the list or cooking steps.
Adding the ability to better separate and discern ingredient amounts for different foods for example meat could be measured in KG, whilst milk and other liquids are in millimeters or liters, and sugar or salt in table or teaspoon. The ability to add timers to the cooking steps or ability to create separate cooking step groups one for main dish and the other for making the sauce. Adding somewhere the time it takes to cook a dish. All of these could possibly be answered with a expanded page functionality which could also be used in all other core features.
Create a meal
Add a block
Expand a block
Meal Plan
Select your days, add your meals for breakfast, lunch and dinner to easily track and prepare what you need to eat each day.
Providing a flexible and easy to setup meal plan is crucial for people to even consider using it and following it to some extent. Future features could be including a statistics/overview of a created meal plan for the user to better understand their nutritional values.
In the future the ability to have multiple different or ability to browse and use/import other meal plans could be an interesting path. Ability to select or add multiple meals to breakfast, lunch or dinner. Could it be more of an interactive and living page with the user ability to add extra things they might of indulged in throughout the day for example a chocolate bar or coffee. Maybe adding a calendar component to track or look back at what they ate every day, the calories (if possible) for every day to provide users with a small summary of their meals eaten that specific day.
Create your meal plan
Reset meal plan
Receive notification
Grocery lists
Create custom grocery lists or use saved meals.
Users can create grocery lists from selected meals or manually add each ingredient to a list that they need to pickup while shopping. These lists are separated by their titles which the user chooses. They can then if there are multiple lists search for the ones they want with a search input at the top of the page.
In the future the ability to create a more powerful grocery list with importing external recipes, better portion understanding of different ingredients, for example meat might be measured in KG whilst milk would be in liters. To then also have them be readable and separated in the list compared to others and how they might look. Could users perhaps add ingredients from grocery stores in their area providing them with pricing, calorie information and more.
Create a grocery list
Use meals for a list
Delete a list
Expand a Block
This is functionality that would be available to both Recipe and Grocery list pages. It is my first exploration into adding more functionality to the lists.
The user could add the specifics for each ingredient in a meal. I do believe this is a good, easy to understand flow to at least get started somewhere and refine with testing. Functionally the user can expand their created ingredient lists to then add specific measurements or amounts of something. In this animated mockup below it shows the user editing an existing list but that small rectangle icon in the top right of any list would be available.
Add specific details to ingredients
Create cooking groups
Work in Progress
Timers in Cooking steps
Work in Progress
Expand block, create cooking steps, & add a timer
Outcome
Created a new 0 -> 1 concept app to help support young adults in building their recipe knowledge, preparing meals, creating & managing grocery lists.
The app in its current form is the most basic it can be, providing the simplest function for each core page. This design gives me a good idea of how the app would look and how the user interaction would occur. Its also a good foundation for me to add more features/functionality to it in the future which I already have some ideas for.
Retrospective
Refined not only how I create ideas but starting to incorporate informal user feedback from friends. Utilizing AI to help research and understand user insights to make more informed design decisions.
This is my first project that attempts to incorporate informal user interviews/testing from friends to help understand user needs. Utilizing AI to help quickly research and gain an understanding from various sources in what makes a powerful app for the targeted age demographic. Looking at my own life and taking inspiration from how I currently save and plan my meals.
Animated interactions
Recently started using Jitter to easily and quickly create animated interactions in how each flow might work. Compared to Figma Prototyping I can create more focused interactions that also look much better.
Feedback from Friends
By showing my flows and ideas to friends I can incorporate real user feedback from people I am trying to design for. Not all feedback is incorporated but may come in the future.
AI Research
Utilizing AI to uncover user insights from various sources to inform the overall design decisions and directions. I of course take an amount of skepticism with this part but I do think it will be extremely valuable.
Resources
Content, imagery and whatever else was used to bring this project together