- Email: [email protected]
Design and Development of FoodGo: A Mobile Application using Situated Analytics to Augment Product Information
Available online at www.sciencedirect.com Available online at www.sciencedirect.com
ScienceDirect ScienceDirect
Procedia online Computer 00 (2018) 000–000 Available at Science www.sciencedirect.com Procedia Computer Science 00 (2018) 000–000
ScienceDirect
www.elsevier.com/locate/procedia www.elsevier.com/locate/procedia
Procedia Computer Science 135 (2018) 186–193
3rd International Conference on Computer Science and Computational Intelligence 2018 3rd International Conference on Computer Science and Computational Intelligence 2018
Design and Development of FoodGo: A Mobile Application using Design and Development of FoodGo: A Mobile Application using Situated Analytics to Augment Product Information Situated Analytics to Augment Product Information a,b,c a,b,c
Roland P. Abaoa,a,*, Cenie V. Malabananbb, Adrian P. Galidocc Roland P. Abao *, Cenie V. Malabanan , Adrian P. Galido
Mindanao State University – Iligan Institute of Technology, A. Bonifacio Avenue, Tibanga, Iligan City 9200, Philippines Mindanao State University – Iligan Institute of Technology, A. Bonifacio Avenue, Tibanga, Iligan City 9200, Philippines
Abstract Abstract Situated analytics (SA), a combination of augmented reality and visual analytics, is a potential tool in enhancing user understanding of information. study created a mobile application (app) named FoodGo, utilizes SAinto enhancing present product Situated analytics (SA), a This combination of augmented reality and visual analytics, is which a potential tool user information in of mobile devices,This to help consumers making a food choice a grocery shopping scenario. was designed understanding information. study created ainmobile application (app)innamed FoodGo, which utilizes FoodGo SA to present product in such a way that users just need to scan the barcode of aafood using the smartphone’s cameraFoodGo and thewas helpful food information in mobile devices, to help consumers in making foodproduct choice in a grocery shopping scenario. designed information willthat then be augmented the the smartphone display using the concept situated analytics. Anand iterative process of in such a way users just need toinscan barcode of a food product using theofsmartphone’s camera the helpful food design analysis, development, and user interface evaluation was used in and developing the mobile information will prototype then be augmented in the smartphone display using the concept of designing situated analytics. An iterative processapp of prototype. The iterative process was limited threeinterface iterations only and was the data in each iteration was used to improve design analysis, prototype development, andtouser evaluation usedgathered in designing and developing the mobile app the mobile The app iterative in the succeeding iterations. theiterations iteration only cycles, of in theeach Android FoodGo mobile app was prototype. process was limited After to three andthe thefinal dataversion gathered iteration was used to improve developed ensured that alliterations. the components, includes thethe barcode scanning the cloudFoodGo database, were working the mobile and app was in the succeeding After thewhich iteration cycles, final version of and the Android mobile app was properly. using thecomponents, mobile app in helping consumers make ascanning healthierand food assessed in working a mockdevelopedThe andeffectiveness was ensured of that all the which includes the barcode thechoice cloudwas database, were up grocery shopping environment. result indicated that using FoodGo significantly the was success rate of to properly. The effectiveness of usingThe the mobile app in helping consumers make a healthierimproves food choice assessed in ausers mockselect a healthier foodenvironment. product. Further improvements FoodGo mobile app include putting athe tutorial on rate howoftousers use the up grocery shopping The result indicatedfor thattheusing FoodGo significantly improves success to mobile when food opened for theFurther first time and having an to input special conditions as diabetes a more select a app healthier product. improvements for option the FoodGo mobile apphealth include putting asuch tutorial on howfor to use the personalized way of informing thefirst usertime aboutand thehaving food products. mobile app when opened for the an option to input special health conditions such as diabetes for a more personalized way of informing the user about the food products. © 2018 The Authors. Published by Elsevier Ltd. © 2018 2018 The Authors. Published by Elsevier Elsevier Ltd. This is an open accessPublished article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) © The Authors. by Ltd. This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. Intelligence 2018. Intelligence 2018. Keywords: food choice; food grocery shopping Keywords: food choice; food grocery shopping
1. Introduction 1. Introduction There has been a rise in obesity and overweight cases worldwide. According to World Health Organization 1 , 1 There been ahas risenearly in obesity andsince overweight worldwide. Health Organization , worldwidehasobesity tripled 1975. cases Among the adult According populationtoinWorld the year 2016, 39% of the worldwide were obesity has nearly since 1975. Among the in adult population in since the year 2016, 39% of the population overweight andtripled 13% were obese. These increase figure is alarming overweight and obesity population 13% were obese. These increase figure is alarming since overweight obesity are major were risk overweight factors forand non-communicable diseases suchinas cardiovascular diseases, type 2anddiabetes, are major risk factors for non-communicable diseases such as cardiovascular diseases, type 2 diabetes, 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) 1877-0509 © 2018 Thearticle Authors. Published by Elsevier Ltd. Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Intelligence 2018. This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 10.1016/j.procs.2018.08.165
2
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
187
musculosketal disorders and some cancers 2. One of the major reasons for the rise in overweight and obese cases is the increased consumption of processed food products that are high in fat, sugar and salt contents 3. This indicates that the concept of a well-informed and healthy food choice among the consumers can play a significant role in combating these nutrition related diseases 4. Mobile technology is a potential tool in facilitating a well-informed food choice among the consumers. Recently, few studies concerning the use of smartphones to assist shoppers in making healthy food choices have emerged. One of these is the FoodSwitch 5 mobile application (app) which provides consumers with an easy-to-understand nutrition fact of a product and support the selection of healthier choices when shopping for food products. Along with the improvement of the smartphone’s processing power over the years, augmented reality (AR) has also been incorporated into mobile applications to support healthy food choices. The augmented-sugar-intake app 6 augments the amount of sugar a beverage product contains. To a more extent, situated analytics (SA), a term used by ElSayed, Thomas, Smith, Marriott and Piantadosi 7 to define the area of research combining visual analytics and AR, further enhances the decision-making capability of the consumers. The main advantage of SA over the traditional AR visualization is that with SA, users can have an interaction with the information being presented aside from just being able to see the visualization of the data. At the same time, the users can customize the data being presented on the device screen based on what type of information they want to see. With these advantages, SA can be a valuable concept to enhance the understanding of information and help users make an informed food choice in a grocery shopping scenario. In another study of ElSayed, Thomas, Marriott, Piantadosi and Smith 8, they showed that SA can be a promising solution for enhancing the understanding of information among the users in the context of a shopping task. Yet, there are still few number of studies about the use of SA in promoting a well-informed food choice among the consumers in a grocery shopping scenario. In relation to the use of mobile technology in helping consumers make a healthy food choice, this study intended to design and develop FoodGo, a situated analytics mobile application. This study also finds out whether a mobile application that uses the concept of situated analytics to augment the food information can be a tool in helping consumers make a healthy and well-informed food choice in a grocery shopping scenario. 2. Methodology 2.1. System Architecture Fig. 1 shows the system architecture implemented in this study. The final version of the FoodGo mobile app is installed in an Android smartphone. Every time the mobile app is opened, it tries to connect to the cloud database whenever an internet connection is available. Connecting to the cloud database ensures that the mobile app gets the updated database information about the food products. When the connection to the cloud database is already
Fig. 1. System Architecture of the FoodGo Mobile App.
188
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
3
established, it then updates the local cache copy of the database in the smartphone. Updating the local cache copy of the database makes it possible for the mobile app to be usable still even when the internet connection is not available anymore. The mobile app can then scan the barcode of the food products using the smartphone’s rear camera. The mobile app searches for the barcode of the food product in the local database. If the food product is in the database, the product’s information is then augmented into the smartphone screen using the concept of situated analytics. 2.2. Design, Development, and Evaluation of the FoodGo Mobile App An iterative process, as shown in Fig. 2, was used to design and develop the FoodGo mobile app. Three iterative cycles of design analysis, prototype development, and user interface evaluation of the mobile app prototype was conducted before creating the final version of the FoodGo mobile app. Finally, the effectiveness of using the mobile app in helping users make a healthy food choice was assessed in a mock-up grocery shopping environment.
Fig. 2. Design, development, and evaluation process of the FoodGo mobile app.
2.2.1. Design Analysis Each cycle of the iterative design and development process began with design analysis. During design analysis, the mobile app’s user interface was structured using the concept of SA. SA has four primary components namely: analytical interaction, augmented reality (AR) interaction, abstract information, and situated information. These components all in all make SA a promising solution to enhance the understanding of the product information 8 and thus a helpful tool for users in making a well-informed food choice in a grocery shopping scenario. The analytical interaction component of the mobile app allows the user to choose what product information is to be augmented on the smartphone display. Each of the choices has a checkbox on its side, and the users just have to check the boxes of the corresponding product information they want to be augmented on the screen for it to be seen. Additionally, the users were also given the option to indicate their shopping budget in order for them to be notified when they are near or has already reached and exceeded their set shopping budget limit. For the AR interaction component, the mobile app allows the user to add/remove a product currently selected to/from the virtual shopping cart. When a product is to be added in the virtual cart, the user just need to indicate the number of items in the number picker scroll and click the ‘add to cart’ button. Likewise, when a product is to be removed from the virtual cart, the user just need to indicate the number of items and click the ‘remove from cart’ button. The abstract information component shows the overall status of the virtual cart which is composed of the total number of items in cart and the total price of all the products in the cart. When a shopping budget is specified by the user, the mobile app additionally shows a dynamic horizontal budget bar situated at the top of the screen. The budget bar shows the percentage of the total price as compared to the set budget limit. As items are added into the cart, the budget bar grows and changes its color as well. The budget bar is set to color green when the total amount of products is still far below the budget limit; the budget bar then changes its color to amber when the total amount of products is already halfway the budget limit; and lastly the budget bar changes its color to red when the total amount products equals or exceeds already the budget limit. Similarly, the budget bar decreases and changes its color accordingly when items are removed from the virtual shopping cart.
4
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
189
The situated information component shows the product information the user has chosen from the analytical interaction component. A horizontal scroll container located at the bottom of the screen was used to contain the food product information to be displayed. 2.2.2. Prototype Development Each iteration of the FoodGo prototype was developed using Android Studio, an open source mobile app development environment by Google to build native Android mobile apps. The mobile app was developed in such a way that the user just needs to scan the barcode of the food product using the smartphone’s camera and the situated information component of the corresponding product is then automatically displayed in the smartphone screen. With the analytical interaction component, the users are given the ability to choose what information of the food product are to be augmented into the smartphone display. Users were also given the ability to the add/remove a product to/from the virtual shopping cart as part of the AR interaction component. Overtime, the total number of items and the total price of the products in the cart were displayed as part of the abstract information component. Google Mobile Vision’s Barcode Application Program Interface (API) was used for reading the barcode of the products because of its capability to detect barcodes in real-time without a need for an internet connection. Moreover, Google’s Barcode API can detect a wide format of barcodes including EAN-13, EAN-8, UPC-A, and UPC-E which covers all the possible barcode formats a grocery product could have. For the mobile app’s cloud database, Google’s Firebase Realtime Database was used to store the information of the food products. Firebase Realtime Database is a cloud-hosted database that allows synchronization of data between multiple users in real-time. This means that when a certain product information needs to be updated, a change of data in the mobile app’s Firebase database will synchronize the local cache database on all the devices using the mobile app automatically once the device goes online. Furthermore, since Firebase Realtime Database can make a local cache copy of the database on the device, users can still use the FoodGo mobile app even though they go offline. 2.2.3. User Interface Evaluation Thirty (30) university students evaluated the user interface (UI) design of the FoodGo mobile app: ten (10) university students for each UI evaluation iteration. For each UI evaluation, the FoodGo mobile app prototype was presented to the participants and allowed them to explore the mobile app. Each participant was then interviewed with a questionnaire aimed to assess and solicit comments from the participants regarding the UI design of the FoodGo mobile app. The questions were constructed to assess the general UI design, the welcome screen, the situated information, abstract information, analytical interaction, and the AR interaction aspects of the mobile app. The comments and suggestions from the participants were compiled and assessed whether it calls for further improvement of the mobile app UI design in the next iteration. Comments and suggestions that are easy and attainable within a short span of time were considered in the next design analysis iteration. On the other hand, comments and suggestions that requires an intensive work and a major rework of the mobile app was considered as a recommendation for future studies. 2.2.4. Final Mobile App Development The final FoodGo mobile app was developed after three (3) cycles of the iterative design and development process. Android Studio, Google Mobile Vision’s Barcode API, and Google Firebase Database were used in developing the final version of the mobile app. 2.2.5. Assessing the Effectiveness of using the Mobile App Another set of thirty (30) university students were randomly selected to assess the effectiveness of using the FoodGo mobile app in a mock-up grocery shopping scenario. Twenty (20) different tasks, which were categorized into ten (10) food categories to represent the common packed food products being purchased in a grocery shopping scenario, were given to the participants. The food categories are the following: cereals, chips, cookies, chocolates, noodles, dairy food, dairy beverage, juices, canned meat, and canned fish. For each food category, a participant was
190
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
5
presented with two similar food items within the food category and was tasked to select the healthier food item using two methods. Method 1, which comprises tasks 1 to 10 was set as the controlled group of tasks while Method 2, which comprises tasks 11 to 20, was set as the experimental group of tasks. For Method 1, the participants were made to select the healthier food item manually without using the FoodGo mobile app. The participants were allowed to look freely at the nutritional information found at back of the packaging of the food products and were tasked to select the healthier food item according to their own judgement. For Method 2, on the other hand, the participants were also made to select the healthier food item but now with the help of the FoodGo mobile app. The set of food items used in the first method were ensured to be not the same with the set of food items used in the second method in order to eliminate any food item familiarity a participant may have gained while performing the previous group of tasks. The effectiveness of using the mobile app was measured by the number of successful tasks the participants were able to accomplish. For a certain task to be considered successful, a participant must be able to correctly select the healthier food product being presented to him/her. The Health Star Rating calculator 9, a kind of front of pack label that rates the overall nutritional profile of a food product, was used as the basis for identifying which among two grocery food products is healthier. A two-tailed paired t-test statistical tool was used to determine if there is a significant difference between using and not using the FoodGo mobile app on the success rate of the users in selecting a healthier grocery food product. In a paired t-test, the null hypothesis stating that ‘there is no significant difference in the success rate when using and when not using the mobile app’ is to be rejected when the probability-value (p-value) of the null hypothesis to occur is less than the set level of significance, or the alpha, which is set to 5% in this study. 3. Results and Discussion 3.1. First Iteration Result The initial mobile app UI, as shown in Fig. 3.a, was designed and developed by the mobile app developer in such a way that the four components of SA are present. The welcome screen first appears when the mobile app is opened. When the “Start Shopping” button is pressed, the FoodGo main screen opens. Three SA components can be seen directly in the main screen: the abstract information, which consists of the total price and the budget status of the virtual cart, is located at the top part of the display; the situated information, which contained the food labels in a horizontal scroll view, is located in the bottom of the display; and the AR interaction component, which gives the user the ability to add/remove the selected food product in the virtual cart, is located above the situated information component. The analytical interaction, which allows the user to select what food labels to display, is contained in a pop out menu which can be accessed by clicking the analytical button located at the end of the food labels scroll view. The list of food label choices that were available to the users in the analytical interaction component included the following: Health Star Rating, Exercise equivalent, energy label, a set of nutrients to limit, a set of nutrients to encourage, and the price tag. The set of nutrients to limit included the following: total fat, saturated fat, trans fat, cholesterol, sodium, carbohydrate, and sugar. The set of nutrients to encourage included the following: dietary fiber, protein, potassium, vitamin A, vitamin C, calcium, and iron. The mentioned nutrients were selected because of its ready availability at the nutrition facts of most of the grocery food products. After the first FoodGo mobile app prototype has been developed, the UI design was evaluated by ten (10) university students. For the general aspect of the mobile app, most participants said that the mobile app was very helpful specially for those who are health conscious and those who are budgeting their money. For the welcome screen, comments indicated that many participants find the color of the background to be dull. For the abstract information component, comments included a suggestion to put a dark background on the text for easy reading. For the situated information component, there was a suggestion to increase the font size of the food labels. For the analytical interaction component, there were comments to place the analytical button to an easier to find place in the screen. For the AR interaction component, there were comments to make adding and removing a food product much easier since many participants did not know what to do with the buttons initially. Other general comments indicated that the mobile app sometimes take a long time focusing on the barcode and therefore suggested to find a way to make the barcode scanning a little faster.
6
Roland P. Abao et al. /Computer Procedia Science Computer 135 (2018) 186–193 Author name / Procedia 00Science (2018) 000–000
191
Fig. 3. The FoodGo mobile app (a) first iterated design, (b) second iterated design, (c) third iterated design, and (d) final UI design
3.2. Second Iteration Result Comments and suggestions from the first UI evaluation were considered in the design analysis of the second iteration. Changes in the design included the following: the background color of the welcome screen was changed to white and a picture of food items were added to at the top and bottom of the display; the overall theme color of the mobile app was also changed from black to green to enhance the user experience of using the mobile in a grocery shopping scenario; a green background was used at the back of the abstract information and the situated information components as well for easy reading of the texts; the analytical button used to open the analytical interaction panel was repositioned in an easier to locate part of the screen; for the AR interaction component, indicating the number of items to add or remove was made easier by putting a scroll number picker in place of a number picker button; and barcode scanning was improved by adding a ‘tap to focus’ feature in the main screen which allows the user to tap the main display to trigger the auto focus capability of the smartphone camera. The second iterated UI design is shown in Fig. 3.b. After the second FoodGo mobile app prototype has been developed, the UI design was again evaluated by another set of ten (10) university students. For the general aspect of the mobile app, comments indicate that the participants find the general navigation to be easy to use. Many participants find the design of the welcome screen to be nice, colorful and attractive. For the situated information component, there was a suggestion to reposition the price tag in such a way that it can be easily seen in the display. There was a suggestion to put the total calories of the food products within the virtual cart as well beside the total price in the abstract information component. The participants find the analytical interaction component to be generally fine. For the AR interaction component, there was a suggestion to have a confirmation dialog box when adding or removing a food product in the virtual cart.
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
192
7
3.3. Third Iteration Result Comments and suggestions from the second UI evaluation were considered in the design analysis of the third iteration. Minor changes in the design included the following: the price tag was repositioned at the top of the food labels scroll view for easier visibility when scanning a food product; the total calories of the products within the virtual cart was added in the abstract information component; and an additional confirmation dialog box was added every time a food product is added or removed in the virtual cart. The third iterated UI design is shown in Fig. 3.c. After the third FoodGo mobile app prototype has been developed, the UI design was again evaluated by another set of ten (10) university students. For the general aspect of the mobile app, most participants interviewed find the mobile app to be amazing, helpful and beneficial to grocery shoppers and find the overall navigations to be user friendly and understandable. There was a suggestion to ensure that the text in the situated information and the abstract information components do not overflow when the text becomes long. For the AR interaction component, there was a suggestion to increase the number of items that can be added in the number picker scroll. Other general comments included a suggestion to let the food labels remain in the screen until another barcode is scanned and a suggestion to easily recall the previous food products scanned without the need to rescan the barcode again. 3.4. Final FoodGo Mobile App Result Fig. 3.d shows the final iterated UI design of the FoodGo mobile app. Comments and suggestions from the third UI evaluation were considered in the design analysis of the final mobile app. Changes in the design included the following: the font size of the texts in the food labels were increased for easy reading; food label icons were refined and was made clickable giving users the capability to see the description of the selected food labels; for the analytical interaction component, nutrients within the nutrients to limit and encourage categories can now be selected individually; the food labels were allowed to remain the display until another barcode is being scanned; and a swipe feature was added in the product name panel to easily access the history of scanned food products making it easier to compare one product from the other. 3.5. Effectiveness of using the FoodGo Mobile App In evaluating the effectiveness attribute, the mean difference being compared was the success rate of 30 participants to select the healthier food product when using and when not using the FoodGo mobile app. The paired t-test calculation resulted in a t-value of 5.3752 and a p-value of 0.00001. From the result of the t-test statistical tool, there is enough evidence to reject the null hypothesis since the p-value is less than the 5% level of significance. The alternative hypothesis stating that ‘there is a significant difference between the success rate of the users to select the healthier food product when using and when not using the FoodGo mobile app’, then holds true. The average success rate of the participants when selecting the healthier food product manually is 65.33% while the average success rate of the participants to select the healthier food products when using the FoodGo mobile app is significantly higher at 84.33%, as can be seen in Fig. 4.
Fig. 4. Bar graph showing the average success rate of selecting the healthier food choice when using and not using FoodGo.
8
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
193
4. Conclusion and Recommendation An Android version of the FoodGo mobile app was designed and developed in this study in such a way that users just need to scan the barcode of a food product using the smartphone’s camera and the helpful food information were then augmented in the smartphone display using the concept of situated analytics. The mobile app connects to cloud database in order to get an updated information about the food products regularly. The mobile app also creates a local cache copy of the database in order to make the mobile app still usable whenever internet connection is not available. There is a significant difference between using and not using the FoodGo mobile app on the success rate of the users in selecting a healthier grocery food product. The average success rate of the participants to select the healthier food product when using the FoodGo mobile app is significantly higher than when not using the mobile app. It can be concluded that a mobile app that uses the concept of situated analytics, such as the FoodGo mobile app, can be a helpful tool in supporting consumers in making healthy food choices in a grocery shopping scenario. Recommendations to further improve FoodGo include the following: include a tutorial on how to use the mobile app especially when opening the mobile app for the first time; have an option to input special health conditions such as diabetes for a more personalized way of informing the user about the food products; and to allow the users to rearrange the sequence of the food labels. Evaluating the FoodGo mobile app in a grocery shopping scenario is also a recommendation for future studies. Acknowledgements The first author would like to thank the Department of Science and Technology – Engineering Research and Development for Technology consortium for the financial funding of conducting the study. References 1. World Health Organization. Obesity and Overweight Fact Sheet. [Online].; 2018 [cited 2018 February 18. Available from: http://www.who.int/mediacentre/factsheets/fs311/en/. 2. World Health Organization Regional Office for the Western Pacific. Overweight and obesity in the Western Pacific Region. [Online].; 2017 [cited 2018 February 18. Available from: http://iris.wpro.who.int/bitstream/handle/10665.1/13583/9789290618133-eng.pdf. 3. Ellulu M, Abed Y, Rahmat A, Ranneh Y, Ali F. Epidemiology of obesity in developing countries: challenges and prevention. Global Epidemic Obesity. 2014 March; 2(1)(2). 4. Bos C, Van der Lans I, Van Rijnsoever F, Van Trijp H. Bos C, Van der Lans IA, Van Rijnsoever FJ, Van Trijp HC. Understanding consumer acceptance of intervention strategies for healthy food choices: a qualitative study. BMC Public Health. 2013 December; 13(1)(1073). 5. Dunford E, Trevena H, Goodsell C, Ng KH, Webster J, Millis A, et al. FoodSwitch: a mobile phone app to enable consumers to make healthier food choices and crowdsourcing of national food composition data. JMIR mHealth and uHealth. 2014 July; 2(3). 6. David EC, Hérnandez-Briones , Ochoa-Ortiz , Gutiérrez-Gómez. Escárcega-Centeno D, Hérnandez-Briones A, Ochoa-Ortiz E, GutiérrezGómez Y. Augmented-Sugar Intake: A Mobile Application to Teach Population about Sugar Sweetened Beverages. Procedia Computer Science. 2015 Jan; 75. 7. ElSayed , Thomas , Smith , Marriott , Piantadosi. Using augmented reality to support situated analytics. In Virtual Reality (VR), 2015 iEE. 2015 March: p. 175-176. 8. ElSayed , Thomas , Marriott , Piantadosi , Smith. Situated analytics: Demonstrating immersive analytical tools with augmented reality. Journal of Visual Languages & Computing. 2016 October; 36. 9. Commonwealth of Australia. Guide for industry to the Health Star Rating Calculator (HSRC). [Online].; 2018 [cited 2018 March 11. Available from: http://healthstarrating.gov.au/internet/healthstarrating/publishing.nsf/Content/E380CCCA 07E1E42FCA257DA500196044/$File/Guide%20for%20Industry%20to%20the%20Health%20Star%20Rating%20Calculator.pdf.
ScienceDirect ScienceDirect
Procedia online Computer 00 (2018) 000–000 Available at Science www.sciencedirect.com Procedia Computer Science 00 (2018) 000–000
ScienceDirect
www.elsevier.com/locate/procedia www.elsevier.com/locate/procedia
Procedia Computer Science 135 (2018) 186–193
3rd International Conference on Computer Science and Computational Intelligence 2018 3rd International Conference on Computer Science and Computational Intelligence 2018
Design and Development of FoodGo: A Mobile Application using Design and Development of FoodGo: A Mobile Application using Situated Analytics to Augment Product Information Situated Analytics to Augment Product Information a,b,c a,b,c
Roland P. Abaoa,a,*, Cenie V. Malabananbb, Adrian P. Galidocc Roland P. Abao *, Cenie V. Malabanan , Adrian P. Galido
Mindanao State University – Iligan Institute of Technology, A. Bonifacio Avenue, Tibanga, Iligan City 9200, Philippines Mindanao State University – Iligan Institute of Technology, A. Bonifacio Avenue, Tibanga, Iligan City 9200, Philippines
Abstract Abstract Situated analytics (SA), a combination of augmented reality and visual analytics, is a potential tool in enhancing user understanding of information. study created a mobile application (app) named FoodGo, utilizes SAinto enhancing present product Situated analytics (SA), a This combination of augmented reality and visual analytics, is which a potential tool user information in of mobile devices,This to help consumers making a food choice a grocery shopping scenario. was designed understanding information. study created ainmobile application (app)innamed FoodGo, which utilizes FoodGo SA to present product in such a way that users just need to scan the barcode of aafood using the smartphone’s cameraFoodGo and thewas helpful food information in mobile devices, to help consumers in making foodproduct choice in a grocery shopping scenario. designed information willthat then be augmented the the smartphone display using the concept situated analytics. Anand iterative process of in such a way users just need toinscan barcode of a food product using theofsmartphone’s camera the helpful food design analysis, development, and user interface evaluation was used in and developing the mobile information will prototype then be augmented in the smartphone display using the concept of designing situated analytics. An iterative processapp of prototype. The iterative process was limited threeinterface iterations only and was the data in each iteration was used to improve design analysis, prototype development, andtouser evaluation usedgathered in designing and developing the mobile app the mobile The app iterative in the succeeding iterations. theiterations iteration only cycles, of in theeach Android FoodGo mobile app was prototype. process was limited After to three andthe thefinal dataversion gathered iteration was used to improve developed ensured that alliterations. the components, includes thethe barcode scanning the cloudFoodGo database, were working the mobile and app was in the succeeding After thewhich iteration cycles, final version of and the Android mobile app was properly. using thecomponents, mobile app in helping consumers make ascanning healthierand food assessed in working a mockdevelopedThe andeffectiveness was ensured of that all the which includes the barcode thechoice cloudwas database, were up grocery shopping environment. result indicated that using FoodGo significantly the was success rate of to properly. The effectiveness of usingThe the mobile app in helping consumers make a healthierimproves food choice assessed in ausers mockselect a healthier foodenvironment. product. Further improvements FoodGo mobile app include putting athe tutorial on rate howoftousers use the up grocery shopping The result indicatedfor thattheusing FoodGo significantly improves success to mobile when food opened for theFurther first time and having an to input special conditions as diabetes a more select a app healthier product. improvements for option the FoodGo mobile apphealth include putting asuch tutorial on howfor to use the personalized way of informing thefirst usertime aboutand thehaving food products. mobile app when opened for the an option to input special health conditions such as diabetes for a more personalized way of informing the user about the food products. © 2018 The Authors. Published by Elsevier Ltd. © 2018 2018 The Authors. Published by Elsevier Elsevier Ltd. This is an open accessPublished article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) © The Authors. by Ltd. This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. Intelligence 2018. Intelligence 2018. Keywords: food choice; food grocery shopping Keywords: food choice; food grocery shopping
1. Introduction 1. Introduction There has been a rise in obesity and overweight cases worldwide. According to World Health Organization 1 , 1 There been ahas risenearly in obesity andsince overweight worldwide. Health Organization , worldwidehasobesity tripled 1975. cases Among the adult According populationtoinWorld the year 2016, 39% of the worldwide were obesity has nearly since 1975. Among the in adult population in since the year 2016, 39% of the population overweight andtripled 13% were obese. These increase figure is alarming overweight and obesity population 13% were obese. These increase figure is alarming since overweight obesity are major were risk overweight factors forand non-communicable diseases suchinas cardiovascular diseases, type 2anddiabetes, are major risk factors for non-communicable diseases such as cardiovascular diseases, type 2 diabetes, 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) 1877-0509 © 2018 Thearticle Authors. Published by Elsevier Ltd. Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Intelligence 2018. This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 10.1016/j.procs.2018.08.165
2
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
187
musculosketal disorders and some cancers 2. One of the major reasons for the rise in overweight and obese cases is the increased consumption of processed food products that are high in fat, sugar and salt contents 3. This indicates that the concept of a well-informed and healthy food choice among the consumers can play a significant role in combating these nutrition related diseases 4. Mobile technology is a potential tool in facilitating a well-informed food choice among the consumers. Recently, few studies concerning the use of smartphones to assist shoppers in making healthy food choices have emerged. One of these is the FoodSwitch 5 mobile application (app) which provides consumers with an easy-to-understand nutrition fact of a product and support the selection of healthier choices when shopping for food products. Along with the improvement of the smartphone’s processing power over the years, augmented reality (AR) has also been incorporated into mobile applications to support healthy food choices. The augmented-sugar-intake app 6 augments the amount of sugar a beverage product contains. To a more extent, situated analytics (SA), a term used by ElSayed, Thomas, Smith, Marriott and Piantadosi 7 to define the area of research combining visual analytics and AR, further enhances the decision-making capability of the consumers. The main advantage of SA over the traditional AR visualization is that with SA, users can have an interaction with the information being presented aside from just being able to see the visualization of the data. At the same time, the users can customize the data being presented on the device screen based on what type of information they want to see. With these advantages, SA can be a valuable concept to enhance the understanding of information and help users make an informed food choice in a grocery shopping scenario. In another study of ElSayed, Thomas, Marriott, Piantadosi and Smith 8, they showed that SA can be a promising solution for enhancing the understanding of information among the users in the context of a shopping task. Yet, there are still few number of studies about the use of SA in promoting a well-informed food choice among the consumers in a grocery shopping scenario. In relation to the use of mobile technology in helping consumers make a healthy food choice, this study intended to design and develop FoodGo, a situated analytics mobile application. This study also finds out whether a mobile application that uses the concept of situated analytics to augment the food information can be a tool in helping consumers make a healthy and well-informed food choice in a grocery shopping scenario. 2. Methodology 2.1. System Architecture Fig. 1 shows the system architecture implemented in this study. The final version of the FoodGo mobile app is installed in an Android smartphone. Every time the mobile app is opened, it tries to connect to the cloud database whenever an internet connection is available. Connecting to the cloud database ensures that the mobile app gets the updated database information about the food products. When the connection to the cloud database is already
Fig. 1. System Architecture of the FoodGo Mobile App.
188
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
3
established, it then updates the local cache copy of the database in the smartphone. Updating the local cache copy of the database makes it possible for the mobile app to be usable still even when the internet connection is not available anymore. The mobile app can then scan the barcode of the food products using the smartphone’s rear camera. The mobile app searches for the barcode of the food product in the local database. If the food product is in the database, the product’s information is then augmented into the smartphone screen using the concept of situated analytics. 2.2. Design, Development, and Evaluation of the FoodGo Mobile App An iterative process, as shown in Fig. 2, was used to design and develop the FoodGo mobile app. Three iterative cycles of design analysis, prototype development, and user interface evaluation of the mobile app prototype was conducted before creating the final version of the FoodGo mobile app. Finally, the effectiveness of using the mobile app in helping users make a healthy food choice was assessed in a mock-up grocery shopping environment.
Fig. 2. Design, development, and evaluation process of the FoodGo mobile app.
2.2.1. Design Analysis Each cycle of the iterative design and development process began with design analysis. During design analysis, the mobile app’s user interface was structured using the concept of SA. SA has four primary components namely: analytical interaction, augmented reality (AR) interaction, abstract information, and situated information. These components all in all make SA a promising solution to enhance the understanding of the product information 8 and thus a helpful tool for users in making a well-informed food choice in a grocery shopping scenario. The analytical interaction component of the mobile app allows the user to choose what product information is to be augmented on the smartphone display. Each of the choices has a checkbox on its side, and the users just have to check the boxes of the corresponding product information they want to be augmented on the screen for it to be seen. Additionally, the users were also given the option to indicate their shopping budget in order for them to be notified when they are near or has already reached and exceeded their set shopping budget limit. For the AR interaction component, the mobile app allows the user to add/remove a product currently selected to/from the virtual shopping cart. When a product is to be added in the virtual cart, the user just need to indicate the number of items in the number picker scroll and click the ‘add to cart’ button. Likewise, when a product is to be removed from the virtual cart, the user just need to indicate the number of items and click the ‘remove from cart’ button. The abstract information component shows the overall status of the virtual cart which is composed of the total number of items in cart and the total price of all the products in the cart. When a shopping budget is specified by the user, the mobile app additionally shows a dynamic horizontal budget bar situated at the top of the screen. The budget bar shows the percentage of the total price as compared to the set budget limit. As items are added into the cart, the budget bar grows and changes its color as well. The budget bar is set to color green when the total amount of products is still far below the budget limit; the budget bar then changes its color to amber when the total amount of products is already halfway the budget limit; and lastly the budget bar changes its color to red when the total amount products equals or exceeds already the budget limit. Similarly, the budget bar decreases and changes its color accordingly when items are removed from the virtual shopping cart.
4
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
189
The situated information component shows the product information the user has chosen from the analytical interaction component. A horizontal scroll container located at the bottom of the screen was used to contain the food product information to be displayed. 2.2.2. Prototype Development Each iteration of the FoodGo prototype was developed using Android Studio, an open source mobile app development environment by Google to build native Android mobile apps. The mobile app was developed in such a way that the user just needs to scan the barcode of the food product using the smartphone’s camera and the situated information component of the corresponding product is then automatically displayed in the smartphone screen. With the analytical interaction component, the users are given the ability to choose what information of the food product are to be augmented into the smartphone display. Users were also given the ability to the add/remove a product to/from the virtual shopping cart as part of the AR interaction component. Overtime, the total number of items and the total price of the products in the cart were displayed as part of the abstract information component. Google Mobile Vision’s Barcode Application Program Interface (API) was used for reading the barcode of the products because of its capability to detect barcodes in real-time without a need for an internet connection. Moreover, Google’s Barcode API can detect a wide format of barcodes including EAN-13, EAN-8, UPC-A, and UPC-E which covers all the possible barcode formats a grocery product could have. For the mobile app’s cloud database, Google’s Firebase Realtime Database was used to store the information of the food products. Firebase Realtime Database is a cloud-hosted database that allows synchronization of data between multiple users in real-time. This means that when a certain product information needs to be updated, a change of data in the mobile app’s Firebase database will synchronize the local cache database on all the devices using the mobile app automatically once the device goes online. Furthermore, since Firebase Realtime Database can make a local cache copy of the database on the device, users can still use the FoodGo mobile app even though they go offline. 2.2.3. User Interface Evaluation Thirty (30) university students evaluated the user interface (UI) design of the FoodGo mobile app: ten (10) university students for each UI evaluation iteration. For each UI evaluation, the FoodGo mobile app prototype was presented to the participants and allowed them to explore the mobile app. Each participant was then interviewed with a questionnaire aimed to assess and solicit comments from the participants regarding the UI design of the FoodGo mobile app. The questions were constructed to assess the general UI design, the welcome screen, the situated information, abstract information, analytical interaction, and the AR interaction aspects of the mobile app. The comments and suggestions from the participants were compiled and assessed whether it calls for further improvement of the mobile app UI design in the next iteration. Comments and suggestions that are easy and attainable within a short span of time were considered in the next design analysis iteration. On the other hand, comments and suggestions that requires an intensive work and a major rework of the mobile app was considered as a recommendation for future studies. 2.2.4. Final Mobile App Development The final FoodGo mobile app was developed after three (3) cycles of the iterative design and development process. Android Studio, Google Mobile Vision’s Barcode API, and Google Firebase Database were used in developing the final version of the mobile app. 2.2.5. Assessing the Effectiveness of using the Mobile App Another set of thirty (30) university students were randomly selected to assess the effectiveness of using the FoodGo mobile app in a mock-up grocery shopping scenario. Twenty (20) different tasks, which were categorized into ten (10) food categories to represent the common packed food products being purchased in a grocery shopping scenario, were given to the participants. The food categories are the following: cereals, chips, cookies, chocolates, noodles, dairy food, dairy beverage, juices, canned meat, and canned fish. For each food category, a participant was
190
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
5
presented with two similar food items within the food category and was tasked to select the healthier food item using two methods. Method 1, which comprises tasks 1 to 10 was set as the controlled group of tasks while Method 2, which comprises tasks 11 to 20, was set as the experimental group of tasks. For Method 1, the participants were made to select the healthier food item manually without using the FoodGo mobile app. The participants were allowed to look freely at the nutritional information found at back of the packaging of the food products and were tasked to select the healthier food item according to their own judgement. For Method 2, on the other hand, the participants were also made to select the healthier food item but now with the help of the FoodGo mobile app. The set of food items used in the first method were ensured to be not the same with the set of food items used in the second method in order to eliminate any food item familiarity a participant may have gained while performing the previous group of tasks. The effectiveness of using the mobile app was measured by the number of successful tasks the participants were able to accomplish. For a certain task to be considered successful, a participant must be able to correctly select the healthier food product being presented to him/her. The Health Star Rating calculator 9, a kind of front of pack label that rates the overall nutritional profile of a food product, was used as the basis for identifying which among two grocery food products is healthier. A two-tailed paired t-test statistical tool was used to determine if there is a significant difference between using and not using the FoodGo mobile app on the success rate of the users in selecting a healthier grocery food product. In a paired t-test, the null hypothesis stating that ‘there is no significant difference in the success rate when using and when not using the mobile app’ is to be rejected when the probability-value (p-value) of the null hypothesis to occur is less than the set level of significance, or the alpha, which is set to 5% in this study. 3. Results and Discussion 3.1. First Iteration Result The initial mobile app UI, as shown in Fig. 3.a, was designed and developed by the mobile app developer in such a way that the four components of SA are present. The welcome screen first appears when the mobile app is opened. When the “Start Shopping” button is pressed, the FoodGo main screen opens. Three SA components can be seen directly in the main screen: the abstract information, which consists of the total price and the budget status of the virtual cart, is located at the top part of the display; the situated information, which contained the food labels in a horizontal scroll view, is located in the bottom of the display; and the AR interaction component, which gives the user the ability to add/remove the selected food product in the virtual cart, is located above the situated information component. The analytical interaction, which allows the user to select what food labels to display, is contained in a pop out menu which can be accessed by clicking the analytical button located at the end of the food labels scroll view. The list of food label choices that were available to the users in the analytical interaction component included the following: Health Star Rating, Exercise equivalent, energy label, a set of nutrients to limit, a set of nutrients to encourage, and the price tag. The set of nutrients to limit included the following: total fat, saturated fat, trans fat, cholesterol, sodium, carbohydrate, and sugar. The set of nutrients to encourage included the following: dietary fiber, protein, potassium, vitamin A, vitamin C, calcium, and iron. The mentioned nutrients were selected because of its ready availability at the nutrition facts of most of the grocery food products. After the first FoodGo mobile app prototype has been developed, the UI design was evaluated by ten (10) university students. For the general aspect of the mobile app, most participants said that the mobile app was very helpful specially for those who are health conscious and those who are budgeting their money. For the welcome screen, comments indicated that many participants find the color of the background to be dull. For the abstract information component, comments included a suggestion to put a dark background on the text for easy reading. For the situated information component, there was a suggestion to increase the font size of the food labels. For the analytical interaction component, there were comments to place the analytical button to an easier to find place in the screen. For the AR interaction component, there were comments to make adding and removing a food product much easier since many participants did not know what to do with the buttons initially. Other general comments indicated that the mobile app sometimes take a long time focusing on the barcode and therefore suggested to find a way to make the barcode scanning a little faster.
6
Roland P. Abao et al. /Computer Procedia Science Computer 135 (2018) 186–193 Author name / Procedia 00Science (2018) 000–000
191
Fig. 3. The FoodGo mobile app (a) first iterated design, (b) second iterated design, (c) third iterated design, and (d) final UI design
3.2. Second Iteration Result Comments and suggestions from the first UI evaluation were considered in the design analysis of the second iteration. Changes in the design included the following: the background color of the welcome screen was changed to white and a picture of food items were added to at the top and bottom of the display; the overall theme color of the mobile app was also changed from black to green to enhance the user experience of using the mobile in a grocery shopping scenario; a green background was used at the back of the abstract information and the situated information components as well for easy reading of the texts; the analytical button used to open the analytical interaction panel was repositioned in an easier to locate part of the screen; for the AR interaction component, indicating the number of items to add or remove was made easier by putting a scroll number picker in place of a number picker button; and barcode scanning was improved by adding a ‘tap to focus’ feature in the main screen which allows the user to tap the main display to trigger the auto focus capability of the smartphone camera. The second iterated UI design is shown in Fig. 3.b. After the second FoodGo mobile app prototype has been developed, the UI design was again evaluated by another set of ten (10) university students. For the general aspect of the mobile app, comments indicate that the participants find the general navigation to be easy to use. Many participants find the design of the welcome screen to be nice, colorful and attractive. For the situated information component, there was a suggestion to reposition the price tag in such a way that it can be easily seen in the display. There was a suggestion to put the total calories of the food products within the virtual cart as well beside the total price in the abstract information component. The participants find the analytical interaction component to be generally fine. For the AR interaction component, there was a suggestion to have a confirmation dialog box when adding or removing a food product in the virtual cart.
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
192
7
3.3. Third Iteration Result Comments and suggestions from the second UI evaluation were considered in the design analysis of the third iteration. Minor changes in the design included the following: the price tag was repositioned at the top of the food labels scroll view for easier visibility when scanning a food product; the total calories of the products within the virtual cart was added in the abstract information component; and an additional confirmation dialog box was added every time a food product is added or removed in the virtual cart. The third iterated UI design is shown in Fig. 3.c. After the third FoodGo mobile app prototype has been developed, the UI design was again evaluated by another set of ten (10) university students. For the general aspect of the mobile app, most participants interviewed find the mobile app to be amazing, helpful and beneficial to grocery shoppers and find the overall navigations to be user friendly and understandable. There was a suggestion to ensure that the text in the situated information and the abstract information components do not overflow when the text becomes long. For the AR interaction component, there was a suggestion to increase the number of items that can be added in the number picker scroll. Other general comments included a suggestion to let the food labels remain in the screen until another barcode is scanned and a suggestion to easily recall the previous food products scanned without the need to rescan the barcode again. 3.4. Final FoodGo Mobile App Result Fig. 3.d shows the final iterated UI design of the FoodGo mobile app. Comments and suggestions from the third UI evaluation were considered in the design analysis of the final mobile app. Changes in the design included the following: the font size of the texts in the food labels were increased for easy reading; food label icons were refined and was made clickable giving users the capability to see the description of the selected food labels; for the analytical interaction component, nutrients within the nutrients to limit and encourage categories can now be selected individually; the food labels were allowed to remain the display until another barcode is being scanned; and a swipe feature was added in the product name panel to easily access the history of scanned food products making it easier to compare one product from the other. 3.5. Effectiveness of using the FoodGo Mobile App In evaluating the effectiveness attribute, the mean difference being compared was the success rate of 30 participants to select the healthier food product when using and when not using the FoodGo mobile app. The paired t-test calculation resulted in a t-value of 5.3752 and a p-value of 0.00001. From the result of the t-test statistical tool, there is enough evidence to reject the null hypothesis since the p-value is less than the 5% level of significance. The alternative hypothesis stating that ‘there is a significant difference between the success rate of the users to select the healthier food product when using and when not using the FoodGo mobile app’, then holds true. The average success rate of the participants when selecting the healthier food product manually is 65.33% while the average success rate of the participants to select the healthier food products when using the FoodGo mobile app is significantly higher at 84.33%, as can be seen in Fig. 4.
Fig. 4. Bar graph showing the average success rate of selecting the healthier food choice when using and not using FoodGo.
8
Roland P. Abao et al. / Procedia Computer Science 135 (2018) 186–193 Author name / Procedia Computer Science 00 (2018) 000–000
193
4. Conclusion and Recommendation An Android version of the FoodGo mobile app was designed and developed in this study in such a way that users just need to scan the barcode of a food product using the smartphone’s camera and the helpful food information were then augmented in the smartphone display using the concept of situated analytics. The mobile app connects to cloud database in order to get an updated information about the food products regularly. The mobile app also creates a local cache copy of the database in order to make the mobile app still usable whenever internet connection is not available. There is a significant difference between using and not using the FoodGo mobile app on the success rate of the users in selecting a healthier grocery food product. The average success rate of the participants to select the healthier food product when using the FoodGo mobile app is significantly higher than when not using the mobile app. It can be concluded that a mobile app that uses the concept of situated analytics, such as the FoodGo mobile app, can be a helpful tool in supporting consumers in making healthy food choices in a grocery shopping scenario. Recommendations to further improve FoodGo include the following: include a tutorial on how to use the mobile app especially when opening the mobile app for the first time; have an option to input special health conditions such as diabetes for a more personalized way of informing the user about the food products; and to allow the users to rearrange the sequence of the food labels. Evaluating the FoodGo mobile app in a grocery shopping scenario is also a recommendation for future studies. Acknowledgements The first author would like to thank the Department of Science and Technology – Engineering Research and Development for Technology consortium for the financial funding of conducting the study. References 1. World Health Organization. Obesity and Overweight Fact Sheet. [Online].; 2018 [cited 2018 February 18. Available from: http://www.who.int/mediacentre/factsheets/fs311/en/. 2. World Health Organization Regional Office for the Western Pacific. Overweight and obesity in the Western Pacific Region. [Online].; 2017 [cited 2018 February 18. Available from: http://iris.wpro.who.int/bitstream/handle/10665.1/13583/9789290618133-eng.pdf. 3. Ellulu M, Abed Y, Rahmat A, Ranneh Y, Ali F. Epidemiology of obesity in developing countries: challenges and prevention. Global Epidemic Obesity. 2014 March; 2(1)(2). 4. Bos C, Van der Lans I, Van Rijnsoever F, Van Trijp H. Bos C, Van der Lans IA, Van Rijnsoever FJ, Van Trijp HC. Understanding consumer acceptance of intervention strategies for healthy food choices: a qualitative study. BMC Public Health. 2013 December; 13(1)(1073). 5. Dunford E, Trevena H, Goodsell C, Ng KH, Webster J, Millis A, et al. FoodSwitch: a mobile phone app to enable consumers to make healthier food choices and crowdsourcing of national food composition data. JMIR mHealth and uHealth. 2014 July; 2(3). 6. David EC, Hérnandez-Briones , Ochoa-Ortiz , Gutiérrez-Gómez. Escárcega-Centeno D, Hérnandez-Briones A, Ochoa-Ortiz E, GutiérrezGómez Y. Augmented-Sugar Intake: A Mobile Application to Teach Population about Sugar Sweetened Beverages. Procedia Computer Science. 2015 Jan; 75. 7. ElSayed , Thomas , Smith , Marriott , Piantadosi. Using augmented reality to support situated analytics. In Virtual Reality (VR), 2015 iEE. 2015 March: p. 175-176. 8. ElSayed , Thomas , Marriott , Piantadosi , Smith. Situated analytics: Demonstrating immersive analytical tools with augmented reality. Journal of Visual Languages & Computing. 2016 October; 36. 9. Commonwealth of Australia. Guide for industry to the Health Star Rating Calculator (HSRC). [Online].; 2018 [cited 2018 March 11. Available from: http://healthstarrating.gov.au/internet/healthstarrating/publishing.nsf/Content/E380CCCA 07E1E42FCA257DA500196044/$File/Guide%20for%20Industry%20to%20the%20Health%20Star%20Rating%20Calculator.pdf.