Update j02.md

Author: jasdhillon99

j02.md

@@ -1,2 +1,36 @@
-# j02
-Test
+# j02 (Revised)
+# Using Cronometer to track nutrition. (Revised)
+Nutrition tracking is one of my favorite tools to ensure I meet my nutritional requirements. Commonly many users start and go crazy for the first week but then quit due to apps being a hassle and getting to be a time sink. Cronometer is a case study in making the user have the least amount of friction to accomplish their task and go about their day.
+
+## Step 1: Home
+<img src="assets/1_home.PNG" alt="Home" width="50%"> <br />
+
+We start on the home screen where the User’s **Conceptual Model** is born from the circles we see under the Energy Summary. We can infer the app works by adding up all our food and see how much of this pie we have left.
+We can see clean and simple visual design that displays only the most important information. It does this without showing all micro nutrients and cluttering the page. Instead we just get the calorie tracker circles with more info available if we swipe on that top bar.  
+
+
+## Step 2: Scrolls
+<img src="assets/2_scrolls.PNG" alt="Scrolls" width="50%"> <br />
+We scroll down and see separated lists for each meal. This displays **Constraints** where each food is grouped into a separate meal so users can clearly segment and reduce confusion if you need to add or delete an item.
+**Affordances** here are plentiful, we see Plus (+) Signs everywhere allowing us to click on any of them to presumably add something. Upon clicking the + on breakfast we see options to add various data. I just want to scan a barcode of a protein shake so I click on that.
+
+
+## Step 3: Options
+<img src="assets/3_options.PNG" alt="Options" width="50%"> <br />
+Once we click on the + button next to breakfast, we have options that pertain to that meal time. This aligns with the User’s **Mental Model** and is a clear call to action button as each is labeled depending on what we want to add. I select the barcode since I just want to scan a drink and be done with my logging for now.
+
+## Step 4: Barcode
+<img src="assets/4_barcode.PNG" alt="Barcode" width="50%"> <br />
+The camera instantly opens and we are in a scanning mode. This shows strong **Mapping** between the icon and the actual scanning since this icon is commonly associated with scanning at checkout in grocery stores. We get feedback right when you scan the bottle with a quick vibration and screen transition.
+
+## Step 5: Which One
+<img src="assets/5_which_one.PNG" alt="Which One" width="50%"> <br />
+We see multiple options since that barcode brings up a couple entries in their database. We can quickly see the calories and serving size so I click on the 2nd option. Here the user’s **Mental Model** is put to the test since we would have to understand that each option would impact our final result and we need to choose the right one in these situations but we can just click on any and as long as the info is right about the calories, serving size, and protein we are golden.
+
+## Step 6: Verify
+<img src="assets/6_verify.PNG" alt="Verify" width="50%"> <br />
+I can quickly see and review if this info, mainly calories and serving size, match my bottle. It does! So I click add to my diary. This is the last layer of **Constraint** that allows the user to prevent incorrect additions.
+
+## Step 7: Done
+<img src="assets/7_done.PNG" alt="Done!" width="50%"> <br />
+I can now see my new entry show up and it reflects in the circles above. The circles act as a **Natural Mapping** since it’s reminiscent of a pie. The slice is “growing” as you log more. The best part however is the fast visual. We can quickly see how much more we can have at a glance, without having to even do the math in your head, or navigate to the more complex menus.