**Design and Development of Groceries Ordering System with QR Code**
***Mahfudzah Othman1\*, Illi Najwa Mohamad Sakri2, Nurzaid Muhd Zain3, Zulfikri Paidi4,***
***Nora Yanti Che Jan5, Nur Khairani Kamarudin6***
*1,2,3 Faculty of Computer and Mathematical Sciences,*
*Universiti Teknologi MARA Perlis Branch, Arau Campus, 02600 Arau, Perlis, Malaysia*
*Corresponding author: \*fudzah@uitm.edu.my*
Received Date: 15 August 2021
Accepted Date: 20 August 2021
Published Date: 30 September 2021
**HIGHLIGHTS**
- > This paper discusses the design and development of the Online Groceries Ordering System with the integration of QR code.
- > Three main phases involved in the design and development of the prototype system, which are system design, system development and system testing.
- > The design and development of the prototype system took into consideration five criteria of the end user satisfaction on online shopping system, which are the system’s content, accuracy, format, ease of use and timeliness.
- > The usability testing focusses on the usefulness of the system, information quality and interface quality.
- > Results from the usability testing have showed that the prototype system have successfully fulfilled all five criteria and end users’ satisfaction.
**ABSTRACT**
*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 and end user’s satisfaction.*
***Keywords:** online groceries ordering, QR code, system design, system development, usability testing*
# 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.
**Table 1**: Lists of Criteria of End User Satisfaction on Online Shopping 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 end-users.
**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.
**Figure 1:** Entity-relationship diagram for Online Groceries System with QR Code
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 5-point 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.
**FINDINGS AND DISCUSSIONS**
**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:**
1) Online system’s contents which took into consideration whether the prototype system provides sufficient information of items displayed on the website.
2) The system’s accuracy where the information provided is accurate.
3) The system’s format where the system’s output provides useful format.
4) The system’s ease of use whether it is user-friendly and easy to use.
5) The system’s timeliness where the system provides users with up-to-date information of the purchases and transactions.
> 
>
> **Figure 2:** Homepage of the Online Groceries Ordering System Prototype
Figure 2 above depicts the homepage of the prototype of the Online Groceries Ordering System where it 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.**
> **Figure 4:** Create user’s account page
**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.**
**Figure 5:** User’s purchases and transactions information with QR code
**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.**
**Figure 6:** Delivery status for each user purchase
**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.
**Table 1**: Respondents demographic background
Gender
Male
Female
42.5%
57.5%
Age
18 – 22
23 – 29
30 – 40
41 – 50
51 and above
35%
52.5%
2.5%
2.5%
7.5%
Occupation
Student
Working
Retired
72.5%
22.5%
5.0%
Among forty of the respondents taken part in the usability testing, 57.5% of them are female, while others are male. Meanwhile, from Table 1 above, it is clearly stated that the highest number of respondents came from the age group of 23 till 29, where most of them are students (scored 72.5%).
**Table 2**: Usability Testing Result
| | | | |
| -------------------- | -- | ---------------------------------------------------------------------------------------------------------------------- | ---- |
| Sub - Characteristic | No | Description | Mean |
| Usefulness of system | 1 | Overall, I am satisfied with how easy it is to use Groceries Ordering System with QR Code. | 4.57 |
| | 2 | It was simple to use Groceries Ordering System with QR Code | 4.53 |
| | 3 | I was able to complete the tasks and scenarios quickly using the Groceries Ordering System with QR Code. | 4.45 |
| | 4 | I felt comfortable using the Groceries Ordering System with QR Code. | 4.43 |
| | 5 | It was easy to learn to use Groceries Ordering System with QR Code. | 4.4 |
| | 6 | I believe I could become productive quickly using Groceries Ordering System with QR Code. | 4.4 |
| Information Quality | 7 | Groceries Ordering System with QR Code gave error messages that clearly told me how to fix problems. | 4.3 |
| | 8 | Whenever I made a mistake using Groceries Ordering System with QR Code, I could recover easily and quickly. | 4.35 |
| | 9 | The information (such as online help, on-screen messages, and other documentation) provided with the system was clear. | 4.4 |
| | 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 | 13 | The interface of Groceries Ordering System with QR Code was pleasant. | 4.5 |
| | 14 | I liked using the interface of the Groceries Ordering System with QR Code. | 4.43 |
| | 15 | This system has all the functions and capabilities I expect it to have. | 4.35 |
| | 16 | Overall, I am satisfied with the Groceries Ordering System with QR Code. | 4.45 |
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.
**REFERENCES**
Al Karim, R. (2013). Customer satisfaction in online shopping: A study into the reasons for motivations and inhibitions. *IOSR Journal of Business and Management (IOSR-JBM),* Volume 11, Issue 6 (Jul. - Aug. 2013), 13-20.
Al-Jahwari N.S., Khan, M. F. R., Al Kalbani, G. K. & Al Khansouri. S. S. (2018). Factors influencing customer satisfaction of online shopping in Oman-youth perspective. *Humanities & Social Science Reviews,* Vol 6, No 2, 2018, 64-73.
Gundaniya, N. (2020, February 4). *Everything you need to know about QR Code Payments*. Digital Finance Solutions, Ewallet Payment System, Wallet App Development.
**Kulkarni, V. A. & Banegaon, R. P. (2021). Interactive QR code based online shopping system. *International Journal of Innovations in Engineering Research and Technology*, Volume 7, Issue 10, 31-37.**
Lim, Y. J., Osman, A., Salahuddin, S. N., Romle, A. R. & Abdullah, S. (2016). Factors Influencing Online Shopping Behavior: The Mediating Role of Purchase Intention. *Procedia Economics and Finance*, *35*, 401–410. **.**
*Liu, C.T. & Guo, Y.M. (2008). Validating the end-user computing satisfaction instrument for online shopping systems. Journal of Organizational and End User Computing, 20 (4), 74-96.*
*Muhammad, N. S., Sujak, H., & Rahman, S. A. (2016). Buying groceries online: The influences of electronic service quality (eservqual) and situational factors. Procedia Economics and Finance, 37, 379–385. .*
***Vasic, N., Kilibarda, M. & Kaurin, T. (2019).** The influence of online shopping determinants on customer satisfaction in the Serbian market. Journal of Theoretical and Applied Electronic Commerce Research. Vol 14, Issue 2, May 2019, 70-89.*
*Yousuf, R. (2021). Study of customer preference towards online shopping in Pathanamthitta district. International Journal of Research (IJR), Vol 8, Issue 5, 633-644.*