Website Based UI/UX Application Design Of Balinese Traditional Products Using The Design Thinking Method

.


1.
Introduction All industrial activities in both the manufacturing and service sectors now use digital technology [1].Data from the Ministry of Cooperatives and SMEs, there are at least around 37 thousand MSME actors who have been hit hard during the pandemic.Marketing expert Yuswohadi revealed that MSME actors need to utilize technology to survive [2].Research develops website-based Balinese traditional product application designs.With the design of marketplace application, it is hoped that it will become an online market for MSME players and the people in Bali because shopping is a part of everyday human life.[3].The Balinese Traditional Product application design has two different types of marketplaces.Two types of Marketplace are places to offer Balinese traditional services and places to buy and sell Balinese traditional products.The place for offering Balinese traditional services is an online place to offer and use all services related to Balinese tradition which is called service marketplace.The place to buy and sell Balinese traditional products is called the product marketplace.The types of services offered in the marketplace model offer services related to Balinese tradition such as Balinese make-up salons.This Balinese make-up salon service aims to advance MSMEs that have Balinese make-up salons, to be able to offer their services in the application.The marketplace model for offering Balinese traditional services is expected to make it easier for service users who want to do Balinese make-up not to need to ask prices from service bidders because the application already contains the types of services and prices in detail.Balinese traditional products contained in the marketplace model for buying and selling Balinese traditional products are Balinese snacks, Balinese traditional facilities and infrastructure, and taru premana.The marketplace model for buying and selling Balinese traditional products is expected to introduce Balinese snacks and taru premana to the wider community.In addition, it is hoped that this application design can make it easier for buyers who want to find Balinese snacks, Balinese traditional facilities and infrastructure and taru premana if they don't want to buy them directly at traditional markets and make it easier for sellers to sell Balinese traditional products easily online.Examples of Balinese snacks contained in this application are laklak, bendu, and sumping and others.For Hindu religious facilities and infrastructure, namely penjor, wastra, tedung, banten, canang, incense, and others.For taru premana, namely loloh, boreh, sembar, tutu, and others.There is previous research that discusses the design of an online banten buying and selling system.Research on the design of online offerings for buying and selling systems discusses the design of buying and selling applications for offering offerings.The Banten marketplace application was designed because offerings are a means of ritual in Hinduism, which are usually prepared by Hindu women in Bali.In the study "Designing UI/UX Marketplace Applications for Website-Based Balinese Traditional Products Using the Design Thinking Method" the application design was not only limited to Banten, but all the needs of Balinese custom.The method used in this study is the Design Thinking method.Design Thinking is known as a method for improving a product by analyzing and understanding how users interact with the product.The five stages of design thinking are empathize, define, ideate, prototype, and test [4].The use of this method was carried out in this research because the design of the application design uses a user centered process or design that focuses on user needs.The purpose of the UI/UX design research for Balinese Traditional Product Applications is as a reference for developers in developing website-based Balinese Traditional Product application marketplaces through prototypes as the final result of website-based UI/UX Design for Balinese Traditional Product Applications.In addition, it is hoped that sellers on the Balinese Traditional Products application will have a place to market their products and services more broadly, and can distribute them easily and buyers on the Balinese Traditional Products application can buy the desired items quickly and easily.

Research Method / Proposed Method
The research method is described in order to make it easier for the reader to better understand the stages of the UI/UX Design Website-Based Balinese Custom Product Marketplace Application Using the Design Thinking Method.

Research Flow
The research flow explains that it is an explanation of the stages in carrying out research on designing the User Interface and User Experience for website-based Balinese Traditional Product marketplace applications.The research flow explains the stages carried out in making the system using the Design Thinking method.Design thinking gives designers and ideas new ways to find good design ideas [5].The research flow is explained in the form of a flowchart, namely as follows.

Design Thinking
Design Thinking is recognized as a technique that enhances a product's quality by examining and comprehending users' interactions with it.It entails a creative approach where users actively participate in experimenting with the product [6].The steps in design thinking are empathize, define, ideate, prototype and testing.

Usability Testing
Usability testing is a way to test products where a number of representative activities or representative tasks are carried out by users who aim to improve the quality of the interface based on the results.Usability testing is a test to test the functionality of a product.The products tested can be in the form of websites or mobile applications.Usability testing is important to do to find out the user experience of the product being tested.Evaluation of usability testing is important for improving the user experience of users in application development.In addition, users can more easily accept applications and can use them more easily [7].Currently, IT companies and experts are devoting significant focus to system testing and user acceptance testing in order to create favorable outcomes for their businesses [8]

Literature Study
The fundamental concept of Literature Study is to utilize established theories as points of reference or foundations in research.Research literature can be found in various sources such as books, journals, and the internet.The literature study employed as the groundwork for research encompasses user experience, design thinking, system usability scale, and task scenarios.

User Experience
User experience (UX) are perceptions and responses related to user interactions with systems or products.The quality of a good website system can attract users and increase satisfaction in their experience using the website [9].The main focus of UX is to consider noninstrumental attributes such as the user's emotions before, during, and after their interaction with a software application [10].User Experience is the first step in making an application system [11].User Experience can be created with software such as Adobe XD because it is software that is easy to use in designing prototypes of an application [12].

Design Thinking
Design Thinking is known as a method for improving a product by analyzing and understanding how users interact with the product.The five steps of design thinking are empathize, define, ideate, prototype, and test [4].Design thinking has been implemented by many companies in creating innovation.Experts argue that design thinking assists managers in a discovery-driven approach to innovation in their company's business model [13].

System Usability Scale
The system usability scale is one of the testing methods in testing usability testing in research.System usability scale is a testing method that is used to provide good results with a small number of samples, time, and in terms of cost [1].The system usability scale method allows us to evaluate various products such as software, hardware, websites and applications.

Task Scenario
The task scenario is a research technique used in usability testing.It involves presenting the user with specific tasks related to the prepared application, as designed by the researcher [14].By observing user behavior, researchers can find out where users find it difficult to use the application if there are problems.

Result and Discussion
The results and discussion presented the results of the research which discussed in full regarding the UI/UX design of the Balinese Traditional Products marketplace application.The design of the UI/UX marketplace application for Balinese Traditional Products through the stages of design thinking, namely emphatize, define, ideate, prototype and test.

Emphatize
The initial stage of research involves empathizing with users, aiming to comprehend their needs.This is achieved by administering questionnaires and conducting interviews, through which a set of prepared questions is presented to the respondents.The interviews were conducted in person, while the questionnaires were distributed using Google Forms.The outcomes of both methods were consolidated into a unified dataset.The respondents were categorized into two roles: potential users of the Balinese Traditional Products marketplace application, 10 sellers and buyers.The following are the questions included in the questionnaires and interviews.Figure 2 is the first question addressed to the seller role as an analysis of user needs or user needs, namely the shortcomings/difficulties felt by users when using a pre-existing marketplace.This is done in order to find out user complaints when using applications that have been used.

Ideate
Ideate is the process of giving ideas to solve problems experienced by users.At this stage a User Journey Map and Sitemap will be created as a solution to problems experienced by users.a.
User Journey Map Ideate is the process of giving ideas to solve problems experienced by users.At this stage a User Journey Map and Sitemap will be created as a solution to the problems experienced by users.[15].In making a user journey map there are several stages, namely, defining the steps that must be passed by the user and analyzing each step.Determine the activities carried out at each step, determine the annoying points for the user, then determine solutions to solve user problems based on the steps.User Journey mapping is carried out to get ideas for solutions to existing problems based on what users think and feel.The following is a mapped User Journey Map.Sitemap A sitemap is a map that describes the contents of each page on the website.A sitemap is important when designing a website so that there is an image of the content of each website page.The following is the Sitemap for the Balinese Traditional Products marketplace application.
Figure 7. Sitemap Figure 7 is an example of a sitemap.There are home pages, product pages, service pages, seller pages, profiles, wishlists, baskets, admin pages and the contents and features of each of these pages.

Prototype
Prototype is the fourth stage in design thinking, namely the implementation of ideas and the creation stage of ideas that have been obtained at the ideate stage.A high fidelity prototype was created which was developed in the figma software.High fidelity prototype is a high-level prototyping method that refers to the final description of the system [16].The home page is the first page when opening the Balinese Traditional Products marketplace application when the user has not registered to become a seller.The following is the appearance of the home page on the Balinese Traditional Products marketplace application.Figure 8 is a high fidelity prototype display of the home page of the Balinese Traditional Products marketplace application.In the navigation bar there is a logo, locationbar, searchbar, search for services, register, login, sell and cart icon.

Test
Test is the fifth stage of design thinking.Tests were carried out to collect various user feedback from various final designs that had been formulated in the previous prototype stage.At this stage, usability testing is carried out on the results of the prototype that has been developed.

a. System Usability Scale Results
Measurement of the System Usability Scale is carried out by filling out forms by users after testing the prototype.Tests were carried out on 10 seller role users with codes J-1 to J-10 and 10 buyer role users with codes B-1 to B-10 who were given 10 system usability scale questions.The following is the result of responses from 20 prototype users.The following table are the average results of usability testing with the system usability scale.3 I discover this system to be straightforward in its usability.

4,4
4 I require help from other people or technicians in using this system.
1,3 5 I discover the features of this system work as they should 4,25 6 I require there are a lot of inconsistent (mismatched) things in this system.
1,2 7 I have a feeling that others will understand how to use the system quickly.

4,3
8 I discover this system is confusing.1,2 9 I believe there are no barriers or hindrances when it comes to utilizing this system.

4,25
10 I have to familiarize myself with this system before utilizing it.

1,2
Table 1 is the average result of usability testing for Balinese Traditional Products marketplace using the system usability scale method.The average value is obtained from the total value of the respondents divided by the number of respondents.To get the SUS score, the average result on each odd numbered question is reduced by 1 point and 5 points is reduced by the average result on each even numbered question.After subtracting, the odd and even numbered questions are added up and then the result is multiplied by 2.5.

Figure 9. Calculation of System Usability Scale Score Results
Figure 9 is the calculation of the system usability scale score results.From the data obtained and the calculations were carried out from the data, the results of these calculations obtained a system usability scale value of 88.375.Based on these scores the designed prototype is included in the acceptable category in the acceptability rating, category B in the grade scale and in adjective ratings is included in the excellent category.

b. Task Scenario Results
In the task scenario researchers can see the user's behavior in completing a task from whether the user is successful or not in completing a task.The number of task scenarios used in testing is as follows.Table 3 is the result of recap testing the task scenario with the seller role user.The table contains the respondent's code, the number of successful tasks, the total task scenario, the percentage of success, and the average percentage of success.The recap of the seller's task scenario test results is as follows.Tabel 4 is the result of recap testing the task scenario with the buyer role user.The table contains the respondent's code, the number of successful tasks, the total task scenario, the percentage of success, and the average percentage of success.

c.
Repair Results Based on User Suggestions User suggestions are obtained from combining the results of suggestions from seller and buyer users.The following is a suggestion for improvements to the prototype provided by the user.

3.
In the login and register popups, you cannot see the password that has been typed.Recommended that the view password button can be clicked and the password that has been typed appears.
Table 5 is a suggestion for user improvement to the prototype of the Balinese Traditional Products marketplace application.In the table there are suggestions for improvements given by application users.The following is the result of improving the prototype based on user suggestions.The result of the recommendation from the first user is to change the font data on the user's profile page that is too large.Repairs are carried out according to recommendations or suggestions from users.The results of the recommendation from the second user, namely in the login popup and register, cannot see the password that has been typed.From the cart page, I haven't been able to press the wishlist button on the navbar.Repairs are carried out according to recommendations or suggestions from users.The following is the result of a user suggestion fix. Figure 10.Repair Results based on user suggestions Figure 10 is the result of improving user recommendations from the first to the third.the result of the first user recommendation improvement is that the font data on the user's profile page is too large.In the first photo the font used in the user data is 30 and after making improvements it is changed to 20.The result of the second improvement is the wishlist button on the basket page which cannot be clicked.After the repairs were made, the wishlist on the navbar was clickable.The result of the third improvement is that the view password feature on the popup list page cannot be clicked yet.After the repair, the view password feature can be clicked.

Conclusion
The process of prototype design involves utilizing the Design Thinking approach in order to enhance a product by analyzing and comprehending how users engage with it.Through research, a marketplace application prototype for Balinese Traditional Products has been developed, and it has undergone testing using the Usability Testing method.The results of the test, evaluated using the System Usability Scale, indicate a score of 88.375.Based on these scores, the designed prototype falls within the acceptable category in terms of acceptability rating, belongs to category B in the grade scale, and is considered excellent according to adjective ratings.

Figure 1 .
Figure 1.Research Flow Figure 1 is the UI/UX design stage for the Balinese Traditional Products marketplace application.There are 5 stages in designing UI/UX Website-based Balinese Custom Product marketplace applications which are included in the design thinking stage.The 5 stages in question are empathize, define, ideate, prototype and testing [4].

Figure 2 .
Figure 2. Deficiencies/difficulties felt by respondents when using previous marketplaces.

Figure 3 .
Figure 3. Features that respondents want Figure 3 is the second question addressed to the role of the seller as an analysis of user needs or user needs, namely what features the respondent wants for the Balinese Traditional Products marketplace application.The additional features desired are Balinese event organizer services, traditional Balinese massage services, and buying and selling penjor.

4 . 2 Define
Define is the second stage of design thinking.At this stage an analysis of the results obtained at the empathize stage is carried out.The results of the User Needs questionnaire obtained in the empathize stage will be made into user personas.User Persona is a model that represents potential users of the Balinese Traditional Products marketplace application by summarizing the results of the User Needs questionnaire (user needs) into a Persona or character.JURNAL ILMIAH MERPATI VOL.11, NO. 2 AUGUST 2023 p-ISSN: 2252-3006 e-ISSN: 2685-2411 Website Based UI/UX Application Design Of Balinese Traditional Products Using The Design Thinking Method (Putu Riyaldi Putra Narendra)

Figure 4 .
Figure 4. User Persona Figure 4 is User Personas from one of the seller and buyer respondents to the Balinese Traditional Products marketplace application named A.A Rai Ardiani and Gusti Ayu Sri Artaty.User Personas are created after analyzing the results of the user needs questionnaire and accommodating them into user personas that represent potential sellers of the Balinese Traditional Products marketplace application.

Figure 5 .Figure 6 .
Figure 5. User Journey Map Seller Figure 5 is a user journey map from one of the seller respondents the Balinese Traditional Products marketplace application named A.A Rai Ardiani.The user journey map is created after the results of interviews that ask users about the steps they face when selling their goods online.The following is a user journey map for one of the respondents who bought the Balinese Traditional Products marketplace application.

Figure 8 .
Figure 8.Home Page Balinese traditional product marketplace application

Table 2 .
Number of Task ScenariosTabel 2 is the total number of usability tests using task scenarios.As can be seen in the table, the total number of task scenarios is 24, the seller respondents received 13 task scenarios, namely task scenarios 1-7 and 19-24, while the buyer respondents received 18 task Website Based UI/UX Application Design Of Balinese Traditional Products Using The Design Thinking Method (Putu Riyaldi Putra Narendra) scenarios, namely task scenarios 1-18.The results of the user task scenario with the seller role are as follows.The recap of the seller's task scenario test results is as follows.

Table 3 .
Recap Results of the Seller's Task Scenario

Table 4 .
Recap of the seller's task scenario

Table 5
Website Based UI/UX Application Design Of Balinese Traditional Products Using The Design Thinking Method (Putu Riyaldi Putra Narendra) home page.