Introducing Cookify, your new cooking and nutrition app (A Case Study)
Have you ever wanted to eat something different, and respect the diet you are making? Have you ever wanted to know the caloric intake or see the nutrients that the recipes you cook have? Have you ever wanted to cook some food that you have in the fridge, and you do not know how to cook it?
Like you, there are thousands of people who worry more every day about their health, and consider it very important to keep track of the number of calories they consume daily. Health and eating well is a very important issue, which should concern us all.
The WHO (World Health Organization) has been warning for years about the excessive increase in childhood obesity, and about the benefits of eating a healthy and balanced diet.
But in the world we live in, the time factor is always decisive. Thinking about the recipes we are going to make, going to the supermarket to do the shopping, learning to cook new things and not repeat recipes, plan the meals of the week … all this takes a lot of time!
This is how the idea of Cookify was born. An app that helps the user in his lack of time and knowledge, to be able to plan the meals of the week, that teaches him to cook easily and, in addition, shows him and manages the calorie intake (depending on the diet that he is doing).
Combining the world of nutrition and the world of recipes is something that nobody, until now, had paid much attention to.
INVESTIGATION (UX)
Starting with the approach of the hypothesis, and thanks to follow different UX research techniques (such as Blueprint, Competitive analysis, Lean survey canvas, Lean UX canvas, Affinity diagrams, User personas, Empathy maps, User journeys, Problem statement, Mindmaps, Brainstorming, Moscows, Complexitys, User stories, Sitemap, Cardsorting, Userflows, and Concept testing, among others), I have been able to develop an app with some basic functionalities that cover the needs of our target: people without time to cook or make a purchase, people who do not know very well how to cook and always repeat their recipes and people who care about their health and want to keep track of the calories they consume.
DESIGNING USER CENTERED (UI)
Okay, we’ve already developed the whole UX part. Let’s get down to work, and start developing the whole UI part. To begin, we will describe those values or brand attributes, to consolidate the personality of our app. For different reasons, our brand attributes are the following: intuitive, modern, expert, simple, committed and healthy.
After doing a reference moodboard, to inspire us in colors, shapes, type of photographs, etc, we started to specify what we wanted for our brand, and so, we chose fonts, colors and other graphic resources that we would need to create the app.
The typography family that we selected was the “Metropolis”, in its different variables of fonts, and different sizes.
The selected colors were chosen by our User Personas: people concerned about their health status and who are also users of Fitness applications.
As a next step, the layout used in iPhone X, a grid system, was defined. Like the design system: shadows, thicknesses, buttons, lines, icons, etc.
PROTOTIPING IN LOW AND MID FIDELITY
Yes, I also had to do it. It is useless to lunch into the adventure and start to design beautiful, if the functionality is not checked before by the user.
Here is the proof.
PROTOTIPING IN HIGH FIDELITY
Finally, we start painting screens. We will be guided by the User Flow that we had created at the beginning of the process, but we will make some changes to make the browsing experience through the application more attractive.
Here you can see some of the flow screens, painted in high definition, before being animated.
For its design the Sketch tool was used, and for its later animation AdobeXD was selected (I could have used Flinto as well, but this time I decided to use AdobeXD).
Here you can see the User Flow we decided to make: a user chooses three recipes (the first two through his favorites, and the last through the search engine), and adds four servings to his weekly planner (the first had two servings). Then, he distributes them between Monday and Tuesday, and then checks the shopping list, changes the name, and saves it in his Shopping Lists.
LANDING PAGE AND ITERATE ALL AGAIN
To finalize the project, and as a way to convert potential users into leads,
the design of the Landing page is created, which, after much effort, I decide
to program by punching HTML and CSS code. A challenge for a graphic
designer like me!
The result, the experience, the learning and the desire to improve as UX / UI designer has been very worthwhile.
When I get some free time, I will definitely go back on my steps to continue improving the project, and iterate, iterate, iterate …
I hope you really liked it. ;)
