Designing the Smart Shopping Cart Mobile Application (SmartCart) Using Mobile Application Development Life Cycle

The COVID-19 pandemic has had a significant impact on health, society, and the economy, leading to changes in consumer buying habits across various sectors [1,2]. To adapt to these challenges, businesses have turned to alternative channels like mobile phones and the internet [3]. These technologies have revolutionised the way people shop for goods and services. Although online shopping platforms have become popular, traditional shopping methods still have their appeal because of the opportunity to physically interact with products. However, concerns about crowded places have fuelled the adoption of e-commerce [4]. Collaborative shopping offers an enhanced experience but faces challenges like long wait times at payment sections. To improve the shopping experience, the integration of mobile phones, the internet, and barcode scanning applications has emerged as a transformative solution. Mobile barcode scanning applications on smartphones provide convenient access to product information and services on the go.

In this paper, we introduce Smart Shopping Cart mobile application (SmartCart). The development of the SmartCart introduces a collaborative shopping cart system across multiple devices. This application aims to revolutionise the traditional shopping experience by leveraging mobile technology, collaborative shopping, and IoT integration SmartCart allows customers to scan items using their smartphones, facilitating self-checkout and incorporating collaborative features. By embracing the power of mobile technology and barcode scanning applications, SmartCart enhances efficiency, convenience, and safety in shopping [5]. It addresses the evolving needs of customers during the COVID-19 pandemic and beyond. The development of a shopping cart app for multiple devices is crucial in today's digital age allowing customers to shop seamlessly across different devices, ensuring a consistent and convenient experience [6]. By incorporating cross-device functionality, businesses can cater to customers' preferences and provide a user-friendly interface on various screen sizes [5]. This approach enhances customer satisfaction and increases sales potential.

Traditional shopping methods often lack effective means for group members to collaborate efficiently. SmartCart addresses this challenge by enabling users to shop collaboratively with their family members or friends, streamlining decision-making and enhancing the overall shopping experience through real-time communication and coordination. Next, shopping in physical stores can sometimes be time-consuming, especially during peak hours when checkout queues are long [7,8]. SmartCart proposes to improve efficiency by incorporating features such as barcode scanning and selfcheckout, allowing users to scan items with their smartphones and complete the purchase process without waiting in line, thereby saving time and reducing frustration.

This paper presents a comprehensive structure for the project, covering various key components. Part II analysing previous studies and research conducted in the field. This review establishes a strong foundation for understanding the current state of knowledge and the importance of the project. Part III outlines the Methods that will be used throughout the project, detailing a phased approach to ensure a systematic and efficient development process. The project will progress through each phase, employing suitable methodologies and techniques to achieve the desired outcomes. Part IV showcases the Results and Discussion, presenting screen captures of the mobile applications developed as part of this project. These captures visually demonstrate the project's progress and highlight key features and functionalities. Lastly, Part V focuses on the Conclusion, emphasising the complexity of the mobile app and addressing any limitations encountered during the project. It also provides recommendations for future enhancements and further research to refine and expand the capabilities of the mobile app. By embracing the power of mobile technology, collaborative shopping, and IoT integration, SmartCart represents a transformative step towards redefining the shopping experience in the digital age.

2.    Existing Works

It has been observed that numerous supermarkets presently employ different applications with a common barcode detection approach. Upon entry into the store, customers are typically requested to scan their membership card at the entrance. Subsequently, customers can proceed to select the desired items and utilise their smartphones to scan them.

When the scanning process is finished, customers can then proceed with the payment, although the specific payment methods may vary depending on the supermarket they visit.

Table 1. Summary of existing application

Features	Stop & Shop SCAN IT! Mobile	Sains-bury’s Smart Shop	Tesco Scan &Shop	Walmart Mobile scan & go	MishiPay	Smart Cart
Scan items	✓	✓	✓	✓	✓	✓
Digital receipt			✓	✓	✓	✓
Online payment				✓	✓	✓
Collaborative bills						✓
Collaborative shopping						✓

This application distinguishes itself from existing solutions through several unique features that significantly enhance the user experience. Unlike many existing mobile shopping applications that primarily focus on individual shopping experiences, SmartCart allows users to shop collaboratively with their family members or friends. This feature fosters a sense of social interaction and decision-making while shopping, making the experience more engaging and enjoyable. While numerous mobile shopping apps concentrate solely on online shopping, SmartCart offers a hybrid experience by enabling users to shop physically in stores. This integration of digital and physical shopping environments provides users with flexibility and convenience, catering to their preferences and varying shopping needs. The application features a barcode scanning function that allows users to effortlessly scan items using their smartphones. Moreover, SmartCart facilitates self-checkout, eliminating the need to wait in long queues at traditional checkout counters, thereby saving time and enhancing convenience for users.

Overall, SmartCart's unique combination of collaborative shopping, hybrid shopping experiences, real-time collaboration, barcode scanning, and self-checkout sets it apart from existing solutions, offering users a comprehensive and innovative shopping experience.

3.    Methods

A variety of lifecycle models, including the waterfall model, spiral model, agile model, and prototyping model, are available for application development. While the development process for desktop, web, and mobile applications shares some similarities, there are consistent fundamental steps: gathering requirements, designing, implementing, testing, and delivering the final product [17-20]. However, the specific details of the work may vary.

In today's computing landscape, traditional information systems are being adapted to meet the demands of mobile application development [21]. It is important to note that the models used in traditional software development cannot be directly applied to mobile application development without significant modifications.

Fig.1. MADLC Framework for smart shopping cart mobile application (smartcart)

• 3.1.    Identification Phase

The initial stage of the process involves gathering and organising ideas, with the primary objective being to generate a new concept or improve upon the existing mobile application. Suggestions can be provided by both users and developers, and any user-generated ideas are implemented and further investigated. Brainstorming is essential when developing new and innovative application concepts.

To determine the uniqueness of a concept, an exploration of existing applications on popular platforms is conducted. If a similar application is found, its popularity and supported features are examined and compared. The differences between the current applications are documented. If there are no identical applications on any mobile platform, the concept is described along with its basic features. Determining the time required for application development is also an important task in this phase. It is also recommended to complete the collection of basic requirements. Subsequently, the mobile application idea is documented for future design purposes.

In the initial step of the identification phase, the primary objective was to uncover the requirements for the mobile application. This involved reviewing related applications, which were all sourced from the Google Play Store. A literature review was conducted using various information sources such as Google Scholar, ResearchGate, Open online databases, and also included the use of Literature Review concept mapping.

The aim of this process was to collect data pertaining to the various aspects of the mobile application, including components, design, features, functionalities, technologies, ideas, and scope. The specific actions undertaken during the identification phase of this project are outlined in Table 2.

Table 2. Summary of identification phase

Phase	Activities	Tools and Method	Deliverables
Identification	Identify user and mobile applications requirement	Google Play Store (Feedbacks from mobile application reviews)	i) Problem statements; ii) Aim; iii)    Objectives; iv)    Scope & limitation; iv) Significance.
	Literature reviews	i)    Google Scholar; ii)    ResearchGate; iii)    Open online databases; iv) Literature Review concept mapping.	i)    Shopping motivations; ii)    Online & offline shopping comparison; iii)    Collaborative; iv)    Mobile OS; v)    IDE Comparison; vi)    Barcode technology; vii)    Summary of existing applications; viii) SDGs.
	Timeline planning	Google Sheets	Gantt Chart

In order to create an effective system, specific components have been analysed in the system requirement. This includes defining all necessary hardware and software to ensure a smooth development process. This section provides a comprehensive list of the hardware and software requirements for the project. The hardware requirements for developing the mobile application are detailed in Table 3. Table 4 outlines the software utilised in the application's creation, while Table 5 provides a summary of the user requirements.

Table 3. Hardware requirement

No	Hardware	Requirement
1.	Computer	Processor	Intel Core i5-6200U processor
		Random Access Memory (RAM)	12GB DDR4
		OS	Windows 10 Home
		Storage	1TB
2.	Smartphone 1	OS	iPhone OS
		Version	iOS 15
		GPU	Apple GPU (4-core graphics)
		RAM	6GB
		Storage	128GB
3.	Smartphone 2	OS	Android
		Version	Android 11
		GPU	Adreno 506
		RAM	4GB LPDDR3
		Storage	52GB

Table 4. Software requirement

No.	Software	Description
1.	Laptop OS	Windows 10 Home
2.	Phone OS	Android 11 and iPhone OS 15
3.	Google Docs	For documentation report
4.	Google Slides	For presentation purposes
5.	Google Sheets	To analyse the user testing feedback and results
6.	Google Form	To distribute the system usability scale form
7.	Google Chrome	To search information
8.	Android Studio	To run Android simulator/emulator
9.	Android SDK	Software development kit for Android

Table 5. Summary of user requirements

Features	Description
Scan items	To give customers the freedom to scan their items while shopping.
Digital receipt	To provide users with access to receipts in digital form.
Online payment	To allow users to pay for a list of items they have scanned using their smartphone through online payment.
Collaborative bills	To allow users to share their item lists within a single bill.
Collaborative shopping	To give users who come in groups either with friends or family can share receipts and purchase time can be reduced.

During the Identification Phase, the primary challenge was to pinpoint the specific needs and preferences of users for a collaborative shopping application. To address this challenge effectively, extensive market research (i.e.: existing mobile applications), and user surveys and feedback were conducted. These activities were instrumental in gaining insights into user pain points and preferences related to the shopping experience. By actively engaging with potential users and gathering feedback, key features and functionalities that would enhance the shopping experience were identified. This comprehensive approach to understanding user needs laid the groundwork for developing a collaborative shopping application that aligns closely with user preferences and expectations.

• 3.2.    Design Phase

• 3.3.    Development

In this phase, the mobile application concept undergoes a transformation into an initial design for the app. The feasibility of developing the application for various mobile platforms is assessed, and a target platform is determined. The application's functionality is divided into modules and prototypes, which are combinations of modules presented in a prototype format. Detailed functional specifications are established, and the software architecture of the application is developed. The prototypes and their corresponding modules are specified. A crucial aspect of the design phase is the creation of a storyboard that outlines the UI interaction, illustrating the flow of the application. The work conducted during the design phase is documented for use in the subsequent development phase, specifically for coding purposes.

The design phase successfully achieved the project's second goal, which is to design the mobile application. Prior to commencing the design process, flow charts are proposed to provide an overview of the system flow. Lucidchart, a webbased platform, is utilised for creating the User Centred Design (UCD), enabling collaboration in chart and diagram design, revision, and sharing. Throughout the design phase, low-fidelity paper prototypes are used to create the non-functional UI elements. The low-fidelity UI design and UCD serve as outcomes of the design process.

For examining and designing the User Experience (UX), Uizard is employed, requiring agreement among all parties to identify the sketched design in accordance with UX principles. The design process begins by identifying the participants and analysing the relationships between them. Subsequently, the design delves into the details and establishes project entities with specific characteristics. The Entity Relationship Diagram (ERD) aids in integrating details regarding connection cardinality, expanding composite characteristics, and defining entity sets based on its purpose. Similar to other design steps, the project design is reviewed for flaws or defects and adjusted as necessary over time. The ERD project design, along with the project's progress towards the physical database design, supports this process. Table 6 provides a summary of the activities conducted during the design phase of this project.

During the Design Phase, the main challenge was to craft an intuitive user interface (UI) and user experience (UX) conducive to seamless collaborative shopping. To tackle this challenge effectively, the researchers collaborated closely with experienced UI/UX experts. Together, we developed wireframes and mockups that emphasised ease of use and intuitive navigation. These initial designs underwent iterative reviews and user testing sessions to collect feedback. By incorporating user preferences and feedback into the design refinement process, the researchers ensured that the final UI/UX design was optimised for enhancing the collaborative shopping experience.

Table 6. Summary of design phase

Phase	Activities	Tools and Method	Deliverables
Design	Designing System Flow	Flow chart	Flow chart
	Designing UI	Paper Prototyping	Low-fidelity Prototype
	Designing UX	Uizard	Mid-fidelity Prototype
	Designing Databases	LucidChart	Entity Relationship Diagram (ERD)
	Designing user scenario	LucidChart	Use Case Diagram (UCD)

In this phase, the application is developed through coding. Different modules of the same prototype can be coded simultaneously. The development process consists of two steps: coding for functional requirements and coding for UI requirements. Initially, the code is written for the most important features of the application. For modules that are independent of each other within the same prototype, parallel development is possible, and these modules can later be connected together. In some cases, the interface may be similar to other pages, but the functionality on those pages may differ. For example, the admin page may have the ability to delete data from a list, while regular users only have access to view the list. The design should incorporate the minimum interface components that are commonly found across all versions of mobile operating systems. Finally, the documentation from the development phase is transferred during the prototype phase.

The stage where the mobile application is proposed is referred to as the experimental period. The architecture developed during the design phase is scheduled for implementation in this stage. Throughout this process, all the required features and functionalities are encoded into the application. The successful completion of this procedure indicates the fulfilment of the initial portion of the third goal in developing the mobile application. Additionally, all the necessary hardware, software, and platforms for the development activities are provided. The application will be built using Android Studio, while the database will be constructed using Firebase. The specific actions undertaken during the development phase of this project are outlined in Table 7.

Table 7. Summary of development phase

Phase	Activities	Tools and Method	Deliverables
Development	Code mobile application UI	Android Studio	Functional UI
	Code mobile application database	Firebase	Functional UI & Databases

During the Development Phase, a significant challenge was to seamlessly integrate real-time collaboration features into the application while ensuring scalability and optimal performance. To address this challenge, the project team worked closely with experienced software developers. Together, we focused on implementing a robust backend infrastructure and real-time communication protocols to support collaborative features effectively. Additionally, leveraging scalable cloud platforms and employing asynchronous processing techniques played a crucial role in optimising performance and ensuring smooth collaboration among users. By prioritising these technical considerations and collaborating closely with developers, the researchers successfully navigated the challenges of integrating real-time collaboration features while maintaining scalability and performance standards.

• 3.4.    Prototyping

• 3.5.    Testing

In this phase, the functional requirements of each prototype are assessed, and the prototypes undergo testing before being presented to the customer for feedback. Based on the client's input throughout the development phase, necessary adjustments are made. The second prototype is integrated with the initial one, evaluated, and then delivered to the client. This development, prototyping, and testing cycle is repeated until the final prototype is deemed ready. The client receives the final prototype and provides further input. The work carried out during the prototype phase is documented and subsequently handed over to the testing phase.

The objective of this phase is to evaluate the functionality of the initial mobile version. Core features and functions, such as barcode scanning, payment processing, digitising and emailing receipts, and collaborative functions, are developed during this phase. Each task performed in the prototyping process is documented. The activities conducted in the prototyping phase of this project are summarised in Table 8.

Table 8. Summary of prototyping phase

Phase	Activities	Tools and Method	Deliverables
Prototyping	Run the application on emulator	Android Studio	Semi-functional application

During the Prototyping Phase, a key challenge was transitioning from paper prototypes to digital prototypes while preserving the fidelity of the design. To address this challenge effectively, the project team opted to digitise selected paper prototypes into medium-fidelity digital prototypes using specialised prototyping tools. This approach facilitated the creation of interactive prototypes that closely resembled the envisioned user interface and functionality. By digitising the prototypes, the team could conduct thorough testing and validation of design concepts in an interactive digital environment, thus ensuring that the final product aligns with user expectations and requirements before advancing to the development phase.

Testing is a critical aspect of any development lifecycle model. Before being tested on a real device, the prototype types are first evaluated on an emulator or simulator. Emulators or simulators are often included in the Software Development Kit (SDK). When it comes to Android OS development, it is important to conduct testing on actual devices with different operating system versions and phone models that have varying screen sizes. Test cases are prepared and shared with the client for review.

The research phase commences after the completion of the prototype. The mobile application is tested in a specific environment using a mobile device, requiring the participation of twenty individuals. The testing procedures are designed to involve users, evaluating both the characteristics and UI features to ensure usability and alignment with requirements and prerequisites. To assess the features and functions during this testing phase, a combination of task lists and questionnaires is utilised. The System Usability Scale (SUS) can be employed to measure the overall usability of the new Android application. The testing method is outlined in Table 9, the questionnaire is presented in Table 10, and the activities conducted during the testing phase are detailed in Table 11 of the project.

Table 9. Tasks in testing phase

Tasks	Description	Function (Yes/No)	Comment
Sign Up	Users need to register if they want to use the SmartCart mobile application. Users can register themselves by opening an account on the signup page.	Y/N	-
Login	To keep records of registered users who use the SmartCart mobile application.	Y/N	-
Face ID Recognition	To let frequent users easily login using their preferred way of sign in, rather than manually type their credentials.	Y/N	-
Forgot Password	To let users reset their password in case they forgot their password through their registered email.	Y/N	-
Edit Profile	If a user wants to change their picture, or change the password for security purposes, and wants to use a preferred username, they must have the right to do so on the edit user page.	Y/N	-
Shopping Mode	To allow customers to choose whether they want to shop individually or collaboratively.	Y/N	-
User Mode	To allow customers who want to shop in groups to choose their role whether they are group leaders who will have the authority to make payments for all members or they are group members which allows them to share their list of items into one invoice or receipt.	Y/N	-
Online Payment	To allow users to pay for their items using online payment features by using their credit or debit cards.	Y/N	-
Barcode Scanner	To allow the system to scan the barcode present on the product.	Y/N	-
QR Code Scanner	To allow the system to record the QR code available to the group leader to allow other users to join the group shopping.	Y/N	-
Collaborative shopping	Users can collaborate by sharing items in one receipt with other users.	Y/N	-

Table 10. SUS questionnaires

No.	Question	Scale (1-5)
1.	I think that I would like to use this mobile application frequently.	0
2.	I found the mobile application unnecessarily complex.	0
3.	I thought the mobile application was easy to use.	0
4.	I think that I would need the support of a technical person to be able to use this mobile application.	0
5.	I found the various functions in this mobile application were well integrated.	0
6.	I thought there was too much inconsistency in this mobile application.	0
7.	I would imagine that most people would learn to use this mobile application very quickly.	0
8.	I found the mobile application very cumbersome to use.	0
9.	I felt very confident using the mobile application.	0
10.	I needed to learn a lot of things before I could get going with this mobile application.	0

Notes/Sources: Scale of 1 to 5 refers to (1) strongly disagree to (5) strongly agree. Adapted from SUS: A “Quick and Dirty” Usability [22].

Table 11. Summary of testing phase

Phase	Activities	Tools and Method	Deliverables
Testing	User testing	SUS Tools	i)    Mobile application usability measured; ii)    Enhancement of the features or recommendation for future works.

During the Testing Phase, a significant challenge was conducting usability testing with a diverse group of users to validate the effectiveness of the application. To address this challenge comprehensively, the project team adopted a strategic approach. We recruited a diverse group of users representing various demographic backgrounds and shopping preferences to participate in usability testing sessions. By including users with different characteristics and behaviours, the team ensured a broad spectrum of feedback that accurately reflects the application's usability across diverse user segments. Standardised metrics such as the System Usability Scale (SUS) were utilised to measure user satisfaction and identify areas for improvement. Additionally, the team iteratively addressed any usability issues or pain points identified during testing, refining the application to enhance its overall effectiveness and user experience. Through this meticulous testing process, the team validated the application's usability and iteratively improved its performance to meet the needs and preferences of its diverse user base.

4.    Results and Discussion

This section will encompass a Use Case Diagram (UCD), an Entity Relational Diagram (ERD), low-fidelity prototype and mid-fidelity prototype. These diagrams collectively offer a comprehensive understanding of the entire project. The study design will provide a detailed description and explanation of the specific design approach employed in the project's development. The figure will provide a clear explanation of all the project activities.

• 4.1.    Use Case Diagram (UCD)

• 4.2.    Entity Relational Diagram (ERD)

Fig.2. Use case diagram for smartcart mobile application

Table 12. Use case description for smartcart mobile application

No.	Use Case	Description
1.	Sign up	First time users need to register themselves before they can use this SmartCart mobile application system.
2.	Login	Registered users can enter the SmartCart mobile application system through the login page.
3.	Edit profile	Users can change their username, password and picture on the edit profile page. Full name and email are not allowed to be changed to uniquely distinguish one user from another.
4.	Shopping mode	Allowing users to make a choice whether they want to shop alone or in a group.
5.	User mode	Allows users to choose whether to be a group leader or group member if they want to shop in groups.
6.	Manage shopping session	The system will organise a new room for the leader and other group members to shop using the SmartCart mobile application system.
7.	Generate collaborative code	The system will generate a collaborative code in the form of a QR code.
8.	Share collaborative code	The leader will share the collaborative code in the form of a QR code or in digital numbers to the group members.
9.	Scan collaborative QR code	Group members will scan the collaborative QR code found on their group leader's devices to participate in the group shopping session.
10.	Enter collaborative QR code	For group members who cannot access the barcode or qr code scanner features, they have the option to enter the collaborative code number manually.
11.	Update cart	Users can update the cart to either increase the quantity of items, reduce the quantity of items or remove an item from the shopping list.
12.	Enter item barcode	For users who cannot access the barcode or qr code scanner features, they have the option to enter the item barcode number manually.
13.	Scan item barcode	Users will scan the item barcode found on the item packaging to add the items into their shopping cart.
14.	Generate bill	The system will generate a bill from the items that have been put into a cart.
15.	Make payment	Group leaders can make payments on behalf of other group members. For those who shop alone, they can make payments for the items they have purchased using their own account.

Based on the Entity Relational Diagram presented in Fig.3., a total of 5 tables are utilised to store the data from the user in the SmartCart mobile application system. From this diagram, we can conclude that each item can be associated with one or more orders, and each order can contain one or more items. Additionally, a single order can only be linked to one shopping session, while a shopping session can involve one or multiple orders. Moving on to the user, a user can place one or more orders, but each order is linked to only one user. Furthermore, for each shopping session, there can only be one payment, and a payment session is exclusively associated with one shopping session. Lastly, when it comes to making a payment, a user can only initiate one payment session at a given time, and a payment session can only be received from one user.

Fig.3. Entity relational diagram for smarcart mobile application

• 4.3.    Low-fidelity Prototype

Prior to commencing the design process for the SmartCart mobile application, paper prototyping was employed to create a low-fidelity prototype. This approach allowed for a general and brief understanding of the layout of the SmartCart mobile application. The use of paper prototyping is cost-effective and allows for the easy discarding of any unnecessary results. Out of approximately 50 paper prototypes created, 18 were deemed relevant and suitable to be carried forward to the next phase, which involved digitising the paper designs into a medium fidelity prototype. Fig.4. represents the final outcome of the paper prototyping or low-fidelity design process.

(ii) Login Page.

(i) Intro Page.

(iv) Edit Profile Page.

(v) Shopping Mode Page.

(iii) Signup Page.

(vi) User Mode Page.

(vii) Leader Collaboration Code Sharing Page.

(viii) Members Code Confirmation Page.

(ix) Group Members Checking Page.

^p ^Еогокь?

^nn^

(xi) Leader’s Home Page.

(xii) Member’s Home Page.

(x) Scanner Page.

(xiii) Item Searching Page.

||егл Ir^^

| клп ko^ 114 ГЛ Г^

|k^ P^ |k^ p0<$ *

|к^ pojrpfl^

(xiv) Product Description Page.

(xv) Profile Page.

(xvi) Invoice and Payment Page.

Fig.4. Low-fidelity (Lo-fi) prototype for smartcart mobile application

(xvii) Card Scanner Page.

(?QcC^ I

Л~ \ Лый. М^л^ ■ у__) &Ыа m«J*w I Сйи« £Р^ Д^*^⁵^

—>« (к*и кк^^С

Q^j ik*i [^ц- ^ ^y

W(b(a/ f[M« /

(xviii) Receipt Page.

• 4.4.    Mid-fidelity Prototype

The design created during the paper prototyping phase will be converted into digital format to aid in identifying consistency in the usage of elements such as buttons, hyperlinks, and font sizes. This phase aims to achieve a more uniform, organised, and user-friendly design that can be easily understood by different types of users. Additionally, elements of human-computer interaction will be implemented to enhance the user experience of the SmartCart mobile application. Fig.5. depicts the results of transforming the paper prototypes into a medium fidelity prototype.

(i) Intro Page.

(ii) Login Page.

(iii) Signup Page.

(iv) Edit Profile Page.

Shopping mode Description___________	User mode Description___________
Image	Image
Shopping Alone	Group Leader
Shop alone	Leader
Image	Image
Shopping with Group	Group Member
(v) Shopping Mode Page.	(vi) User Mode Page.

(vii) Leader Collaboration Code Sharing Page.

Ask the Code Description____________		Members check Description___________
Search code		Search code
Join group shopping		Enter
		Group Members Si Fulan fulan@gmail.com /q\ Si Fulan \0f fulan@gmail.com

(viii) Members Code Confirmation Page.      (ix) Group Members Checking Page.

(x) Scanner Page.

(xi) Leader’s Home Page.

(xii) Member’s Home Page.

(xiii) Item Searching Page.

(xiv) Product Description Page.

(xv) Profile Page.

Invoice

Sayur

RM10 X 3 =RM30

0x3 = RM30

Tips

Enter tips

Subtotal

Total alter tips

Total

RM 60

RM 70

RM 130

Payment

Card Details

(xvi) Invoice and Payment Page.

(xvii) Card Scanner Page.

Fig.5. Medium fidelity prototype for smartcart mobile application

Receipt

Amirul Grocer

0x3 = RM30

Sayur

RM10 x 3 = RM30

Subtotal          RM 60

Total after tips RM70

Total           RM130

Logout

(xviii) Receipt Page.

• 4.5.    System Usability Score

Fig.6. SUS acceptability score for smartcart mobile application

Based on the indicators as shown in Fig.6., the SmartCart application falls within the acceptable range with the score of 61.5, reflecting its overall usability. Therefore, it is important to address any design flaws and make necessary improvements to enhance the user experience further.

Feedback from users highlighted the application's efficiency and convenience, particularly with features such as barcode scanning and self-checkout. Users praised the ability to quickly scan items with their smartphones and complete the purchase process without waiting in long queues, emphasising the application's contribution to streamlining the shopping experience.

The real-time collaboration features of SmartCart received positive feedback from users, who appreciated the seamless communication and coordination with their shopping companions. Users reported that these features enhanced their ability to shop together efficiently, contributing to an enjoyable and engaging shopping experience.

Overall, users found SmartCart to be user-friendly and easy to navigate. The application's intuitive interface and straightforward design were highlighted as key factors contributing to its usability, indicating that SmartCart effectively meets the needs and preferences of its users.

5.    Conclusions

In conclusion, this research project marks the initial steps toward a transformative shopping experience in the digital age. While our work is still in the early stages, the vision of SmartCart is promising and has the potential to reshape the way people shop in the future. As consumer preferences continue to evolve, driven by the impact of the COVID-19 pandemic and the growing importance of mobile technology and collaborative shopping, it is imperative that we continue to refine and develop the SmartCart concept.

This project has introduced innovative ideas, integrating mobile phones, the internet, and IoT technology to enhance shopping efficiency, convenience, and safety. The aim is to address the shifting needs of consumers during these dynamic times. However, we acknowledge that there is still much work to be done in terms of implementation, user experience design, and addressing potential challenges.

SmartCart is adaptable to various retail environments, including supermarkets, department stores, specialty shops, and more. The application's modular design allows for customization to suit the specific needs and preferences of different retail establishments. SmartCart can be seamlessly integrated with existing retail systems and technologies, enhancing the in-store shopping experience while complementing traditional retail environments. By showcasing the positive reception from initial user testing and discussing the potential scalability and adaptability of the application to different retail environments, the SmartCart project demonstrates its potential for widespread adoption and long-term success in revolutionising the shopping experience.

The journey to revolutionise the traditional shopping experience is just beginning, and this paper serves as the foundation upon which we will build and expand our research. As we move forward, we will conduct further studies, gather user feedback, and refine the SmartCart mobile application. We anticipate that SmartCart will not only provide a convenient and safe shopping experience but also contribute to a more seamless integration of technology into our daily lives.

In essence, this project is a forward-looking exploration of what the future of shopping could be. We are excited to embark on this journey and look forward to the continued development and eventual realisation of the SmartCart concept, which holds the potential to redefine the shopping experience in the digital age.