EatGud Final Report
--
by EatGud
Link to App Walkthrough: https://drive.google.com/file/d/1A6KVIKBEO7oTkbhtDdfYoWT38VkARME5/view?usp=sharing
Introduction
Maintaining a healthy diet is very important, especially during this lockdown season. Right now, although there are a plethora of different diet tracking apps available, the majority of them are rather difficult to use. Moreover, many online programs advertise accelerated diet solutions, during which, users fail to build a long-term habit of eating healthy, and quickly fall back to their poor diets after the program. From our research, our team believes there is a need to collect data on user habits, fears and needs/wants, such that we can utilize this information to create designs that engage and empower people to pursue long-term healthy habits. From our early stage design research, we noticed that healthy diets have different meanings for different people. As a result, our team made sure to prioritize diversity in our planning, in order to cater to a wide variety of users. In addition, our surveys revealed that helping users achieve long-term healthy goals was the most in-demand feature. With all the information we collected, we established two goals for our project:
- Encourage long term engagement
- Helping people achieve their diet goals and live a healthy life
The core of our design is to allow users to take charge of their personal health and map out a journey of learning and consistent practice of a healthy lifestyle. The idea of giving users control with recipe suggestions forms the backbone of our design idea. Our design consists of five main stages: empathize, define, ideate, prototype and test. During the whole design process, we utilized many tools like Personas and Paper Prototypes to help us improve our design and cater to the wide variety of potential user needs. This report will provide a walkthrough of our team’s design stages, including the tools we used to help illustrate our explored ideas, the challenges we encountered, and the improvements we made at each iteration.
Emphasize and Define
In the empathize stage, we were asked to make personas and empathy maps to better understand the users of this app. Four different personas were created by members of our team. We tried to reduce the overlap between each persona so that we can cover a wider range of users.
We then went on to write our value proposition and make an interview and questionnaire to further understand our users. We decided that our app will be successful if we
- Encourage long term engagement. We are not selling a plan, it’s a ‘Lifestyle’.
- Help people achieve their diet goals and live a healthy life.
We wanted our app to a help a variety of users:
- Users with pre-existing health conditions
- Users looking for a service that keeps them accountable with stable progress and feedback.
- Users who have no previous experience with healthy habits/recipes and are trying to learn and adopt a new lifestyle. Verified recipes and ingredients delivery gives peace of mind and reduces barriers to entry.
- Different users with different goals they want to achieve
- Product doesn’t add too much burden to the users who are already potentially dealing with stress about their diet change
This can be seen in our personas too, each individual persona can fit into many of these categories. We will not go into detail of the entire interview procedure, but our interviews and questionnaires on potential users gave us the following conclusion, the user:
Using this information, we moved on to the Define phase of the design process. We made affinity diagrams to organize our data from above. We were able to identify the following pain points, the user wants:
- The app to make healthy eating easy, not more cumbersome in their lives. Changing habits is already stressful. They would be likely to continue using the solution if they don’t need to spend too much time or effort to change their diet.
- To see results from trying to achieve their diet goals. Each person has their own diet goals they want to achieve and they want to see progress being made by using the solution. Many people also have diet restrictions like vegetarian/vegan, gluten-free, and/or allergies. This shows that customization to individual wants and needs would be valuable.
- An affordable solution to help them eat healthier. Many people are financially conscious and they do not want to spend a lot of extra financial resources.
- Data security and recipes from trusted sources. This is due to the fact that sensitive personal information might be collected and people want to ensure that the data is protected. They also prefer authenticity, because it leads to more trust in the information that is being presented to them.
We also found out users lacked motivation to use this app. Many of the personas have a goal and might have motivation initially to try to work towards the goal. However, it is hard for them to continuously motivate themselves in the long term due to many reasons such as getting bored, becoming more stressed, and/or not seeing the results they want to see. We then went on to make affinity diagrams for our tasks.
Using this, the user tasks were broken down to:
- Search for meal recipes:
- Food Logging
- Track/Analyze Progress:
We then did Hierarchical Task Analysis for each of these tasks, The main insight we got from this task analysis was also the same thing we got from the affinity diagram: users struggle to stay motivated in the long term. A good way to tackle this would be to allow the users to be rewarded for eating healthier. A tier system was suggested, where the user might be given access to special recipes/other perks based on their eating habits.
Ideate
As we moved into the ideation stage of the design process, our team developed user stories and storyboards to fully define and prioritize our feature ideas. We voted on the five most prominent features for our app, then completed a Crazy 8 exercise to structure the visual layout for our app. With our Crazy 8 diagrams, our team acknowledged the common themes within our sketches and combined them to formalize our features. Finally, we produced a refined visual presentation of the feature we chose, including a general user flow.
User Stories
Brainstorming
During our brainstorming, our team realized that we each had similar ideas which could be categorized into a specific feature. Hence, we categorized our 23 ideas into various 9 categories as shown below:
Features
From those categories, we voted on 5 key features our team believed to be the most important. The features chosen ended up being:
- Informing you of your progress based on current diet
- Easy Food logging
- Take a picture to generate possible recipes with existing food items
- Smartwatch Integration and Metrics Tracking
- Badges and social network within the app to help keep users motivated.
Storyboards
Feature Epic:
As a user, I want to know how I am progressing towards my goal.
User Epic Stories:
As a user, I want to know how long it’s going to take for me to get to my goal.
As a user, I want to know what I need to change about my current diet.
Feature Epic:
As a user , I want to log my food easily
User Epic Stories:
As a user, I want to track my diet
As a user, I want to get daily nutrition information
Feature Epic:
As a user, I want to easily and conveniently prepare food
User Epic Stories:
As a user, I want to be able to get meal ideas based on the ingredients I already have at home
As a user, I want to be able to get these recipes without having to manually enter in my ingredients 1 by 1
Feature Epic:
As a user, I want to know how I am progressing towards my goal.
User Epic Stories:
As a user, I want to know how long it’s going to take for me to get to my goal.
As a user, I want to know what I need to change about my current diet.
Feature Epic:
As a user, I want to stay motivated so that I can achieve my goal
User Epic Stories:
As a user, I want to feel like every meal I make gets me one step closer to my goal.
As a user, it would help if I got support from my friends.
Sketches and User Flows
After establishing the user stories, our team participated in a group crazy 8 exercise, during which, we produced 8 possible designs for each of the features listed above. We then voted on the best samples and established initial designs for our 5 app features.
- Take a picture to generate possible recipes with existing food items
This concluded our ideation phase. By this point, we were able to use our personas and data collection from the “Emphasize and Define” stage, in order to establish a few concrete features for our app. Moreover, we created user stories to validate the importance of these features and created a rough initial sketch to help visualize our end product. This gave us a solid foundation to select 2 of these features for our “Test and Prototype” phase.
Test and Prototype
During the prototype and test stage of the design process for our project, our team designed low fidelity and high fidelity mockups for 2 of the most important features in our app: Food Logging and Recipes Search. We designed paper prototypes, which shows the rough layouts of the features and how the interactions work in the app user flow. We conducted testing with the paper prototypes to identify areas of improvement. We decided to design the high fidelity prototypes of the recipes search feature, and we applied the feedback we gathered from the previous stage to the high fidelity designs. We conducted another user testing session with heuristic evaluations and a cognitive walkthrough. This helped us to make a final round of design iteration.
Paper Prototypes
Food Logging
The first feature we prototyped was the food logging feature. We established 2 methods of logging food, which included:
- Manually entering information through search
- Scanning barcodes or taking a picture of your food
This feature allows the user to search for a specific type of food in the app to add to their meal. Then, the user is able to select the desired food from a list of pre-existing foods that are already in the app’s database. Another option would be to just take a picture, and use AI to detect what’s in the image. Then the app would populate the list of possible items it could be, and the user can select whichever one it is. From this, the user is taken to a common screen of all the items they have scanned/taken a picture of.
Explore Recipes
The second feature we created a paper prototype for was searching for recipes. We established 2 methods of searching for potential recipes. One was allowing the user to manually search for potential recipes based on keywords using a general search bar. Another method we prototyped was allowing the user to take a photo of the ingredients they actually had, and generating a list of possible recipes containing some of these ingredients.
This feature explores how we explore recipes through manual search and by taking pictures of ingredients. The user is able to explore suggested recipes, view ratings and calorie info before tapping a recipe to read the detailed recipe steps.
Paper Prototype Testing and feedback
Our test plan consisted of 2 parts
- A set of 7 questions for food logging feature
- A set of 5 questions for exploring recipes feature
We wanted to test how intuitive our designs are for the user to navigate through.
After conducting our mock interview with our buddy team, we realized some potential issues regarding our application flow. Essentially, the two different features had no user flow between them. There was no clearly defined way to alternate between Food Logging and Exploring Recipes. So we decided to add a bottom navigation bar. With this bottom navigation bar, users can now clearly see what “feature” they are currently using (highlighted in green). Moreover, switching between the two features is now very intuitive and only takes one click. As we make our design more robust, our team intends to add more features to this bottom task bar.
Another issue that was raised during our mock evaluation was the inability to cancel out the camera view feature. If a user were to explore meals using the camera option, but then decided against it, there was no back button to reverse the user flow.
High Fidelity Prototypes
We designed the high fidelity prototypes for the recipes search feature. One of the main changes between the high fidelity and paper prototypes is the type of component used for each recipe. The paper prototypes displayed list view of the recipes, while the high fidelity prototypes displayed card view of the recipes. Below are comparison images of the representations of recipes.
Another change is the recipe details page. For the paper prototype, we decided on 1 page with vertical scrolling to see the sections of the page. However, the design is not reusable. So we decided to adopt a tabbing system to see the ingredients and the steps page for the recipe. Below is the comparison between the paper prototype and the high fidelity prototype.
Other High Fidelity Screens
High Fidelity Prototype Testing
Heuristics Evaluations
From the first heuristic evaluation, we concluded that our overall app had exceptional consistency. There were minor issues raised like font size and unaligned images, which we addressed in our final designs. We also decided to include an error flow screen, which was not shown in our original happy path flow during this particular heuristic evaluation.
The second heuristic evaluation was also positive. The main issue raised was this unnecessary pop up when adding recipes to favourites, which we agreed to remove. Another issue the user raised was that they weren’t able to change the serving size of the recipe. This was an excellent point and we decided to add this to our final product.
Cognitive Walkthrough
We decided on 3 tasks to ask the user to go through for the cognitive walkthrough.
- Task 1 — Saving a favourite recipe for future reference.
- Task 2 — Find recipes by taking a picture of possible ingredients and then by manual search.
- Task 3 — You tried out the recipe for a salad and you thought it tasted decent. Rate your experience with the recipe.
Each of the tasks are the instructions that we asked the evaluator. Some of the feedback that we got for each tasks were:
- For task 1, it was obvious that the heart icon is the button you click to favourite the recipe. It would be nice to favourite without having to click into a recipe as well
- For task 2, the organization of the information is not scannable. Users have to spend time and effort to read through what is on the screen.
- For task 3, stars are an obvious way to rate the recipe.
High Fidelity Iteration
From the cognitive walkthrough, we added the ability to favourite a recipe while browsing so users don’t have to go into the favourites page. This feedback was given by the evaluator from task 2.
Another feedback given by the user is the preview page after taking a photo of ingredients. We reorganized the information on the page to create a more structured hierarchy so that users can consume the information on the page more easily.
Conclusion
At this stage, we can conclude that our design meets our initial goal set. Specifically, our app allows users to search for foods/recipes while intuitively logging their diet. The solution introduces an easy way to maintain the records of calories consumed. In addition, we plan to introduce certain “competition” features that make users feel engaged in the long term. However, we do think it is unfortunate that we were unable to finish and present the whole application due to time issues and ongoing pandemic, as a finished design would better illustrate our goals and design ideas. During the term, we received a lot of constructive feedback from other teams and learned many lessons when designing our application.
We would like to address the three most important enlightenments after looking back on our designing process. First of all, complex design doesn’t necessarily help users navigate. During our early design stages, we proposed some fancy designs that were rejected later, as users were confused during interviews. Secondly, many designs make sense, but the priority should always be to decide which design suits our goal the most. The third lesson that we learned is the importance of articulating our design to other team members. Throughout the project, our team members all had issues conveying our ideas to one another. Thus, tools like Figma really helped smooth out our design process. Lastly, the end user should always be the number one consideration when designing a feature. Thinking solely as designers caused our team to ignore the small details that would be helpful from a user’s point of view. With all the support and knowledge gained, we are confident they would play an important part in our future design.Taking a look into the future, we firmly believe that our project would help spread the idea of healthy eating habits and aid users in achieving their goal of forming long-term diet habits. In addition, we hope our users will enjoy the process of developing a long-term healthy diet with the large variety of food and recipes our application provides.
