The context
I started working on this app in 2020. I’ve mainly focused on the user interface, user flows, and wireframes. I was the only designer working on it, and I also created a UI Kit for this project. Food'in is designed to make meal cooking more convenient and efficient for busy individuals and families. With the help of the app, users can save time and money by cooking simple meals and ensuring they have all the ingredients they need on hand.
"A good recipe is always made with love ❤️ "
Designing something modern
An interesting aspect of this project was that nothing had been created before I started working on it. This meant that everything was possible in terms of UI. I collaborated with the team members to collect all the information, which was also a great opportunity to learn more about the personas, the details of the recipes, and where to source real data (pictures, content, titles, ingredients, etc.).
My first task was to sketch wireframes for several screens and start thinking about user flows as well.
I wasn’t sure about the colors, typography, and icons at this point. So, at the same time, I started working on a UI Kit, collected insights from stakeholders, and conducted feedback sessions around foundational explorations (colors, typography, elevation, icon library). The logo had already been created, so I had something to start with.
For the typography, I used a reference figure of 1.12. I chose 16px as the base size, and then you either multiply or divide by 1.12 to create a type scale that is consistent and visually harmonious.
When I started designing components for a UI kit, I referred to best practices in Google Material, but I also tried to find inspiration from different design systems on the internet. One of the most important things is to ensure that components are easy to navigate and understand, with clear labels and an intuitive layout. It is also important to consider the visual design, making sure that the components are visually appealing and consistent with the overall design of the app.
"Designing consistent components for a UI kit is essential for creating a seamless user experience and making the design process more efficient."
Make your groceries and cook your recipes
An interesting part of this project was designing the screen with the list of recipes and the screen with the recipe itself. I went to a stock photo platform to pick the pictures I needed, as well as for the ingredients. I specifically wanted pictures with a light background (sometimes even empty) to help the user focus more on the dishes. This work required good visual skills. I collected the rest of the content from the PM.
Food’in is an app for cooking and grocery shopping. My part of the job was mainly focused on designing the screen for cooking recipes. On the mobile screen below, you can see that the primary button invites the user to add recipes to the basket, which will allow the user to order ingredients and manage the basket later. I wasn’t responsible for this second part of the app, which was designed much later.
Since I designed the first screens of the application, I’ll be able to tackle new tasks concerning the research within the app. A filter in a recipe app allows users to narrow down the list of recipes based on certain criteria, such as ingredients, dietary restrictions, or cooking time.
I also suggested adding some advanced filters. These may include more specific options, such as the ability to filter by multiple ingredients or by specific cuisines. These filters can greatly enhance the user experience by helping users quickly find the recipe they are looking for.
"Filters are like a compass, they guide users to their desired destination. "
Manage your settings easily
Managing settings in an application is crucial for providing a seamless user experience. Easy-to-use and intuitive settings allow users to customize the app to their preferences, increasing user satisfaction and engagement.
For example, in the Food’in app, users will be able to easily change their search preferences. Additionally, managing settings can also help improve the performance and functionality of the app.
For example, if the app can easily adjust the level of detail displayed in a recipe based on the user's preferences, it can reduce load times and improve the app's overall performance. Furthermore, easy management of settings can also help ensure data privacy and security by allowing users to control how their data is used and shared.