MACROPlate CALCULATOR APP
BRIEF DISCRIPTION
This app is called MacroPlate and is designed to calculate the number of macronutrients (macros) such as proteins, fats, carbohydrates, and calories in your food on iPhone devices.There is a new feature in this app that contains the ability to scan your food and calculate the nutrients in your food using your camera before you eat it. You can set your nutritional goals and adjust them as needed to get a visual on the dashboard of how far you need to go to reach your goals. If you are not motivated to meet your goals, you can connect with friends to compete to be placed on the leaderboard where you can visually see the goals of everyone on it.
BRAINSTORMING
I came up with over 50 ideas for a calculator app. I then narrowed it down to 5 ideas. The ideas were an age scanner that could reverse time in your face, calculating when Jesus Christ will come, the family tree of animals, brain activity and dream streaming, and a macronutrient calculator. I decided to go with the macronutrient calculator app because I am the most familiar with it, and it also stretched the science fiction line of being able to inject or take away macros using just your phone camera.
SCENARIOS
ScENARIO 1
You are out with your friends at a restaurant and you are worried your food does not have enough nutritious value, use the app to scan your plate of food with your camera.
ScENARIO 2
You went to the doctor and they recommended you eat 120g of protein a day, use the app to adjust your nutritional goal.
ScENARIO 3
You have been competing with your friend Josh to reach a fitness goal, use the app to see who is winning.
PERSONAS
PERSONA 1
Amy is 39 and has 4 little kids. She works from home all day, and only gets out of the house to run errands and take her kids places. She makes about 80k a year, and her husband is a doctor. She loves to bake, sew, and go out with her friends when she can. She has been trying to lose weight since the beginning of the year, and needs to count her macros in order to do so.
PERSONA 2
Josh is 22 and in college at MSU. He works part time at the gym on campus where he spends every morning and most evenings working out. He wants to compete in body building this year with a bunch of his gym friends. He is studying exercise physiology with the hopes to become a personal trainer. He knows from his studies that in order to reach a certain body fat percentage he needs to eat more protein, but he doesn’t have the time or money to do so.
PERSONA 3
Josh is 22 and in college at MSU. He works part time at the gym on campus where he spends every morning and most evenings working out. He wants to compete in body building this year with a bunch of his gym friends. He is studying exercise physiology with the hopes to become a personal trainer. He knows from his studies that in order to reach a certain body fat percentage he needs to eat more protein, but he doesn’t have the time or money to do so.
USABILITY TESTING
TEST 1
Sloan has experience with macro calculators, and understood the concept of the app. The first scenario was just adding an item by search. She had a hard time at the beginning understanding what she was looking at, but then I said add and item, she understood what to do. Each step of this process made sense, and she successfully made it through the first scenario.
TEST 2
The second scenario was adding an item by taking an image and scanning. She took the image, and didn’t get what the scanning page was, but that was just because she didn’t have to touch anything. Then, I asked her to add protein to her apple, and she pressed the right buttons. It helped that the buttons she was supposed to click were extremely large in comparison. She added the food to her macro calculator.
TEST 3
The last scenario she was stuck on which button in the menu to click. Then, after that she was able to find where the friend connections are. The one question was how to start a competition with someone, and how to know when the streak ends.
USABILITY TESTING PART 2
TEST 1
Sydney was the next user who decided to try out the app. She completed the first scenario in a very fast time. This time I gave less of an introduction to the app to see if she would understand the different levels. She clicked the right add button, and then searched for eggs. I had a pretend keyboard pull up which was in a similar shape so that made sense. Then she found brown eggs, and added it to her macros.
TEST 2
The second scenario needed a little more explaining just because it is a hypothetical situation. I had her take an image of an apple, scan it, and then asked her to inject protein to her food. She clicked the right plus button, and added the food correctly.
TEST 3
The third scenario has been the most difficult, mostly because the icon I drew is more of a send to friends icon instead of a compete with friends icon. She clicked on the user profile at first, and then corrected herself when she looked at me. Then, she was able to see the friends screen and then see her mom’s macros.
USABILITY TESTING PART 3
TEST 1
Aysha was on a FaceTime call with me and she ran through the usability testing for all 3 tests. The first one she understood everything. She felt like the home page needed to have more features. She was also inclined to push all of the extra buttons in order on the last page instead of just submitting it.
TEST 2
She understood the second scenario the best, and suggested that I move the plus and minus signs because she is used to having the plus on the right and the minus on the left. She didn't understand that 100g of protein could be added to an apple, but I had to explain this is hypothetical and technology for the future.
TEST 3
The last scenario she was then only one who could go through with the process of finding where to compete with friends. This is because she is used to seeing Android phones, and I realized that the icon does not suggest competing with friends, and it is not for Apple devices either.
The icon that was used at first to indicate where to go to collaborate with friends (image 1 & 2). The icon that was supposed to be user information that the test subjects got confused with (image 3 & 4). The final navigation icons that make more sense after testing (image 5 & 6).
REFINEMENTS
After user testing I realized the places that I want to implement color to make the different areas more recognizable. I also realized I needed to change the icon for connecting with friends because all of the users were stuck and confused when they were looking where to click. I also don’t want to place them by the profile because the person icon looks to close to the friends icon I will change it to. The last thing to refine would be to change the scan area to be bigger, and the plus or minus signs to be bigger too. The users did not have trouble understanding what they were, but clicking them was a problem so they need to be bigger and stand out on any background color of any picture. I also don’t know if I need a settings tab in the navigation at the bottom if I am not going to have my users go to it, it was throwing them off a little bit.
WIREFRAME ROUGH DRAFT
Building the wireframes was a process to decide what elements need to be shown on the homepage, and how to navigate through the app. The first image is the home screen where you can go one of three places. You can click on "Adjust Goals" and it will take you to the following two images where you can "Set Goals". Then, you click home to get back to the Dashboard. If you click the camera it will bring up the fourth and fifth image where you scan the food, and it logs the nutritional value after you click "Log Food". The last scenario is to compete with friends where you click the multiple person icon and go to the last two images where you select a friend and you can see their progress compared to yours.
WIREFRAMES
After doing some research, I decided the main part of the app was to scan and not to adjust goals. I also realized once prototyping came in that the top needed to be further down because of the size of the phone screen. I no longer liked the vertical bars, and figured I could fit more on the home screen if I made them all horizontal. Once the color scheme was set then I went in and decided to change the font weights, and no longer make the headings all capital letters. I also learned how to make the screen on the app scroll so there was no longer overlapping happening. I learned about colors, and which ones were associated with which nutritional value. I also really desired consistency so I wanted the buttons on all the same level, the headers and the footers looking identical, and the statistics matching the style on the dashboard.
USABILITY TESTING PART 4
TEST 1
The first test was for changing the goals. First, with the scenario being so specific to proteins she clicked on the word "Proteins". The step for typing was missing, but it made sense. The first test I realized the goals never change, I had the dashboard set to the same thing as the result. I changed the beginning to have 100g of proteins set, and then the final to have 120g.
TEST 2
The next test was to test the food scanning. The word scanning was throwing off the fact that the button needed to be pushed in order to make the function work. The results were successful, and the food was logged, but again I realized there was no feedback that the task was finished and that the food changes the results of the logging the food.
TEST 3
The user thought this scenario only took one step, but there was more to see, she did not read the leaderboard button and just went straight to seeing the different streak levels of the people to compare them.
USABILITY TESTING PART 5
TEST 1
The changing goals test seems to be the hardest because they all expect there to be a button on the home page that will allow them to slide the goals instead of looking in the nav. This user has not used an app like this before, but she understood what to click after a stressful moment of randomly clicking every button.
TEST 2
The second test was also interesting because the user thought that the camera was already scanning the food and not that she had to tell it to do so. The scanning went well, and she said "I assume I log the food, whatever that means". There is some miscommunication with the app, but I also tried not explaining it to her this time to see if they would catch on.
TEST 3
By the last test, the user was aware of the navigation, and found the friends icon, and quickly found the leaderboard. She thought it was creative and funny that she was loosing compared to her friend Josh.
PROTOTYPE 1
After making some adjustments to the overall feel and look of the app, the last prototype is finally here. There is a more modern IOS feel to this prototype, and the color scheme feels more complete. There is more user interaction with the swipe of the goals, and the scrollable features on all the home pages. Every home page has an updated version after every scenario. The important information is in a widget type of instance that is easy to read and make sense of. The drop shadows were added to increase dimension, and the color scheme for each type of macronutrient is paired nicely with a desaturated blue. There was a logo created for MC (Macro Calculator). The last refinement was to create a slider for the goals to make it more interactive.
USABILITY TESTING PART 6
TEST 1
I tested two subjects for this test to be sure the final outcome was as expected. Both users were able to make suggestions as to where they would click to edit their proteins, and it makes sense they would click on the word "Proteins" and they also would have performed the task better on a phone to drag the number to the right amount than to click and drag that did not make sense.
TEST 2
This was a very long learning section, they took their time just because they had a lot of information given to them, but they were just asked to see the product not exactly to log it, that is an additional feature for this app that is not part of the scenarios.
TEST 3
By the last test, both users were able to find the leaderboard and clearly identify who was ranked in which area. I read one of them the scenario specifically with Josh, and the other the one where you are just competing with friends and the one with Josh clicked his name and the other clicked the leader board so I connected both to the leaderboard to eliminate confusion.
FINAL REFINEMENTS
For the final refinements, I created a new logo that fits the new color scheme. The blue did not match so well so I went with a neutral and desaturated shade of purple. The app is a fork and a leaf in the shape of a plate. There were some grid adjustments, and when you scroll on the home screen you see more of a history of the food logged.
CONCLUSION
Overall, this project I learned how to design an app in Figma, and use. the prototyping tool in various ways to make the app interactive, tailored to my audience, and enhance the user's experience. The app is very up to date with the ability to create widgets and visually fits the IOS scheme, look, and feel. There was a lot of trial and error, there was a very outlandish idea to start with that then evolved into a well designed and functional app for calculating the macros in the food.
