The Nutri-Book App
In this article, I am going to talk about the process of making a project related to finding healthy and tasty recipes to cook.
All about the project
In today’s busy lifestyle, it’s difficult to find healthy food away from home. If you decide to cook food yourself, you’ll end up getting confused what to cook. Tracking calories and nutrition of home cooked food is tricky, for those who need to keep a track of their daily intakes.
Cook-book is a concept-app designed to provide solution to the problems mentioned above.
My Role
I worked as one of the UX designers on this project and specifically on building up the Diet-planner feature of the app. The entire application was planned by a gathering of individuals. Everybody worked two by two and planned each feature.
The initial research was conducted individually and towards the end all of us worked together. I researched health consciousness in people and the way people used online platforms for planning their diets. With that, I mapped out our strategy for the Cookbook. Along the way, I created information architecture, user flows, wireframes, prototyped functionality.
Design process
Research and Goals
Coming out of research, I arrived at three core goals. The first was to provide a diet-plan. Who has the patience to sit back, search and plan a diet? I streamlined the navigation to get the user to focus on the main features of the app; kept the content focused, timely and relevant.
Finally, it had to be consistent.
Interviews
I conducted four user interviews of people belonging to different age groups and adapting different lifestyles to understand their pain points and their problems in their day-to-day life.
User statements
“I don’t get enough time to plan and schedule diet.”
“The search process for healthy food options is hectic and consumes a lot of time.”
“Tracking calorie intake manually is not possible for every single meal.”
“Finding nutritional values of a recipe or every single ingredient is difficult.”
“Finding the right quantity of food for consumption has never been easy.”
Following all the statements one thing was clear that all the users lacked time for choosing healthy even if they wanted to. Calorie tracking of homemade food was tricky and finding nutritional values was an added task.
Affinity mapping
I organized all the data from the user interviews to an affinity diagram to find patterns and common issues among the users.
Personas
Creating personas helped me make decisions about content priority and personalized features for users and drive the app design towards user-centered.
Information Architecture
The Information Architecture helped give a bird’ eye view of how we would organize content for different features. It helped me define how the content should be structured and presented for interaction.
It acted as a blueprint before as I got started on the visual design.
Sketches
I sketched few screens as initial solutions for the feature we were working on and the process was a lot quicker and faster.
There were so many iterations and the final screen designs came out to be different than the initial ones.
Low fidelity wireframes
Creating wireframes became very much easy after sketching out all the ideas. Wireframes helped us to finalize the layout of screens, placement of different components. These screens acted as the base where we started building up the final high-fidelity designs.
Colors & Fonts
At this stage, we had to design the visuals. We had to come up with something completely new. Following the trend, we thought a dark theme would be great for the app; decided to use vibrant orange on the black(#282828) background.
We chose Poppins as the heading text and Lato as body-text. Poppins is a modern sans serif typeface with geometric looks attractive enough to serve as a heading text. And Lato is a well-structured typeface which give a clear legibility and serves good as body-text.
On-boarding
In the on-boarding screens I have tried to highlight the core features of the app and it’s functionalities which helps the user get a clear picture.
Functionalities
1. Search
The search function helps the user find different healthy recipes, ingredients, and food that are displayed along with the calorie values.
2. Calorie-tracker
As the name itself defines the feature, it helps to track the amount of calorie intake and burnt by the user. Added to that it also helps in counting the number of steps taken by the user.
3. Diet-planner
Diet-planner helps the user to plan the diet according to their preferences and food choices. Along with that as the user consumes any food the calorie count is added, the diet-planner and calorie tracker work relatively.
The final screen designs are attached below.
4. Community
This feature of the app helps the user connect with chefs and people with similar interests. The user can share, post, like, save recipes, and also follow their favorite chefs. The user also receives updates on new posts uploaded and shared.
Final Designs
Here are some screens of the final designs created by us. There were lot of iterations before finalizing the final screens.
That’s a wrap…!
As part of my first ever group UX project, this was a great experience. I was able to take part in the entire design thinking process, from problem to solution and learnt to be a team player.
And a big shout out to our mentor Karthik Kasoju for guiding us through out the process.
Thanks for reading.
