Implementation of the User Centered Design method on the Mobile Web

,


Introduction
Sulthan Muazzam Vocational School is a school located in Pekanbaru City, Riau Province. According to information from the school principal Adi Saputro, this school often experiences several obstacles such as data loss, difficulty in managing administrative problems, etc. Coupled with the endless pandemic, it is increasingly difficult for schools to carry out the teaching and learning process [1], [2]. The lack of IT personnel at the school also made the situation worse. The principal also said that the understanding of teachers, students, and guardians of students regarding the internet is also still lacking due to poor internet connectivity and various other things. With the rapid development of the times, everything must be connected to the internet, including schools. The lack of optimal use of technology in schools [3], [4], especially those in remote areas, makes it difficult for these schools to compete with schools in cities, both in terms of quality of education and administrative matters [5],[6], [7]. The dream of equalizing the quality of education in Indonesia will not be achieved if remote areas still lack literacy about the internet. One of the first steps is to create an official school website with a simple and easy-to-understand interface for ordinary people. Website or site can be defined as a collection of pages that are used to display text information, still or motion pictures, sound animations, and or a combination of all of them, both static and dynamic which form a series of interrelated buildings, each of which is linked [8]. with page networks [22]. This website will also be useful as a bridge for students and teachers. For example, teachers can post important news and announcements on the website in the hope that students and parents can get information more quickly and accurately. Website is a collection of web pages, which are summarized in a domain or subdomain, whose place is on the World Wide Web (WWW) on the internet [23], [9]. Considering the frequent occurrence of data loss at SMK Sulthan Muazzam Syah, teaching staff can also use this website to store school data such as attendance, student learning limits, etc., and of course have more secure data security. Better yet, information about student attendance and learning limits can be displayed transparently, so that students and their guardians can also access it, in simple language, students' parents can know their child's activities while at school [7], [10]. An interface design is a display that will provide a combination of input from a good design and an output mechanism that will satisfy user needs, capabilities, and limitations in the most effective way possible, a good interface will not be felt by the user, and will control the user [11]- [14]. to focus on the information presented [24]. The user interface is a component that cannot be separated from the application in charge of connecting the application with the user so that they can interact easily [15], [16], [17], [25]. This research begins with a plan and then design using figma and balsamiq wireframes. Figma is one of the design tools that is usually used to create the appearance of mobile applications, desktops, websites and others [26]. Figma is a cloud-based design application and prototyping tool for digital projects. Figma was created to help users collaborate on projects and work in teams at once anywhere [27] Balsamiq is software that has been widely used by web designers before creating a website and application, this is done so that they can create a website design that is not only attractive in terms of appearance, but also according to customer needs [28], [18]. After the results of the research above were obtained, we immediately analyzed the data and started to build a website prototype based on the design that had been made previously. Prototype is a prototype is the basic working model of the development of a program (software) or software [19], [29]. Prototyping is a software development method, which is a physical model of the system's work and serves as an initial version of the system. With this prototyping method, a prototype system will be produced as an intermediary for developers and users so that they can interact in the process of developing information systems [20], [21], [30]. The stages in prototyping are as follows: 1. Gathering requirements 2. Quick design process 3. Building prototypes 4. Evaluation and improvement [31]. The final step is to review the design related to this research based on the data we have obtained

Object of Research
The object of the research was carried out at SMK Sulthan Muazzam Syah Pekanbaru.

Research Methods
The research method is carried out using the User Centered Design (UCD) method. The method can be seen in the following figure 1: In this stage, we plan by discussing with supervisors related to research, starting from the place of research, research concepts that will be applied, and others. We also discussed observation. The result is to apply two ways. First, the team representative directly went to SMK Sulthan Muazzam Syah Pekanbaru to interview the principal, namely Adi Saputro, ST. Second, the creation of a google form containing questions that will later be distributed directly to SMK Sulthan Muazzam Syah Pekanbaru students via social media.

Design
We perform two stages in this section. First, doing a rough design using Balsamiq Wireframe, while for the final design using figma. Wireframe is the basic framework or blueprint of a single page application that will be built by application developers. While Figma is one of the design tools that is usually used to create the appearance of mobile applications, desktops, websites and others. Both of these tools can be said to be the best choice for developers to design a web interface.

Prototype
After getting data from observations, then we discussed to analyze the results from the data. We have analyzed many things, one of which is the appearance of the website as it should be based on the data obtained. The next step is to build a web prototype based on the previous design, we built this website using the html, css, javascript, and php programming languages.

Review
Based on an analysis of the effectiveness of using websites for educational institutions, this research aims to facilitate teaching and learning activities at SMK Sulthan Muazzam Syah Pekanbaru. This process will be the result of whether this research can be continued or not.  shortcomings of the old website, which requires a mobile-based website. besides that there is also a school map to make it easier for users to track the school's position

Conclusion
1. The problem of the school website as a medium of information can be solved using the mobile web using the user centered design (UCD) method.
2. still need to update the content because it is still static, and hope the school can manage it well as a dynamic website.
3. A school IT staff is required for maintenance and information updates.