Online Convenience Store System using Multidimensional Data Visualization

: The explosion of e-commerce businesses has seen the growth number of the online businesses worldwide. Retailers nowadays are opting with e-commerce platform to manage and monitor the business activities which is considerably convenience such as visualizing the sales data. However, Serbaneka is still using traditional way to store the sales data such as in spreadsheet papers which lead to data loss or misplaced the sales record. The objective of this research is to study the current usage of e-commerce system among hostel students in UiTM Tapah. A preliminary survey was carried out by eight selected hostel students in order to generate a list of criteria based on students' previous experiences with e-commerce systems. The following objective is to develop a web-based convenience store system using multidimensional data visualization for Serbaneka UiTM Tapah. The System Development Life Cycle (SDLC) method is used in the development of Online Convenience Store System for Serbaneka UiTM Tapah. Besides, multidimensional data visualization is used as method in visualizing the sales data of Serbaneka UiTM Tapah. Other than that, this research is to evaluate the usability of the system using Post-Study System Usability Questionnaire (PSSUQ) approach. The PSSUQ evaluation is evaluated by three selected experts. The results of PSSUQ evaluation stated that the experts satisfied with the development of Online Convenience Store System using Multidimensional Data Visualization for Serbaneka UiTM Tapah. This is due to the system's ability to assist retailers Serbaneka UiTM Tapah in managing and monitoring the business activities.


Introduction
In today's fast-paced world, online purchasing has seen enormous growth. Many people regard shopping as a recreational activity. Shopping online is no exception. The system's basic principle is to allow customers to shop virtually using the Internet and to purchase things from the store [1]. Thus, ecommerce websites can encourage a trendy manner for consumers to buy for consumer goods. It is not only convenient, but it is also time saving, allowing customers to devote more time to other aspects of their everyday lives. As a result, an e-commerce website can be created. The system would be simple to use, making the shopping experience more enjoyable for the users. Thus, this paper focuses mostly on the methodology of the software development lifecycle for an e-commerce website. Besides, this paper is mainly explaining about the methods, development process, data collection, software and hardware requirement that involved with this research development and the outcomes related to are discussed [2]. Methodology is a problem-solving guideline that includes specific components such as phases, tasks, methods, techniques, and tools. Methodology is important because it demonstrates an understanding of how the research is managed and completed [3].

Literature Review 2.1. Shopee
Shopee is an emerging and popular Ecommerce business in Malaysia. It also the most popular community marketplace website, where users can buy and sell anything from fashion, clothing, accessories, beauty products, furniture, art, books, branded goods, cars, bikes, and antiques to houses. Shopee offers a variety of services, including its own websites, website-based services, and Shopee client software available through the site. Shopee delivers all information, including all linked pages, functions and features, text, image, photo, video, materials, software, and application software available in all mobile application services. It is quite convenient for customers to purchase products online by searching on their website, selecting their favorite items, and then paying. Aside from that, Shopee has created their own mobile apps so that their customers may use their services at any time. Customers claimed that Shopee application interface design is attractive and clear [4].
However, there are a few drawbacks of Shopee interface design such as it is not suitable for the smaller device which sometimes faces trouble to do manual text input. Shopee gives auto-input feature on search bar to make product browsing easier for users. Shopee also allows the user to pick a certain category in search bar to minimalize the user's effort in looking for the desired product. Besides, Shopee provides a history feature to let users see what products they have searched for. The history list is essential for the users to track their record on application. The history list in Shopee app is presented in a different way than a regular web browser as history list can be accessed through the profile menu. It is listed in the form of product thumbnails, not as a list of hyperlinks which make the customer hard to find the thumbnails.

Lazada
Lazada is a popular online product trading platform. In terms of usability, this website is similar to Shopee which allows users to sell brand new or used products. Lazada is a Malaysian online marketplace that connects buyers and sellers. Through this website, users can choose product categories by clicking the various icons at the bottom of the landing page. Following that, users can refine their search by specifying a location. The app will then display all the products requested by the user. Users will be taken to the product detail page once they have selected their desired product. Users can look over the information [5]. Furthermore, just like Shopee, users must fill out all of the required information for the selling portion. Besides, when users first use it, it provides simple instructions to help them understand all the functions and features [6].
Unlike other websites, Lazada has a complicated user interface as it is hard for user to proceed with item purchase as the instruction is too simple and not in details. Meanwhile, it has a limitation that is required too many steps to sell products. In order to create a good interactive view and user-friendly website, the number of inputs must be optimised and reduced. The reason for this is that users are lazy and may be hesitant to sell a product when there are so many steps to complete.

Foodpanda
Foodpanda is an online food and shopping delivery platform operated by Delivery Hero. Foodpanda is the primary brand for Delivery Hero in Asia, with headquarters in Singapore. It is presently the largest food and grocery delivery platform in Asia outside of China, with operations in 12 Asian markets.
Besides, Foodpanda is a food delivery e-commerce company that allows customers to purchase food online through the Foodpanda mobile app or website [7].
Through the website, customer can choose the categories cuisines such as fast food, ice-cream, Japanese, Korean, Italian, pizza, Thai etc. by clicking the filter icons at the top of the landing page. Following that, customers can refine their search by specifying a location. The app will then display all the restaurants requested by the customers. Customers will be taken to the cart page once they have selected their desired menu. Customers can look over the information. Sometimes an unexpected problem happens on the Foodpanda website, such as the current discount code being ineligible for use. Besides, the delivery time takes more than time expected item delivered to the customer [8].

Methodology 3.1. Research Design
The overall research methodology is divided into three stages, which are as follows: • Phase 1: Study the usage of e-commerce system among hostel students in UiTM Tapah.
• Phase 2: Development of a web-based convenience store system for Serbaneka in UiTM Tapah • Phase 3: Evaluation of the system's usability using Post-Study System Usability Questionnaire (PSSUQ) approach.

Figure 1. Research Design
The first phase of the research process focused on identifying the research problem. The first step of developing a system is feasibility study whereby in this phase, the research usually starts by identifying the research area, problem statement of the research, defining objectives, significance and scope of the research including the target users [9], [10]. Next, literature review studies about the domain, research area, techniques and common features of the research. Besides, review the related articles and journals that are related to the research. Following that, a preliminary survey was carried out with the goal of investigating the current practises identified during the research evaluation [11].

1) Feasibility Study
The purpose of the feasibility study on this research is to determine the research's viability before designing and developing the complete system.

2) Literature Review
The scope of the literature review includes e-commerce as well as previous research such as articles and journals. Therefore, an extensive review of previous research work related to the current study was conducted. During this stage, the research's domain, research elements, and techniques are identified and studied using opensource tools such as Google Scholar and online databases. As for Mendeley, it is a software that is used to store all the research papers more efficiently. Apart from that, the ways of implementing web development by using HTML, JavaScript and CSS are also being studied during this phase. Through all the readings, this research was able to come out with the literature review during this phase.

3) Preliminary Study
The preliminary survey is designed to identify the limitations of current practises through the survey. A survey approach is regarded as an acceptable research tool that is used in this research to gather the hostel students' feedback of the satisfaction in using existing ecommerce platform, online shopping during current situation (covid-19) and problem opinion.

Questionnaire Construction
In this research, the method for data collection is qualitative such as questionnaire approaches. The preliminary survey was carried out using a questionnaire as a research instrument. The questionnaire approach was used to collect data on customer satisfaction with the current system. A survey was carried out to identify the critical factors that contribute to research success in construction and research development [12]. The questionnaire was built using a few processes, including question development, questionnaire review, modification, and validation. Some processes, such as question creation, required multiple revisions to ensure that the question covered the scope of the preliminary survey [13]. The questionnaire was designed for this study, and some minor changes were made to the wording.
The question was then divided into two parts: Part A and Part B. Part A focused on the demographics of the respondents, who are UiTM Tapah hostel students. The targeted respondent of this survey is about 30 respondents. The students were categorized based on their gender, age, faculty and student's education.
Meanwhile, Part B, on the other hand, consisted of questions that the students were required to answer. These questions were about the current practises of Serbaneka in UiTM Tapah's service satisfaction. The survey was designed to gather information such as: • Student's satisfaction in using the existing e-commerce platform. After all the data is collected, the next phase of this research methodology is development. During this phase, the idea of designing the system architecture, method used as well as software and hardware requirements are being implemented. The purpose of this phase is to view the flow of the system works and summarize it in the simplest form for better understanding of this research. The research started to develop web-based systems which fulfil the objectives of this research stated during the first phase. During the development phase, there are two sides of coding parts which are back-end coding and front-end coding. The frontend coding is the code part for the website interface while backend coding is focusing on the interactivity features of website interface, data visualization and database stored in the web server.

Web Development Life Cycle Model
In this research, the process development of the multidimensional data visualization required a specific level of planning in order to ease the steps and implementation of the research. There are several models of development methodology that is implemented for this research including System Development Life Cycle (SDLC), waterfall model, agile method and many more [14]. SDLC is an abbreviation for Software development life cycle. It is divided into phases that describe how to develop, design, and maintain a software while ensuring that all functional and user requirements, goals, and objectives are [3]. There are various models for mobile application and web development on the System Development Life Cycle (SDLC). As a result, a proper web development design approach is chosen to guide the planning process and the creation of a real website product. This Web Development Life Cycle (WDLC) is only being implemented for this research from planning to test. The following Figure 3 described of typical web development process in the form of System Development Life Cycle (SDLC) model [15].  Figure 4 represents the architecture of the Online Convenience Store Management System, which involves the user, web server and database server. It summarized as follows: • User side • Web server side • Database server The following is the description of each side in the system: 1) User To access the web server, users such as UiTM Tapah hostel students and Serbaneka owner need to use device such as phone or desktop that is connected to the Internet to browse the system. 2) Web Server In this system, there are two types of user which is the front-end and back-end user. Most front-end users are UiTM Tapah hostel students. Students can register, view products and place orders on the system. Students need to register by itself on the site and provide the details such as name, phone number, hostel name, room number, email and unique password. This system can assign a unique id to each purchase and automatically storing student information in the database. Meanwhile, the back-end user is the administrator. Administrator is the owner of Serbaneka. The administrator has additional functions compared to the front user such as admin can manage and classify the products according to the catalogue and products information to add, modify and delete. Besides, admin can view the multidimensional data visualization of sales tracking in the administrator dashboard such as monthly sales, daily basis sales and most popular items sold. All the data in dashboard is retrieved from the database.

3) Database Server
The MySQL database server would receive requests from the web server to execute SQL statements. The server accesses the database files to retrieve the stored data before returning the requested data.  Figure 5 shows the shop page which contain variety of items in Serbaneka online system. Customer can view all the item and add item to cart by clicking button "Add to cart", while Figure 6 shows the cart page which customer can view item in the cart which are contain product image, product name, product price, product quantity and total price. Customer can adjust quantity by increase or decrease the number. If the customer wants to remove the item, set quantity to "0" and click refresh button. This cart page is automated calculate the total price. Figure 7 shows the checkout page which customer can view the order details and customer details. Other than that, customer can change or update the address by click the button "Change". After all the items is done, customer need to click button "confirm order" to make an order otherwise click button "Back to view cart" to go cart page.  Table 1 shows the usability evaluation of online convenience store system using multidimensional data visualization for serbaneka UiTM Tapah. The information such as on-screen messages, provided with the system is clear.

6
It was easy to find the information needed. 4.0 7 The information was effective in helping me complete the tasks and scenarios.

4.3
8 The visualization of dashboard information on the system screens was clear.

9
The interface of this system was pleasant.

10
The interface is easy to navigate. 4. 3 11 I like using the interface of this system.

12
This system has all the functions and capabilities I expect it to have. 4.0 13 Overall, I am satisfied with this system. 4. 3 14 Overall, I am satisfied with how easy it is to use this system. 4. 3 15 Overall, I felt comfortable using this system. 4.3 According to Table 1, the following is the result of the usability evaluation of the Online Convenience Store System using Multidimensional Data Visualization for Serbaneka UiTM Tapah:  System Usefulness (Item 1 to 4) The experts is provided with several variation in the system's usefulness specifications. The mean average for item 1 is 4.6, indicating that all experts agreed with the statement.
Eventually, the result for item 2 is 4.6 which is varied by the experts with strongly disagreed and disagreed. This is due to the system that is clear and easy to understand so that the experts would not require the assistance to use the Serbaneka online system. The mean average for item 3 is 4.0 since all the experts is agree with the item statement. The expert's response that the functions in this system were well integrated. For item 4, the mean average is 4.3 which is varied by the experts with agreed and strongly agreed on the thought of the system is easy to use. The usefulness of this system varies depending on the expert.  Information Quality (Item 5 to 9) According to the evaluation, two experts is agreed that the information provided in the system such as on-screen messages is clear. Meanwhile other expert is strongly agreed as the mean average result for the item 5 is 4.3. Item 6 received 4.0 for the mean average. All of the experts were agreed that the system is easy to find the information needed. Next, item 7 received 4.3 for mean average as the result is varied by the experts with agreed and strongly agreed. The mean average for items 8 and 9 is 3.6. This shows that the expert agreed with the item statement on the system, such as on-screens or alerts was pleasant as well as clear.  Interface Quality (Item 10 to 12) The mean average for both items 10 and 11 is 4.3 respectively. All of the experts agreed with the interface of the system as it is user-friendly and simple to operate. Meanwhile, item 12 received 4.0 for the mean average, which varied by the experts with agreed and strongly agreed. This shows that the experts indicated that the system as all the expected functions and capabilities.  Overall Satisfaction (Item 13 to 15) The mean average for the item 13 to 15 is 4.3. It shows that all the experts agreed with the item statements. The experts are satisfied with the system flow and felt comfortable in using the system. The experts also satisfied with the Serbaneka online convenience store system because it had all features and capacities.

Conclusions
This research is to manage and visualize Serbaneka's online system sales data in order to help the owner make better decisions. It may efficiently convey more data information to the owner in the form of charts and graphs rather than words by using data visualization. During the data collection procedure, multidimensional data visualization was used. The data was extracted from the database during the data collecting process, and the data is presented in multidimensional visualization such as in bar chart and pie chart on the dashboard at admin page. The data visualization, which included a Bar Chart and a Pie Chart, was created with the Google Chart plug-in and integrated with the JavaScript framework. As a result, the system assists Serbaneka's owner in making decisions by utilising system features. Although this research was well-developed and the objectives were met, it has several limitations. The first restriction is that credit/debit card validation is not performed. Validation checks can be performed using third-party proprietary software. Besides that, the system can currently only visualize data based on the database in the dashboard page. It is difficult for administrators or owners to access the data in detail since the crossfilter feature must be implemented. Since this research focuses on data visualization, it is much better if the administrator or owner interacts with the visualizations. As a result, the data can be directly access in detail to help the administrator or owner make decisions quickly.
Although this multidimensional data visualization system has several limitations, it still has potential for improvement in future work. From the limitations, numerous recommendations can be identified.
• Use the crossfilter feature in the visualization dashboard to improve the user's interaction with the system. Furthermore, it can assist users in interacting with the entire visualization dashboard. • Add some interactive buttons or animations to the system to make it more attractive than usual. • Implement this system as a mobile application.