ZIWEN
Food Diary - UIUX Design + Frontend Development
Ziwen Zeng
Hyunsoo Hong
INTRODUCTION
Food Diary is a mobile web that allows users to record their daily meal just like a diary. Simply take out the phone, open Food Diary, users could log in their meal in 60 seconds.
Try it out here: https://a10-food-diary.herokuapp.com/
Username: tester1, Password: password
(This app is only applicable for mobile phones, not responsive for computers)
IDEAS BEHIND
Through observation, we found that the most common problem people meet with is that busy study/work contradicts with healthy eating habits. People want to keep fit and healthy, but workload and stress push them toward unhealthy habits and food. We decided to create an app that helps people record their daily meal as a diary which could help reflect their eating habits and health level, in order to remind them keep healthy.
PROCESS
1. Observation and Experience Prototype
As a team of two, each of us did three observations about the subjects’ eating behaviors. We followed the subjects throughout a day and record their behaviors by photo and texts. Based on observation, each of us made a list of user needs we found and created our point of view:
Busy study/work contradicts with people’s healthy eating habits.
We conducted two experience prototypes, where we simulate the experience of using the app that you will be creating. We pretend to be our app and perform all the functions that we expect the app to do in order to get an idea of the intended functionality.
My app intends to help busy people eat healthy and has two major goals:
First, give people clear and scientific food matching menu suggestions base on personal preferences, especially quick cook and easy cook menus.
Second, help people get rid of unhealthy eating habits. For example, if a user likes to eat sweeties, my app intends to let he/she eat less sweeties or even no sweetie
( See Document for detailed steps, breakdowns and adjustments )
2. Visual Inspiration and Competitive Analysis
3. StoryBoarding and Paper Prototype
Paper Prototype One
Paper Prototype Two
4. User Flow Feedback
We did user flow feedback by using Ten Usability Heuristic for User Interface Design, which include:
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition and rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
During the evaluation, one of us play a role as facilitator (greet the evaluator, observe and take notes), another people will be the computer and manipulate the paper prototype pieces. After evaluation, we organized a list of changes based on the feedback.
List of changes:
-
Add “create account page” and log in page. (visibility of system status)
-
Edit the home page to have three sections: Create new entry, view diary, show statistics and settings. (Efficiency of use)
-
Add “homepage”, “next” and “back” buttons. Make all the “homepage” button on the right top and all the “back” button to the left top. (user control and freedom)
-
Add function “view photos” when taking a photo. (user control and freedom)
-
Re-design the meal log page, put texts, photos and self-ratings all together in one page to make it more simple for users. (for efficiency and user control)
-
Delete the “voice recording” function. (for efficiency).
-
Add message pop up when user leave the page that they log in stuffs. “Would you like to save your changes? Click “save”, “don’t save” or “stay here”. (Help user diagnose and recover from errors)
-
Change the logical design for view dairy page: click “view diary” first ask you if you want to see most recent dairy, or use calendar to find a specific day. (match between system and real world)
-
Modify the date section in Statistics page: the default is view current week and you can choose specific week or month through buttons. (Recognition rather than recall) 10. Add instructions for new users for calendar function. (Help and documentation)
-
Add message “Hi, please fill in self-rating parts before next step” if self-rating part is not finished. (Error prevention & Help and documentation).
(See Document for details)
5. Finalize design brief
People spend around three hours on average on eating per day and what people eat affects their health a lot. So, tracking what we eat every day is a good way to track our health level. Instead of mechanically inputting everything we eat one by one for three meals every day to get statistic report, which is very troublesome, time-consuming and inaccurate, our app inspires users to selfinput in an easier and much more interesting way.
People who want to record their eating and get self-reflection, who want to get eating suggestions and who want to get a lot of fun while eating are all our potential users.
Our core interactions are basically:
-
Allow people to log in their meal by taking a photo, text some brief comments and then do self-rate about current mood, healthy level of the food just logged in and taste level. This is a pretty simple way to self-record food.
-
Allow people to view neighbor user’s food record anonymously, view their photos, texts and rates to get some idea about what to eat. Also, people could rate other neighbor user’s food health level anonymously which gives an unbiased rate for food health level to other users.
-
One point of our app is to focus on user’s anxiety level. People easily get anxiety these days, but they may feel less stressed out while they are eating. Our app allows users to log in their anxiety level whenever they want and self-rate their mood whiling eating and compare these data to give out some report which then gives out some de-stress suggestions. If the anxiety level shows to be extremely high even while eating, app sends reminders to user that user need to get help to reduce anxiety.
-
Our app automatically pushes fun news, short videos about cooking and eating in the news page which allows users to browse through while they are eating. This helps with user’s mood while eating.
-
Our app stores user’s log-in photos and self-rate report in good way. For example, user could choose to browse the photos of health food, unhealthy food, taste good food, taste bad food. This gives users good navigation about their food dairy and could easily recall memory back whenever they want to find a specific food or suggestions.
6. Wireframing & User Testing
User Testing Tasks (See complete User testing plan )
Results:
We summarized our findings. Overall, the tasks are done successfully, user could figure out most of the tasks with existing bugs and errors. See list of problems and list of changes.
Sign in with the following
-
Username: tester1
-
Password: password
Create a new entry and add it to diary
-
View the photos when you create new entry before you add new entry.
-
Add new entry of your most recent meal and add it to diary.
-
Add another new entry of your most recent meal and add it to diary.
Keep track of your meals:
-
Go to statistic page, select the type of statistic you wish to get
-
See your results
Customize Setting
-
Go to settings and allow camera and location.
Register new account
-
log off your current account
-
Register a new account, whatever username and password you want.
-
Log in the new account
See & Edit Diary history
-
Go to Diary page and see your diary history. (Your new added diary is at the buttom)
-
Remove one of the diary that you don’t like
Have fun for News page
-
Go to the News page to watch a funny video.
-
Go to the News page to read a health-related article.
7. AB Testing
Currently, in A version, we added all the inputs and rating system into one page, however, this could confuse the users with too much information.
In our redesign B, we divided the input section into three separate pages so that the user won’t get overwhelmed by the amount of information available. Also, instead of having to click on the navigation bar on the top left corner, in the B version, we made it so that all the navigations such as diary or statistics pages are on the very bottom of the page so that they are easily accessible.
To test whether or not the redesign or successful, we plan on measuring how many people click on the camera function on the old vs new design and how long they spend on the old entry page vs the new entry pages. The measure is appropriate for a chi-squared test because using this test we can first measure whether our expected vs. actual data is accurate or not and if the mean is too far off from our value using chi-squared test, we can easily notice it.
Path to A: http://a8-food-diary.herokuapp.com/entry/tester1
Path to B(redesign): http://a8-food-diary.herokuapp.com/entry2/tester1
After AB Testing and data analysis, we decided to use design version B.
8. Implementation
We used Html, JavaScript, Css, Json, JQuery to implement this app. Now, it is hosted on Heroku.