Design and Development of Groceries Ordering System with QR Code

E-commerce is one of the innovations that has started to become a new norm in this millennium. Due to the time-consuming physical shopping activities, the increase in living expenses, and the increase of responsibilities, people tend to find new ways to adapt to this new norm. Thus, buying groceries online has also been the preferred way for many people nowadays as it could save time and reduce daily hassles. This paper discusses the design and development of a web-based Groceries Ordering System with QR Code that was built using the web-based applications such as PHP, HTML and MySQL. The design and development of the prototype system involves three main phases, which are the system design, system development and system testing and took into consideration five criteria of the end-user satisfaction of an online shopping system, which are the system’s content, accuracy of information, format of the information displayed, ease of use and timeliness. The prototype system will also incorporate the QR code technology where it provides functions for information of products’ purchases and transactions. Upon completion of the prototype system, testing for usability among potential end-users was conducted, where it focusses on system’s usefulness, information quality and interface quality. Forty participants have completed the usability testing, and the results have showed that the Groceries Ordering System with QR Code has fulfilled all the five criteria of end user’s satisfaction.


INTRODUCTION
Technology-based life due to the rich access of the Internet and communication networks allow people to enjoy life in the form of good social connectivity, entertainment, information, knowledge resources, and of course, new opportunities for businesses (Lim, Osman, Salahuddin, Romle, Abdullah, 2016). Computers and mobile devices are part of people's lives today, which help to ease their work and daily activities. Various types of the newest web-based and mobile applications, especially for e-commerce have been developed to accommodate the modern lifestyles such as Lazada, Shopee, Alibaba, and many other online shopping platforms (Lim, Osman, Salahuddin, Romle, Abdullah, 2016).
Generally, online shopping platforms such as Amazon, Alibaba and many others have many advantages such as helping to reduce transportation costs, more time-saving and hassle-free (Vasic, Kilibarda & Kaurin, 2019). Moreover, online groceries shopping has also become a new way for people to avoid traffic jams, unnecessary spending and reducing the costs for fuel and car services (Vasic et. al, 2019). Furthermore, people nowadays who are too occupied juggling between work and families, often find it difficult to go grocery shopping. Even millennials found the idea of having to rush to do groceries shopping after a busy day is not that appealing (Muhammad, Sujak & Rahman, 2016). Therefore, having the advantage to perform online grocery shopping at home has helped to ease these burdens.
In addition, most online groceries stores do not have QR codes generators where each item in the online system can have their own QR codes that consist of the item's information such as price, brand and expiry date. QR code, stands for Quick Response code is an advanced feature in an online system platform that can be used to replace the paper-based receipts (Gundaniya, 2020). People rarely keep their receipts after buying, however, receipts may become handy when they want to do budgeting or financial management. By using the online shopping system, the purchase history is saved automatically, which can help the users to stay organized (Gundaniya, 2020). Therefore, this paper discusses the design and development of an online groceries ordering system equipped with QR code that represents the purchases of items and transactions' information. Via this technology, users not only can make online purchases conveniently, but will also be provided with timely information of items' purchases and transactions information. Users can just scan the QR code once the groceries purchased being delivered at home, providing an easier way for online shopping and transactions. Furthermore, the design and development of the prototype system was also based on the criteria of end user satisfaction on online shopping system that was highlighted by Liu and Guo (2008). These criteria took into consideration five main aspects of user's satisfactions on online shopping system, which are; the system's contents that emphasize on the sufficiency of information displayed, accuracy of the information available on the website, the format of the information displayed, ease of use of the system and timeliness. Usability evaluation has also been done to prove the usefulness of the prototype system towards end users' satisfaction and quality of the information and interface of the system.

RELATED WORKS
E-commerce, otherwise called electronic trade or web business, alludes to the purchasing and selling of merchandise or administrations by utilizing the web, and the exchange of cash and information to execute these exchanges. Web-based business is frequently used to allude to the offer of physical items on the web, however, it can likewise portray any sort of business exchange that is encouraged through the web (Yousuf, 2021). This e-commerce business works in every one of the four of the accompanying significant market sections, Business to business, Business to Consumer, Consumer to Consumer, and Consumer to Business, where one of the growing trends of e-commerce is the online grocery store (Yousuf, 2021).
Some of the benefits that lead to purchasing groceries online are the extra convenient environment that provides online bookings and home deliveries, thus more time saving, hassle free and helps limit your luxury spending (Yousuf, 2021). In addition to a robust online shopping system, QR code technology has been implemented as part of the system's order bookings, products' information, online payments, and deliveries. A recent study done by Kulkarni and Banegaon (2021) has proposed the integration of QR codes technology as a mean for hassle free shopping activities, where advertisements about the online shop will provide the QR codes. If the customers are interested in doing the groceries shopping, they will scan the QR code that leads them to the online store. Therefore, the convenience offered by the system will benefits the hectic lives of consumers, furthermore during the pandemic era.

Criteria of End User Satisfaction Towards Online Shopping System
Short review on the criteria of the end user satisfaction towards online shopping system has also been done. Table 1 below shows three articles that have been reviewed and compared in finding the suitable criteria that can be best applied to the prototype system of the online groceries system.

No Author
Criteria of end user satisfaction on online shopping system 1 Liu and Guo (2008) Contents, accuracy, format, ease of use, timeliness 2 Al Karim (2013) Convenience and Reliability 3 Al-Jahwari, Khan, Al Kalbani and Al Khansouri (2018) Product quality, application safety, delivery guarantee, offers Based on Table 1 above, Liu and Guo (2008) have proposed five main criteria in determining the end user's satisfaction towards online shopping system. These criteria, which are contents of the information displayed on online shopping system, the accuracy of the information and format of the information displayed, easy of use and timeliness help to reflect the overall satisfaction of online consumers towards online shopping systems. Other than that, Al Karim (2013) has also emphasized on the convenience and reliability of the online system that motivates online shopping and inhibitions. From his findings, it was discovered that online shopping has been convenience to consumers because of it is more time saving, fun to shop, information availability, less expensive, easier to use and stress free. Meanwhile, reliability wise, most online consumers found that the online payment security, privacy and trust, unclear warranty and return policy are among the reasons of inhibitions among online consumers.
Besides that, Al-Jahwari et.al (2018) has focussed on the quality assurance of the online shopping system that could help to improve online consumers satisfaction such as product quality, application safety, delivery guarantee and offers available on the online shopping systems. Their findings have showed that from the perspectives of youth, product quality and service guarantee play important roles in determining satisfaction towards online shopping. Hence, the service guarantees concerning of package and delivery process along with the products' offers motivated the respondents to go for online shopping repeatedly.
Therefore, for the purpose of this study, based on the above reviews of criteria of end user satisfaction towards online shopping system, the five main criteria proposed by Liu and Guo (2008) seem to be more accurate and suitable to be adapted in the prototype system design and development. Since the prototype system proposed in this paper do not emphasize on the reliability and security of the online payment transactions and more focus on the contents, accuracy, format, ease of use and timeliness of the online shopping, thus, it is clear that Liu and Guo (2008) criteria is more adaptive in this study.

METHODOLOGY
This section will explain the phases involved in the system design and development. There are three main steps, which are; i) System design that involves database design using the entity-relationship diagram (ERD) ii) System development that involves prototype development iii) System usability testing with endusers.

System Design
In this phase, the end-user's requirements were first being observed and investigated. Among the items being questioned to the end-users apart from their demographic background are i) the online system's contents, ii) accuracy, iii) system's format, iv) ease of use and v) timeliness (Liu & Guo, 2008). The criteria have been used in the preliminary investigation among forty respondents in order to investigate the prototype system's requirements.
Among forty respondents who have taken part in the preliminary investigation, 90% of them are aged between 20-29 and they are the age group who found online shopping to be helping them the most (ease of use), especially during the pandemic Covid-19. Moreover, more than 80% of the respondents have also agreed that they need better service in terms of timely information about their online purchases. Therefore, based on these findings, the online groceries ordering system is designed where the integration of QR code is included. Figure 1 shows the entity-relationship diagram designed for the online groceries system. Based on Figure 1 above, there are ten entities designed for the system's database, which are accounts, categories, products, products_categories, products_image, products_options, transactions, transactions_item, shipping, and qrcode. The qrcode will be automatically generated once the online transaction has occurred. It will contain information such as transactions id, item id and item image. The aim is to provide the end-users with timely information about their online purchases and transactions. Once the items are delivered, the end-users can present the QR code to be scanned in order to confirm the purchases.

System Development
As for the development of the prototype system, the online groceries ordering system with QR code was developed using Hypertext Preprocessor (PHP) language, PHP Data Object (PDO), and MySQL as its database. More, Hypertext Markup Language (HTML) and Cascading Style Sheet (CSS) are being used to create the interface for the prototype development. Meanwhile, JavaScript is being used to create some functions in the online groceries ordering system; for instance, calculation of the total price and payment. This system uses free web hosting to make it available online. The prototype of the system also took consideration of these five criteria of end-user satisfaction towards online shopping system, which are the system's content, accuracy, format, ease of use and timeliness. Further explanation how these criteria are being employed in the prototype system is discussed in the next section.

System Testing
The prototype system has undergone usability testing to evaluate the usefulness, information quality and interface quality of the system. Forty respondents have taken part in the system testing where online questionnaires were distributed and link to the prototype system is provided. As the respondents scroll and explore the online groceries ordering system, they must answer the questionnaires as well, which uses a 5point Likert Scale, where 5 point is for strongly agree, 4 point is for agree, 3 point is for natural or average. Meanwhile, 2 point is for disagree and 1 point for strongly disagree. Respondents were also been asked an open-ended question where they may suggest and give opinions for future enhancements of the system. Further discussions on the analysis of the system usability, will be discussed in the next section.

Prototype of the Online Groceries Ordering System
The development of the prototype of the Online Groceries Ordering System with QR Code will consider all these five criteria as suggested by (Liu & Guo, 2008), which are: i) Online system's contents which took into consideration whether the prototype system provides sufficient information of items displayed on the website.
ii) The system's accuracy where the information provided is accurate. iii) The system's format where the system's output provides useful format. iv) The system's ease of use whether it is user-friendly and easy to use. v) The system's timeliness where the system provides users with up-to-date information of the purchases and transactions. provides brief information about the system itself. At the homepage, users can also find the recently added items in the system to ensure that the online system is always providing useful contents that are accurate and up to date.

Figure 3: Products information
Other than that, to promote timely and accurate information on the website, the system also provides users with the list of products available in the system, where further information cam be obtained by clicking on the product's image. Meanwhile, in order to make any online purchases, users need to create their account first, where they need to fill in an online form that is easy to use and navigate as depicted in Figure 4. Once the user has made an online purchase, the list of items will be shown on a page as shown in Figure 5 where the QR code is also being auto generated, providing an accurate, useful format, user-friendly and timeliness criteria. Furthermore, to promote the timeliness of using the Online Groceries Ordering System, the system will also update the status of the items whether it has been successfully delivered or not as depicted in Figure 6. The status can only be done once the QR code is scanned by the delivery personnel to the end-users.

Usability Testing
As mentioned earlier, there are three sub-characteristics involved in the usability testing questionnaires, which are usefulness of the system, information quality and interface quality. Nonetheless, before further explanation for the analysis of usability testing, Table 1 below shows the demographic background of the respondents.  The information (such as online help, on-screen messages, and other documentation) provided with the system was clear.

10
It was easy for me to find the information I needed. 4.4

11
The information was effective in helping me complete the tasks and scenarios.

4.45
12 The organization of information on the system screens was clear.

4.48
Interface Quality  Table 2 shows the result of the usability testing where the first sub-characteristic is the usefulness of system. There are six questions for these criteria, which the highest mean score is 4.57 where most of the respondents strongly agreed that the Online Groceries Ordering System with QR Code is satisfying and easy to use. The system is also simple, and users can easily complete the task and becoming more productive. This has also proved that the prototype system has fulfilled the criteria which are ease of use and timeliness.
The second sub-characteristic of the usability test is the information quality. Table 2 shows the calculated mean score of the respondents for each question. From the respondents' feedback, it can be concluded that all participants agreed that the Groceries Ordering System with QR Code is successful in providing alerts if the operation is unsuccessful (mean score = 4.3). Meanwhile, if a user made a mistake when using the system, the user could recover easily and quickly (mean score = 4.35). The information given throughout the website is also easy to understand (mean score = 4.4). Respondents have also found it easy to obtain information in the system (mean score = 4.4). Meanwhile, the on-screen information has also deemed as effective (mean score = 4.45) and organization of information on the system screens was also clear (mean score = 4.48). These have also proved that the prototype system has fulfilled the contents, accurate, format criteria.
Finally, for the last sub-characteristic of the usability testing, the interface quality of the Groceries Ordering System with the QR Code is being evaluated. From Table 2, it can be concluded that the participants have strongly agreed that the interface of the system was pleasant (mean score = 4.5), participants also preferred using the interface of the system (mean score = 4.43). They were also agreed that the system has all the functions and capabilities as expected (mean score = 4.35). Overall, the respondents are also satisfied using the Groceries Ordering System with QR Code (mean score = 4.45).

CONCLUSION AND RECOMMENDATIONS
The Grocery Ordering System with QR code technology has shown potential benefits to the society where, the customers can make online purchasing via a user-friendly environment, hassle free and more time saving. The groceries can also be updated by the online shop owner, where each of the goods or products will have an automated QR code for further information and quick response. The deliveries of the groceries can also be made smoothly as the system also provides the customers with the invoice with QR code that can be scanned afterwards by the delivery couriers to secure the payments and deliveries. Therefore, this system is also safe for online purchases thus successfully address the criteria of the end-user satisfaction, which are, system's accuracy, usefulness, up-to-date format, user-friendly and timeliness. Future work will focus on the deployment of the system in a real-world environment where the online payments needs to be more reliable and secured to avoid any discrepancy and online scams.