Enhancing UI/UX of The Smart Village System Website Using User-Centered Design Methods

The Smart Village System is a platform specifically designed to help publicize village potential. It is crucial to test the user interface and user experience (UI/UX) of sidespin websites, although they are still far from perfect. Therefore, it becomes a question of whether the UI/UX sidespin is in line with the expectations of the community as the target user. This study intends to design UI/UX on sidespin websites by utilizing the UCD method which aims to improve interface quality, efficiency, and productivity as well as community satisfaction. The UI/UX design on this sidespin website uses the UCD method because several stages involve establishing a relationship and interaction between users. Five people are willing to become User Personas who can provide input on user satisfaction which will be evaluated using a Heuristic Evaluation which will be combined with Survey Ratings. The results of this study state that all aspects of the satisfaction level of the User Persona are in the satisfied category. Recommendations were found to be developed by the Smart Village System Team, among others, in terms of the principles of Heuristic Evaluation 4, 5, and 6. Consistency and Standards have restructured sentences and are consistent from one page to another. Error Prevention has added many features to the sidespin and finally, Recognition rather than recall has implemented local and rural nuances on the page sidespin.


Introduction
The Smart Village System is a system specifically designed to help focus technological development in areas, especially the 3T (Foremost, Outermost and Deepest) village areas (Azhiman et al., 2022).SIDESPIN itself was founded in 2021 through a university program to create a group of students called Student Innovators who aim to create various startups or a system engaged in each field with the ultimate goal of impacting sociopreneurs (Dasmen & Riansyah, 2023).The Smart Village system is based on the fact that users are the main aspect that must be observed in designing digital products.(Sauri et al., 2023)Therefore, product design must be carried out according to the needs and expectations of these users, so that this product can be used properly and satisfies the user.The implementation of the Piksel 11 (2): 207 -220 (September 2023) UCD Method in designing the User Experience/User Interface (UI/UX) on the Smart Village System website is very meaningful to justify if the website can function effectively and match the needs of the community (Kurdiansyah et al., n.d.).
Therefore, the User Centered Design method is used in designing the Smart Village System website to ensure that the products made match the needs and expectations of users (Al Mahal Ramadano & Huda, 2021).By applying the User Centered Design method in designing the UI/UX on the Smart Village System website, it can be more user-friendly and satisfying for users, so that it can provide added value for the community when using it (Ernawati & Indriyanti, 2022).More than that, the application of the User Centered Design method in designing the UI/UX on the Smart Village System website is very meaningful for the success of and usability of the website.
In designing and making this application, the UI/UX Design technology is practiced (Alghifari et al., 2020).One of the steps for making a system is to help make it easier for programmers to implement interfaces for the system with reference to the UI/UX Design that has been designed (Hakim et al., 2022).Making applications is easy thanks to the use of Figma as a Design Platform which is quite mobile to implement.Not only that, User Experience User Interface Design is also an early foundation for carrying out a pretest or beta type in an application or system that we want to develop (Ningsih & Muzakir, 2021).One of the supports for a web-based application platform is the UI/UX.
On the other hand, in a system for distributing information about villages, the Smart Village System is aware of that the User Interface on this platform functions as a support so that it is not dominant with the features provided (Alfian et al., 2022).The Smart Village System's own User Experience chooses to be simple and easy to use so that users get new experience using it to obtain valid data on the Smart Village System website (Rahman et al., 2020).

Research Method
The User-Centered Design (UCD) method is an approach to the process of developing digital products (such as mobile applications or websites) that places the needs and expectations of users as the focus.UCD ensures that products are made and developed by considering all aspects of the user's interaction with the product.

Understand context of use
The initial session on User-Centered Design is mastering the context of using the website you want to build.Not only to determine candidates who will use the website, but also with the aim of extracting data from candidates who will use the website.In this session there are 4 parts in the process, namely ensuring candidates use the website, interviews, creating user personas, and determining pain points.The interview method used to collect information from candidates who will use this website is a semi-structured interview.This is an interview method that uses several problem guide notes after which it can be developed according to the topics discussed.The following are interview problem notes: Apakah anda pernah mendengar tentang website desa?
The results of the interview phase with the 5 candidates who will use this website will later be used to design user personas and determine pain points.This user-centric approach will ensure that the Smart Village System website addresses the specific needs and preferences of its target users, leading to a more engaging and satisfactory user experience.

User Requirements
After obtaining the profile of the prospective user and the necessary information, after confirming the user's needs.At the user requirement specification stage, there are 3 parts of work, namely the creation of data architecture, user flow, and wireframes.Data architecture is the beginning for structuring a group of owned information to make it Piksel 11 (2): 207 -220 (September 2023) easier to design interface design.Not only determining the data structure of a website, but the user side must also be determined as the flow of using the website using user flow.User flow is a flow system for users using the website to solve a problem.Then a wireframe can be intended as a framework for a website's user interface that aims to share preliminary thoughts on the form of a website's user interface to be made.Usually, wireframes can be in the form of low-fidelity where the design is without aesthetic factors such as typography, color tones, images or illustrations.Examples of parts that can be arranged in a wireframe are headers, footers, buttons, content, forms, and others.

Design solutions
In this session we will try to design a user interface that is in accordance with the results of the user needs analysis.The author uses a wireframe design as a basis for designing interface designs to get design results that suit the needs and wishes of the user.Using the Figma application can help create interface designs.The result of this stage is a high-fidelity prototype that will be tested on users.

Requirement Assessment
In this final stage, the user interface design that will be tested is tested to produce usability problems using the Heuristic Evaluation (HE) and Severity Ratings procedures.
HE is a testing method that is tried by experts who function as evaluators to evaluate the parts in designing the user interface that have followed the 10 principles.Conversely Severity Rating is an evaluation obtained by the evaluator to calculate the level of satisfaction in a usability case encountered.
Table 2.Ten Heuristic Evaluation Principles

Visibility of system status
The system must always provide information to the user about what is being done via messages.

Match between system and the real world
The words and language used by the system must be easily understood by the user.Stay away from technical usage terms.

User control and freedom
The interface is able to make it easy and free to run for users.

Consistency and standards
The method of constructing sentences, choosing the type of letters and so on in the system must be strong.

Error prevention
The system is designed to avoid and reduce human error.
Enhancing No.

Recognition rather than recall
The system will be good if it can be understood by the user, not memorized every process uses it.

Flexibility and efficiency of use
The system is made to make it easier for users to do advanced tasks.

Aesthetic and minimalist design
The design of the system design must be safely looked at by considering the selection of typography, good color contrast, and a matching layout.

Help users recognize, diagnose, and recovers user
When an error occurs, the system must also provide data related to what error occurred and how to solve it.

Help and documentation
When an error occurs, the system must also provide data related to what error occurred and how to solve it.
Source: Research Result (2023) Table 3 presents the Severity Ratings, providing an overview of the identified issues and their respective levels of severity.No problem, the system is simple and comfortable to use.

1
Case does not affect the user.Revision is not needed if time is limited.

2
There is the ability of users who face a barrier in implementing the system.Low revision priority level..

3
There is a problem that wants to disturb the user.Major revision priority levels.

4
There is a severe error that causes the user to be unable to execute the system.Revisions must be tried immediately before being used by the user.

Results and Analysis
In the results and discussion of this, implementing the UCD method in the design of the UI/UX on the Smart Village System website will be presented in stages according to the User Centered Design method.Found the following results.

Understand context of use
In this session, there are 4 stages of implementation, namely selecting prospective users, interviewing, creating user personas and determining pain points.
Five prospective users have been selected who meet the criteria in the table 4.After obtaining 5 prospective users who meet the criteria to be interviewed, then carry out interviews with the selected prospective user personas.The interview obtained results with the prospective user persona after which it was used to design a user persona and continued to determine pain points.The following is a feedback table from users filled with features that meet user personas expectations as well as pain points experienced by users when utilizing the Smart Village System Website.

Specifying User Requirements
At this stage there are 3 parts that are done, namely making information architecture, user flow and wireframe.The following is the result of the design using the draw.iotools embedded in Figure 2. The Smart Village System Page serves to provide comprehensive information about the village through the sidespin website.The wireframe of the village page can be seen in Figure 5.

Design solutions
In this section designing the user experience user interface design is done through the figma application.The following is a display of the landing page from the sidespin website.On this landing page it was decided not to explain the overall design of the UI/UX prototyping but to explain how the form and display of the prototype is connected to user needs.To create a solution to user problems that display a display that is not as rigid as the appearance of government websites in general but has local characteristics or is closer to the village, the sidespin Team created an interface.On this Village Page page, the user is shown an interface design by displaying the village name, village address and several photos about the village.Then the author also presents a brief description of the village and a photo of the village head as an identification validation for the leader of that village.For the next section there are several rectangles or buttons to display several village potentials according to the features needed by the user.This feature displays the village, history, village customs and culture, village education, village tourism and finally village products.Followed by the display of the vision and mission of the village, points, or maps of the existence of the village and the organizational structure of the village which is displayed on the sidespin website interface.

Requirements Evaluation
Evaluation is attempted using the HE approaches which is commonly used to carry out an assessment by evaluators which will be combined with Severity Ratings as a benchmark for priority issues that must be resolved first.As a result of this evaluation is presented in the table below.sentences so that it is not consistent from one page to another.Then on the principle of HE 5: Error Prevention there are not many features and there are no features for detailed orders on village tourism features.And finally, the principle of HE 6: Recognition rather than recall, it is found that some pages look stiff so they are not relevant if implemented on the Homepage and several other pages that should indicate local characteristics or an area or a rural area.

Conclusion
Based on the results of interviews with 5 people, it was concluded that pain points are an evaluation of the success of this research and the level of satisfaction of users or indigenous people from the village when using the smart village system website.The results of the interview stated that the 5 people as user personas needed a village website in their village and they believed that there were several factors that could be seen as a potential for implementing the village website itself.Even though he/she has expressed satisfaction as a sidespin user, the user persona also conveys the advantages and disadvantages as well as input features for Team sidespin which have been studied more deeply with the 10 Heuristic Evaluation principal guidelines to justify the Smart Village System itself.Apart from that, to support research on certain aspects in the final stages, the pain point data is combined with the 10 principles of HE to become the results of the HE and Survey Ratings tests.

Figure 2 .
Figure 2. Information Architecture Smart Village System The design uses data obtained from the user persona at the previous stage, i.e., to understand the context of use.There are 4 pieces of information obtained, including: Home, Village, Features and About the Village.The Home page is a landing page that contains an SVG map that can go to the province according to what the user clicks on, then there is a little explanation about the Smart Village System, why you should use it because of its features and finally there are village products and village news.In the Village section is a search page to go to the village page.Then are SIDESPIN Features which contain Village History, Customs and Culture, Village Education Publications, Village Products and finally Village Tourism.The last part of the Information Architecture is About the Village which contains an Explanation of the Smart Village System, History, and the Team of the Smart Village System itself.In Figure 3 below is the output of the user flow design of the Smart Village System also using the Draw.iotools.

Figure 5 .
Figure 5. Village Page Wireframe on the Smart Village System WebsiteThe Smart Village System features a function to find out all the interactions that can be carried out by the user besides searching for information about the village.Of all the things that can be transacted on the sidespin to realize an innovation in purchasing MSMEs in the village.Then the user can also find out more about tourism or village ecotourism.The village page wireframe can be seen in Figure6.

Figure 7 .
Figure 7. Home Page pada Website Sistem Desa Pintar Figure 8. Search Village Page on the Smart Village System Website

PIKSEL status is accredited by the Directorate General of Research Strengthening and Development No. 225/E/KPT/2022 with Indonesian Scientific Index (SINTA) journal-level of S3, starting from Volume 10 (1) 2022 to Volume 14 (2) 2026. 209
Source: Research Result (2023) Figure 1.Process Stages of the User Centered Design Method

Table 2 . Interview Questions No. Pertanyaan 1.
UI/UX of The Smart Village System Website Using User-Centered Design Methods PIKSEL status is accredited by the Directorate General of Research Strengthening and Development No. 225/E/KPT/2022 with Indonesian Scientific Index (SINTA) journal-level of S3, starting from Volume 10 (1) 2022 to Volume 14 (2) 2026.211

Table 4 .
Criteria for Potential Users

Table 5 .
Features and Pain Points

Table 6 .
Principle Heuristic Evaluation

Table 6
yields 7 out of 10 HE principles that there are no problems, on the other hand that there are two minor level errors and one moderate level error.In one of the principles of HE 4: Consistency and Standard, there are several spaces between PIKSEL status is accredited by the Directorate General of Research Strengthening and Development No. 225/E/KPT/2022 with Indonesian Scientific Index (SINTA) journal-level of S3, starting from Volume 10 (1) 2022 to Volume 14 (2) 2026.219