Redesign User Interface (UI) and User Experience (UX) of Ikan Giling Segar Website with Design Thinking Method to Increase User Interest

ABSTRACT


INTRODUCTION
The current digital era has rapidly changed business patterns, especially in the development of the internet which brings changes to people's consumption patterns in P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.id online shopping.Indonesia's Central Bureau of Statistics present data in the past year, there has been rapid growth in the online business sector which is estimated to increase by 4.46% to 2,995,986 businesses (www.bps.go.id) [1].Not only has changed the way consumers shop, this transformation also forced conventional businesses to adapt to the advancements.This online buying and selling activity has transformed the traditional industry by offering innovative products, lower prices, and increased convenience for customers [2].Indonesia's fisheries sector, as the country with the second largest marine economy in the world after China, in 2019 this sector has opened around 5.23 million jobs for fishermen and fish farmers, meanwhile in 2021 around 1.25 million [3].The industry is experiencing significant consumption growth.The Ministry of Marine Affairs and Fisheries (MMAF) also reported that the national fish consumption rate reached 56.48 kg per capita in 2022, with a target of reaching 62.05 kg in 2024 (databoks.katadata.co.id) [4].With high business growth potential, this sector is challenging to innovate in online business.According to data from Indonesia's Central Bureau of Statistics, every year there is an increase in the number of newly operating businesses that go online.In the range of 2017-2020, 51.47% of new businesses started operating and will continue to grow along with the increasingly rapid development of technology (www.bps.go.id) [5].
In this context, websites play an important role in driving business success, as they not only serve as product information platforms, but can also increase business visibility and accessibility.As one of the media used in digital marketing, website has an important role to build branding and business professionalism [6].However, to achieve these marketing goals, attractive UI/UX design is the key in customer retention, [7] because the quality of website design has a positive and significant impact on buying interest.In other words, a visual appealing and innovative website can increase attractiveness, provide a pleasant experience to customers, and satisfy their needs, thereby increasing buying interest and propensity to make purchases [8].
One of the fisheries sector businesses that has also run a business website as a digital transformation effort is Toko Sabrina with its website called Ikan Giling Segar (https://ikangilingsegar.com/).Toko Sabrina itself is one of Malang's ground fish and frozen food agents that provides various types of ground fish for cooking ingredients.Although this business already has its own website, the owner of Toko Sabrina also said that compared to other media used to build product branding, Ikan Giling Segar website is still not optimal in attracting customers.Reinforced by the results of questionnaires from 40 respondents who had accessed that website.Five of the six aspects of user experience, such as attractiveness, efficiency, clarity, stimulation, and novelty, were in the below-average category, while one other aspect, accuracy, was in the bad category.
In fact, a beautiful design causes a positive reaction in a person's brain [9].In addition, the proper placement of items can also affect a person's long-term memory and working memory.Thus, it is important to place the main content in the right position so that the core information can be conveyed well to users.Several previous UI/UX studies have P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.id shown that applying design thinking by paying attention to UI/UX principles can improve user experience and website effectiveness.For example, a study that redesign of Telkom University's Open Library website successfully increased user satisfaction by applying design thinking methods [10].In addition, another study found a significant increase, by 47%, in the level of usability after redesigning the Elsam website with the User Experience Questionnaire (UEQ) method [11].Research on the BTA Group website also recorded significant changes in the UEQ assessments after designing a new interface design [12].Another study achieved a score of 87 in the usability test and increase the mean scores in all aspects of UEQ.These results show that the application of design thinking with the help of the UEQ method can make a positive contribution to user experience and website quality.
Some of these things are then background of this research.The use of design thinking framework and User Experience Questionnaire (UEQ) methods can create a holistic approach that combines deep understanding of users with structured monitoring and measurement of user experience.This can increase the chances of success in designing a product or service that truly meet their needs and expectations.This study aims to deal with problems that occur, and see the difference in user assessment results on the appearance of the redesign Ikan Giling Segar website that will be made.It is hoped that this research can also increase the usability value of the website and produce solutions to the development of Ikan Giling Segar website based on the applied design thinking method and laws of ux.

RESEARCH METHOD
This type of research is Research and Development (R&D) because it develops an existing product, namely Ikan Giling Segar website owned by Toko Sabrina.Research and Development (R&D) research method is a method that encourages the creation of product innovation or iterative development [13].
Data were collected through statistical or quantitative data from questionnaires, as well as supporting data from literature studies, both from books, journals, and other literature, as well as previous research related to this research.The data collection technique used is purposive sampling.The population in this study is people in the East Java region, with the sample including users who have interacted with Ikan Giling Segar website within a certain period of time.
In designing the UI / UX design for the website, this study applies design thinking method because this method can help extract, understand, and implement human-centered techniques to solve problems in a creative, innovative, and more systematic ways in the design process, business, and even for our daily life [14].However, to increase product innovation, the needs, wants, and aspirations of users are the most important things to consider [15].
The design thinking framework according to Sugangga has several stages as shown in Figure 1

Emparthize
The process of empathising is key to the human-centered design process because it understands the problems faced by users and helps them to come up with solutions through various methods.The empathy process in this research will be carried out by distributing a pre-research questionnaire consisting of 26 questions according to the provisions of the User Experience Questionnaire (UEQ) method.
The UEQ method itself is an easy-to-use, reliable, informative, and subjective measurement of user experience survey data in the form of quantitative data.UEQ uses six measurement scales to measure user experience, including: 1) Attractiveness: Does the user like or dislike the app?; 2) Efficiency: Is the application fast and efficient?; 3) Perspicuity: Is the app easy to use and learn?; 4) Dependability: Is the application secure and predictable?; 5) Stimulation: Is the app fun and increases the user's interest in using it?;6) Novelty: Does the appearance of the application have novelty and attract the attention of the user?[17].
The results of respondents' answers obtained after answering the 26 questions will then be converted to the UEQ rating scale as in Table 1 below.The results of the data conversion above will then be calculated the average value on each item for all answers, and grouped into 6 UEQ scales so as to get the results of the P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.id mean and variance calculations.However, Schrepp & Thomaschewski said that Mean and Variance alone are not enough to evaluate product quality.[18].Therefore, the comparison is carried out using a benchmark dataset containing the evaluation results of all products that have previously evaluated user experience using UEQ.The benchmark comparison results have five categories, such as Excellent, Good, Above Average, Below Average, and Bad.

Define
This process aims to define the problem that has been defined in the previous stage into a problem formulation.In this research, to be able to define the problem correctly, it is important to understand the characteristics and needs of users.So this stage will create a user persona and empathy map according to the type of user of Ikan Giling Segar website.

Ideate
Ideation focuses on idea generation.Based on the problems that have been formulated previously, this stage will produce a problem-solving design as a basis for continuing the next process.

Prototyping
Prototyping is the process of realising the ideas and explorations made in the previous process into physical form.In the initial exploration, prototypes can be made into a rough and more compact form to investigate different possibilities.

Testing
The testing stage is done to better understand users and get their feedback to help improve the design through user interaction with the product design or prototype that has been made.This process is a life cycle so that it can continue to repeat if another error is found in the product.At this stage two types of testing will be carried out, namely User Experience Questionnaire (UEQ) and Usability Testing (UT), so there are differences in the number of samples taken.Testing with the User Experience Questionnaire (UEQ) method will target a sample of 40 respondents.This is based on the theory that there are several differences in the number of samples to estimate binary UX Metrics depending on the level of confidence and margin of error to be taken.The lower the confidence level taken, the riskier the research.Or the greater the margin of error, the less precise, and the fewer useful numbers [19].However, if you want to get low risk with good precision or a margin of error of 15 per cent and a confidence level of 95%, then 39 users are needed in the test or can be rounded up to 40 users.As for Usability Testing (UT), this study took a sample of 20 users.P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.id According to Nielsen, to get a statistically significant number of results and a tight confidence interval requires more users, at least 20 users [20].

Empathize
The empathise stage is carried out to understand the problems experienced by users or know their perspective when accessing Ikan Giling Segar website.So the data collection at this stage was carried out by distributing pre-questionnaires to 40 respondents using the User Experience Questionnaire (UEQ) method to find out user experience and satisfaction with Ikan Giling Segar website.The following benchmarking results from the prequestionnaire can be seen in Table 2. Based on the benchmarking results above, there are five scales that get results in the Below Average category, namely Attractiveness, Perspicuity, Efficiency, Stimulation, and Novelty.This means that Ikan Giling Segar website is below 50% of the benchmark dataset products that have worse assessment results.While one other aspect, namely Dependability has a bad score or is in the range of the worst 25% which can be seen in Figure 2 below.

Define
The define stage is done by analysing the data that has been obtained from the previous stage and defining it into a problem formulation.The problem that will be solved on this Ikan Giling Segar website is the landing page.Landing page itself is a website page designed to display more specialised information on the front page [21], so that website visitors can focus more on the content they first see.To better understand the characteristics of users of this Ikan Giling Segar website, a user persona and empathy map were also created.

User Persona
User persona is the process of collecting data and information about users to find out their characteristics by defining personas, which are the focus of software development.[22].In this study, two different user personas were created to represent the types of users of Ikan Giling Segar website with jobs as housewives and restaurant owners, which can be seen in Figure 3

Empathy Map
Sharfina and Santoso define empathy maps as tools that can help make decisions by better understanding user problems and needs.[23].It consists of four quadrants: Says, Thinks, Does, and Feels.The Says quadrant records user statements, the Thinks quadrant records user thoughts, the Does quadrant records user actions, while the Feels quadrant records user feelings.After identifying the key user features or descriptions for this website, the next step is to describe the user's emotions, perceptions, and experiences when using it, as shown in Figure 4

Ideate
At this stage, ideas will be generated which are a form of solution to the problems that have been found in the previous stage.One of the things that can be done to get an innovation is to observe the products owned by competitors, then consider what can be applied and developed on Ikan Giling Segar website.So a competitive analysis was carried out by comparing fish buying and selling websites that have been widely used, such as ICAN Nelayan, Belanja Ikan, and Segar Laut Meat & Fish Supplier which can be seen in Table 3 as follows.
Of the three competitors of Ikan Giling Segar website, the features that are found on the three websites above but not on Ikan Giling Segar website are product categories, carousels, FAQs, and blogs.In addition, when compared to other websites, the Ikan Giling Segar website still has shortcomings in terms of the completeness of the information displayed, as well as the consistency of image size and distance between content.So after making this comparison, the next step is to make ideas about what features can be used in P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.id the design of the new Ikan Giling Segar website display by pouring it into the information architecture, as shown in Figure 5 below.

Prototyping
The next stage is to do prototyping or make an initial design of the product to be made in the form of Low Fidelity (Lo-Fi) and High Fidelity (Hi-Fi).

Low Fidelity
To implement ideas on the information architecture that has been made, then a low fidelity is made as a rough sketch or initial description of the redesign of Ikan Giling Segar website for the next stage of development [24], as shown in Figure 6 below.

High Fidelity
After low fidelity is created, the next step is to visualise the design results into a more tangible or high fidelity form.In making it, it is important to pay attention to various aesthetic aspects, such as attractive design, organised layout, use of contrasting colours, or appropriate fonts [25].The high fidelity form of this Ikan Giling Segar website redesign can be seen in Figure 7 below.

Usability Testing
To validate whether the prototype that has been made can run well, usability testing is carried out.According to Ningrum, usability testing is a method used to evaluate a system or product to user representatives [26].This aspect needs to be considered because if users cannot use the product correctly or their goals cannot be achieved, they will look for things that can fulfil their needs, so the possibility of users switching to other products will be higher [27].
Then in its implementation, usability testing of this research was carried out on 20 respondents using the Maze tool with several test scenarios for all features on Ikan Giling Segar website.Contains aspects of assessment, such as direct success, mission unfinished, and average time per task with results as in Table 4 below:  The benchmarking results above, there are five scales that get results in the Excellent category, namely Attractiveness, Perspicuity, Efficiency, Dependability, and Stimulation.This means that Ikan Giling Segar website is below 10% of the best results.While the Novelty aspect is included in the good category or 10% of the results are in the better benchmark data set, 75% have worse results.The benchmark result graph can be seen in Figure 8 below.To be able to see more clearly the difference in the mean UEQ results before and after the redesign, a summary of the results is contained in Table 6 below.From the table, it can be seen that there is a significant increase in all aspects of the UEQ assessment before and after redesign.In the pre-questionnaire before the redesign, it was found that the aspects of attractiveness, efficiency, clarity, stimulation, and novelty were in the below-average category, and accuracy was in the poor category.Then in the benchmarking process of similar competitors, there are deficiencies in the website, such as the absence of product categories, carousels, FAQs, and blogs, the lack of completeness of the information displayed, as well as the consistency of image size and distance between content.
So some changes were made, such as adding several features, providing complete product and business information, consistency in colour, size, content, and proper layout placement, so that an increase in all aspects of UEQ was obtained in the questionnaire results after the redesign.Therefore, this improvement can be evidence and a foundation that this research has achieved its goals, and the prototype made can be a reference for future website improvements.

CONCLUSION
This research uses design thinking as a framework to redesign Ikan Giling Segar website.At the empathise stage, a pre-questionnaire was distributed to 40 respondents using the User Experience Questionnaire (UEQ) and a problem was found that five of the six UEQ scales, such as Attractiveness, Perspicuity, Efficiency, Stimulation, and Novelty were in the below-average category.While the Dependability aspect was in the poor category.Then at the define stage, two user personas and empathy maps were made based on the type of user of Ikan Giling Segar website to better understand user characteristics, so that a problem mapping can also be done.From this stage, several user needs were found, such as clarity of product information, trust in company services and branding, and easy access to information and the ordering process.
To generate ideas of what features can be developed, at the ideate stage competitive benchmarking is carried out against several similar websites.The results of the comparison are then implemented into the form of information architecture, until then a low fidelity and high fidelity is made at the prototyping stage.The redesign results were then tested using two methods, namely usability testing to 20 respondents using Maze and User Experience Questionnaire (UEQ) with Google Form to 40 respondents.
Based on the usability testing process with four scenarios, the results show that users can complete all stages quite well so that it can be said that users can understand the flow of the redesigned prototype.Furthermore, for testing with the User Experience Questionnaire (UEQ), it was found that aspects such as Attractiveness, Perspicuity, P.ISSN: 2086 -4981 E.ISSN: 2620 -6390 tip.ppj.unp.ac.idEfficiency, Dependability, and Stimulation were included in the very good category.While the Novelty aspect is included in the good category.When compared to the UEQ results before the redesign, all aspects have increased.Attractiveness increased by 1,29 points, Perspicuity increased by 1,31 points, Efficiency increased by 1,04 points, Dependability increased by 1,09 points, Stimulation increased by 1,32 points, and Novelty increased by 1,23 points.
In this regard, other studies have also validated that the completeness, convenience, quality, and ease of use aspects of a business's online platform affect user interest [28].So, it can be concluded that the results of this redesign have succeeded in increasing user interest and experience, and can be used as recommendations for the development of the Ikan Giling Segar website in the future, or for other online business websites, because basically the features and layouts that are usually applied to each business website are not much different.

Figure 8 .
Figure 8. Product Benchmark Chart after Redesign

Table 1 .
Scale Value Transformation

Table 4 .
Usability Testing Results

.2. User Experience Questionnaire Then
testing with UEQ again after redesigning Ikan Giling Segar website to see the difference in UEQ results on the previous website display.Table5below shows the UEQ benchmarking results after redesign.

Table 6 .
Comparison of UEQ Results before and after Redesign