Enhancing Grocery Accessibility with OCR: A User-Centered Design Approach

Grapeful, a grocery app, is an online grocery store that not only simplifies shopping but also provides a seamless transition from pantry/grocery planning to purchasing. The user can browse through various categories of groceries, view items, add them to the cart (manually), customize quantity, and pay during checkout. Our list to cart feature enables users to directly add items from their grocery list to the cart. The user will scan their grocery list, and the app will fill the cart with the items listed in the list. This feature is valid for lists written in the English language only. Grapeful is a mobile application that uses Flutter and Dart for the front-end of the application and MongoDB for the database. Node.js is used for the back-end. The list-to-cart feature uses the OCR algorithm to identify the items listed in the grocery list and then add them to the customer's cart.


Introduction
Every home refills its supply of groceries on a weekly, if not daily, basis. Before the advent of online grocery shopping, customers would have to actually visit several grocery stores or a supermarket. In areas where grocery stores are few and distributed over vast distances and taking into account the hectic schedules of residents and commuting routes, accessing a grocery store is an added inconvenience. The solution to this is online grocery shopping. These notes have been very useful to people while shopping to ensure that each and every item of need has been collected.However, when everything has become automated and applications strive to become more user-friendly, there is one area that can be improved on. That is how customers add their groceries to cart. On a real, physical piece of paper, adding something to the cart requires the user to quickly switch their focus between each item on the paper and the app's search function. To account for human error, the user must manually confirm that each item has been put to the cart and run several checks. However, if the user has added their grocery item to a notes app, they must move back and forth between the two applications numerous times, increasing latency in completion of tasks and making the user temporarily confused while they re-adjust to change in interface and find their previous checkpoint. These issues are resolved with Grapeful's "list to cart" feature, which also makes the grocery app more user-friendly, using OCR. The items on the user's shopping list will be added to the cart once they quickly take a picture of it and upload it to the app, whether it is on a piece of paper, a post-it note on the fridge, or in their daily planner. Additionally, the Volume 5, Issue 3, May-June 2023 2 user has the option of uploading screenshots of their notes app. Additionally, they can submit images of their shopping list from their phone's gallery.

Motivation
As everything has become automated and applications strive to become more user-friendly, there is one area that can be improved on. That is how customers add their groceries to cart. On a real, physical piece of paper, adding something to the cart requires the user to quickly switch their focus between each item on the paper and the app's search function. To account for human error, the user must manually confirm that each item has been put to the cart and run several checks. However, if the user has added their grocery item to a notes app, they must move back and forth between the two applications numerous times, increasing latency in completion of tasks and making the user temporarily confused while they readjust to change in interface and find their previous checkpoint. These issues are resolved with Grapeful's "list to cart" feature, which also makes the grocery app more user-friendly.

Problem Statement
To develop a grocery app that facilitates the search of groceries and filling the cart automatically from the image of the grocery list.

Objectives of the Project
To develop a user-friendly app that can help users search for products innovatively. 2. To help users fill their carts easily via a LIST-TO-CART FEATURE that scans the users grocery list and fills their basket with the noted groceries. (The list should be in english only)

Review of Literature
The research case in [1] is a food delivery app with a live chat feature where customers can communicate with the app admins. Interfaces can be improved, and functionality can be added to allow use on other operating systems. User login, order placement, order confirmation, and manage information are among the four modules present in this application. [2] offers users product recommendations and allows store managers to monitor stock levels online. However, ordering from the website requires a PC and means a person must have access to one. Based on recent orders, it recommends products to users and displays the quantity of earlier purchases at home using hardware algorithms. In research case [3], grocery items are scanned and then added to the shopping cart via an app. The application navigates to the item's location and automatically bills the purchased items. LEAST The Shopping List App [4] is a Grocery List Shopping assistant that is compatible with Android and iOS, and it helps shoppers find previously purchased items by tracking expiration dates and works as a smart basket. The machine learning algorithm used here is K-NN. Vendors can easily list their products and sell them directly to consumers through [5] and [18], which is an online marketplace that connects vendors direct to the user. The research case [6] helps users easily find groceries by categorizing them, as well as has added a category for newly introduced products. However, it does not recommend products, so users do not receive individualized recommendations. Our comparative case studies revealed that [7] is a shopping website that allows users to search for products and drag and drop items into their carts. However, MySQL is the database that the website uses, and it doesn't support large databases. [8] includes a Recommendation System that is divided into four parts. One is an information manager which is responsible for handling user data. The second is the database which stores the purchase history of a customer. The third is an analyser which works on the database to assist in promotion and stock replenishment. The fourth and last part is a recommender which recommends products based on the data analysis and shows products which are most likely to be purchased. [9]A study has been conducted to examine and analyze the performance of different product and recommendation algorithms. The Machine Learning Algorithms implementations have been explained by using the architectures of a banking and movie recommendation system. These are sample protocol demonstrations and the data set considered is small. The paper explored the algorithms like Support Vector Machines, Naive Bayes Classifiers, Collaborative Filtering, and Content Based Recommender.

Proposed Methodology 5.1 Introduction
The grocery shopping experience has evolved greatly in recent years with the advent of technology. One such innovation is the development of a grocery app that can scan a shopping list and add items automatically. This app has the potential to simplify and streamline the shopping process, making it easier for consumers to add items manually or by just clicking a picture of the shopping list. The first stage is to conduct a comprehensive review of the existing literature on grocery apps and OCR technology. This review will assist in identifying the strengths and weaknesses of extant grocery apps and OCR technology, as well as any unaddressed research gaps. After completing the literature review, the research team will conduct user research to collect feedback on extant grocery apps and identify user preferences. This study will include user interviews, surveys, and usability testing to determine how consumers interact with grocery applications and how OCR technology can be utilised to enhance the shopping experience. In addition, the research team will use this feedback to identify potential barriers to the app's adoption and to devise strategies for overcoming these barriers.
On the basis of the findings from the literature review and user research, the research team will develop an OCR-enabled grocery app prototype. The application will be designed using a user-centered design approach, which means it will be created with the requirements and preferences of users in mind. The application will be evaluated by a group of users in terms of its usability, functionality, and efficacy.  Fig. 1: System Sequence Diagram The user selects a grocery list, which is converted to text by an OCR engine. The app queries an item database for information about the items on the list, adds them to the cart, and displays the updated cart to the user.

Fig. 2: Block diagram
Block diagram showing the two ways to add products to the cart in the grocery app -by manually adding items or by using the list-to-cart feature, which allows the user to convert a picture or uploaded image of a list to text and add items to the cart.

Fig. 3: Database Structure
MongoDB database structure with three collections -User, Categories, and Products. The User collection stores user information, the Categories collection stores the different categories of products available, and the Products collection stores the details of individual products, including their category and price information.

Theory of Operation
OCR (Optical Character recognition) technology plays a crucial role in the functionality of the grocery app mentioned in the introduction. The app allows users to take a picture of their shopping list and using OCR, the text from the image is extracted and converted into machine-readable data. This data is then used by the app to automatically add the items in the list to the virtual shopping cart without the need for manual input. This innovative use of OCR technology makes grocery shopping much more convenient and time-efficient for consumers. Instead of manually typing in each item, the app does the work for them, freeing up time for other tasks. Moreover, the accuracy of the OCR technology reduces the chances of errors or missed items, making the shopping experience smoother and more efficient. The integration of OCR technology is a testament to how technology can improve and simplify everyday tasks, and it will be interesting to see its impact on the grocery shopping experience. As a whole, the proposed methodology for the research paper entails a comprehensive strategy for developing and evaluating an OCR-powered grocery app that enhances the purchasing experience. The research team seeks to develop an app that is both effective and user-friendly by incorporating user feedback and employing a user-centered design approach. The findings of this study will shed light on the potential benefits and drawbacks of using OCR technology in grocery apps and may inform the development of future grocery apps designed to increase consumer accessibility and convenience.

Fig.4: Splash Screen
The Grapeful grocery app's splash screen welcomes users with a colorful and inviting design. The Grapeful grocery app's home screen greets users with an intuitive and easy-to-use interface. Users can quickly browse and select from various categories. The home screen also features a search bar.

Fig.6: Product Screen
The product screen on the Grapeful grocery app provides users with detailed information about each item, including a high-quality picture, a description of the product, and its price. The Grapeful grocery app's cart screen provides users with a clear and concise overview of their current order. This screen displays a picture, name of the product, and price for each item in the cart, as well as the quantity selected and the total price. Users can easily add or remove items from their order and see the updated total in real-time, making it easy to stay within their budget.

Fig.8: List to Cart Screen
The list-to-cart screen on the Grapeful grocery app provides users with a convenient and time-saving way to add items to their cart. Users can choose to take a photo of their grocery list or upload an image from their gallery, and the app will convert the text into a list of items that can be easily added to the cart. This screen makes it easy for users to quickly add items to their order without manually searching for each product.
The results of this study demonstrated that the integration of OCR technology into the grocery app improved the overall purchasing experience for users, while also saving them time and effort through the automatic addition of items to their virtual cart. Furthermore, the app provided users with flexibility and control over their shopping experience, allowing for the manual addition and modification of items in the cart. By incorporating a user-centered design approach, the application was tailored to the specific requirements and preferences of the users, resulting in a high level of satisfaction and acceptance. These findings have significant implications for the development of technology-based solutions aimed at enhancing the accessibility and efficiency of routine tasks for all users. The image recognition for list to cart feature enabled users to add items to their cart from any location and at any time, thereby eliminating the need for multiple trips to the grocery store and providing a more seamless shopping experience.

Fig.9: List to Cart Accuracy
The accuracy of the list to cart feature that uses Google ML Text Recognition is an essential metric to measure the performance of the system. The formula used to calculate the accuracy is: The number of correct predictions / The total number of predictions.
(1) A total of 10 handwritten and 10 printed lists were taken into consideration for the above result. Based on the data provided, the accuracy of the system for handwritten lists is 46%, whereas for printed lists, the accuracy is 100%. This result shows that the Google ML Text Recognition system performs significantly better on printed lists than on handwritten lists. Overall, the accuracy of the system is a crucial factor to consider in optimizing the text to cart feature's performance and enhancing the user's experience

Conclusion
In conclusion, the innovative grocery app that uses images and scanning technology to add items to a shopping cart has the potential to revolutionize the way consumers shop for groceries. By leveraging the power of images and scanning technology, the app offers a user-friendly and efficient way to create shopping lists and add items to a cart. This innovation can help save time and effort for busy consumers and streamline the grocery shopping experience. As the trend towards digitalization and mobile technology continues to grow, it is likely that we will see more grocery apps that leverage similar technologies in the future. However, the unique combination of images and scanning technology used by this app sets it apart from other grocery apps on the market and provides a unique and compelling solution for consumers.

Future work
Integration with other technologies: In the future, it would be valuable to integrate this grocery app with other technologies, such as voice assistants and smart home devices. This would allow users to add items to their through voice commands or y connecting the app to their smart home devices. Personalized Recommendations: The app could be further improved by incorporating personalized recommendations based on the user's shopping history and preferences. This would allow the app to suggest items that the user may need or want to purchase, making the shopping experience even more efficient. Improved Image Recognition: To increase the accuracy of item recognition, future work should focus on improving the image recognition technology used in the app. This could be achieved by incorporating machine learning algorithms and computer vision techniques to enhance the accuracy of item identification. In-store Navigation: In the future, it would be valuable to integrate the app with in-store navigation technology. This would allow users to navigate the store more efficiently and find the items they need more quickly.