Case study : Nutrition calculator app for a restaurant
Why it is require to Calculate the Nutrition value of food?
Nowadays more and more people are getting health conscious due to the pandemic. They constantly watch out for what goes inside their daily food intake. People of all age groups have health goals to lose or gain weight or to make sure they have enough nutritious food intake. Many elderly people have health problems like Diabetes, Blood pressure, Arthritis, or Dimensia. They are advised to have food according to Nutritionists or Health care providers. Generally, people manage their daily diet requirements from home-cooked food, but the problem arises while eating out or ordering food from a restaurant. People are unable to know what goes inside the food they have ordered from the restaurants. In India, quite a few restaurants provide nutritional information about their food items. So, I decided to design a Nutrition Calculator App for an Indian restaurant.
Design Process:
UX is all about the user and it is most important to keep users in front and center while designing any app or website. I am in the learning process of a Google UX design Course from Coursera. I follow the principle of the design process of Empathize, Define, Ideate, Prototype, and Test to design the mobile app. The journey begins with Empathize phase.
1. Empathize:
I started my journey with the research to empathize with potential users of the app. I use a Nutrition Calculator app for my daily food intake so I had a brief idea about how the app works for users. I have done my secondary research by closely observing how a website or an app calculates the nutrition value of food and what features they provide to users. I started using 4–5 websites of restaurants that count the Nutritional value of their food items. I did a screener survey as my Primary research was to know and understand insights from people of different age groups, different ethnicity, and different gender. I have taken personal interviews of few people to know their aspect about the Nutrition Counter app.
Here is the response from a screener survey for the app.
Empathy Map:
So, from the survey, I got a good insight into users' needs and what features to add while designing the app. I have created an Empathy Map to understand a user’s point of view by what User ‘SAYS’, ‘THINKS’, ‘DOES’, and ‘FEELS’.
Personas:
Personas are fictional users whose goals and characteristics represent the needs of a larger group of users. I have created two personas from the research to understand users' needs and challenges. I defined users' pain points and what frustrates or blocks a user to achieve goals. I created a persona ‘Cherry’ to understand many users who follow diets for weight loss and I created another persona named Peter for users who follow a low sugar diet.
User story and User journey map:
A User Story for Cherry:
As a busy working professional and a mother, I want to make sure that I and my family get Healthy and Nutritious food while ordering food from a restaurant so that I can achieve my weight loss goal and my kids develop good food habits.
User Journey Map:
User Journey Map is a series of experiences user has as they interact with your product or app. It is what users go through to achieve their goals. Here is a user journey map for persona Cherry.
2. DEFINE:
I tried to understand all the aspects of future users of the app during the Empathize phase of the Design. I understood users' pain points by what Ux issues users face while going through the app. I created a problem statement to define the challenges users face while using the app. I came to know about the problem statement by asking 5 W’s and H questions. Five Ws are When, What, Who, Where, and Why and H is for How. Here is a problem statement.
A Problem Statment:
Cherry is a busy working mother who needs a Nutrition Calculator App for a restaurant because she wants to achieve her weight loss goals and provide nutritious food to her family.
A Hypothesis Statment:
If Cherry uses an app to calculate the Nutrition value of the ordered food from outside then she can achieve her weight loss goals.
Value Proposition:
Later, I understood and determined the value proposition of my app from all the exercises done previously. The value proposition is to define ideas about what features to include in my app concerning Variety, Uniqueness, Accessibility, and Cost. I decided to include features like Different diets, Filters for Food Allergens, Filters for restaurant Menus, Nutrition Calculator, BMI calculator, Health Goals with Macros, and Ingredients for each item in the app.
3. IDEATE:
This is the third phase of a design process to find out possible solutions to user's problems and needs. The main and the most important part of the ideation phase is to perform a Competitive Analysis.
Competitive Analysis:
The main goal of a Competitive Analysis is to compare features and user experience of the direct and indirect competitors of your product or app that are available in the market. Direct competitors have the same features as yours and indirect competitors have similar features but for different types of users. I searched through the internet for whom should I consider as competitors for my app. I found out that big chain restaurants like McDonald's, Starbucks Coffee, @chipotle, @costacofee, and Shake Shack have their oven Nutrition Calculators for their food and beverages. I consider them as my direct competitors. I considered @myfitnesspal as my indirect competitor as it provides a Nutrition log and Nutrition counters for daily meals. Here is the link to my complete competitive analysis.
I observed that McDonald's and Starbucks have easy and super smooth navigation and interaction. They have handy nutrition calculators for all the food items. Starbucks has customization of ingredients, serving size, sweeteners, and topping off all the food and Beverages while Mcdonalds' has customization of ingredients and serving size. McDonald's has an intuitive and user-friendly nutrition calculator. A major weakness I found out from the competitive analysis is that all the direct competitors don’t have any nutrition calculators on their mobile app as they only show the nutrition calculators on their websites. All the direct competitors have accessibility issues like the Website of McDonald's is available in two languages while other restaurants’ websites are available in only English language. They don't have features of audio on their app or websites.
HMW:
I created HMW (How Might We) questions to brainstorm solutions to user’s problems in this phase of the design. I created HMW questions like. How might we help users to calculate the total nutrition value of the food or beverages items quickly and easily? How might we help users to filter the menu according to their dietary needs and food allergens? How might we help users to get information about the ingredients of the food or beverages? Answers to these questions came up with unique solutions to users' needs.
Crazy Eight:
Crazy eight is another exercise of the ideation phase to brainstorm possible eight solutions for users’ problems and challenges. I spent a total time of 8 minutes thinking about possible 8 solutions to users' problems. I came up with few ideas to add to the app like information about ingredients, charts of health or weight log, and filters for ingredients. Here is my Crazy Eight.
4. Prototype:
In simple language, a Prototype is an early model of a product or app that demonstrates functionality. Now it was time to take solutions to users' problems to life by building wireframes and performing low fidelity prototypes. First, I made a goal statement from the previous exercises to describe the product and its benefits to users. The goal statement provides an ideal solution for your design challenge.
Goal Statement:
Our Nutrition Calculator app for a restaurant will let users calculate the total nutrition and calorific value of food and beverages which will affect users who are health conscious and following certain types of diets by letting them filter the menu according to their dietary needs and calculate the nutrition value of the food and beverages. We will measure effectiveness by analyzing the ingredients and nutritional values of all the food and beverages items and by reading users' reviews.
User flow:
User flow defines how a user effectively moves through an app. User flows may be different for different types of users. Here is a common user flow for my app.
Storyboard:
A storyboard is series of panels that visually describe and explore users with a product or an app. There are two types of storyboards. The first is Big Picture storyboards and the second is Close-up Storyboards. I created both the Story Boards wrt my problem statement and the goal statement. Big Picture storyboards reveal needs, context, and benefits for users while close-up storyboards reveal how the app works.
Here are both types of Storyboards.
Wireframes:
Wireframes are outlines or sketches of a product or a screen. I created paper wireframes for the Homepage of my app. I drew possible five types of wireframes and then selected the best features and drew a final wireframe for the Homepage. Later, I created digital wireframes for all the important screens with main features on a tool called Figma.
That's how I created a very basic model of my app. The next step is to prototype the wireframes to see how navigation works on each screen.
Low Fidelity Prototyping in Figma:
Low fidelity prototype is a simple and interactive model which provides an idea of what the app would look like and how it would work. I used android screens in Figma to create wireframes and to prototype. A prototype shows general user flow and how the buttons and tabs work on each screen. It also shows how navigation works from one screen to another screen. Here is my Lo-Fi prototype for my app. The arrows below in the image show the navigation from one screen to other. Here is a link to see the prototype in Figma.
That’s how I am working on my first project of UX. The learning process is still going on. I am very excited to learn and explore further in the design process.
Contact info:
Gmail @tanvi.kanani15@gmail.com, LinkedIn: https://www.linkedin.com/in/tanvi-kanani-b92a92a0
Thank you.
