Designing User Interface and User Experience by Using User Centered Design on Gamified Platform "Ezedu"

: Online learning activities using games or gamified methods make students motivated, capable, and involved to participate in the learning process. There are several gamified platforms that are already available


Introduction
Education is very important in life, in the COVID pandemic education is one of the areas affected so changes for safety must be made, namely by implementing online classes (Hanafiah, 2022).Various clinical and educational institutions have suspended their classes to limit the transmission of the coronavirus.This disruption has actually led to major consequences in conducting online classes and remote assessments through online methods (Mian, 2020).Therefore, the challenge for instructors is to design a learning environment that considers online learning readiness and students remain engaged with their materials and assignments (Bovermann, 2018).An online learning environment where students are still able to participate actively and well needs to be implemented by lecturers and teachers.
Previous studies have found that student satisfaction with online learning is low due to missing clinical rotations, inadequate alternatives to online learning practices and stressful conditions during online classes.The stress experienced by students during their nursing education is slightly above the moderate level (Senturk, 2018).The development of technology in the 4.0 era is accelerating and demands to provide solutions and innovations in technology products.Gamification is a method that applies the use of game elements in terms of game mechanics and game dynamics in non-game applications (Putra et al, 2020).Game-based learning to reduce stress levels in online learning is necessary so that students continue to play an active and good role in the learning process.Some gamified platforms for education already exist, but there are some shortcomings, namely the user takes a long time to compile quizzes and some features on gamified are paid so that the utilization of features is less than optimal.
Based on the problems above, it is necessary to design a method for online learning models that are easy for users to operate and user friendly.Gamified platform "Ezedu" is a learning media created in order to overcome these problems, making it easier for lecturers and teachers to design quizzes.User Interface and User Experience (IU/UX) design is important to facilitate the experience and provide solutions to users.User Interface is all components of interactive systems (software and hardware) that provide control for users to complete certain tasks using the system and have a function of connecting or translating information from the system to the user and user to system (ISO, 2006).User Experience is a person's point of view and response to the use of a product, service, or system (ISO, 2010).UI and UX design aims to make "Ezedu" can be used by lecturers and teachers and students can use it easily and more efficiently.This research uses the User Centered Design (UCD) approach which focuses not only on human characteristics and perceptions in general but also the specific properties of the target users to create solutions to the problems at hand.
Based on the background above, this research was conducted to present the UI/UX design on the gamified "Ezedu" platform that suits user needs.Ease of use of a system is the main thing that must be considered in the development and design of a system (Handayani et al, 2019).This research uses a User Centered Design approach to achieve objectives in terms of UI and UX.User Centered Design (UCD) is a term that describes a design process where the end-user will influence how the design is formed (McLoone HE et al, 2010).User Centered Design (UCD) is a broad term to describe design processes in which end-users influence how a design takes shape (Abras et al, 2004).
UCD Method It is hoped that by designing the User Interface and User Experience "Ezedu" it can facilitate its use by users because this method involves the user from the beginning to the interface design (Pramesti et al, 2022).The result of this research is a visual User Interface (UI) design that is in accordance with user needs and User Experience (UX) design that makes it easy to use by users in accordance with the UCD method.The mandatory output of this research is the publication of scientific articles in the form of accredited national journals and the acquisition of module and design IPR.

Research Method
This research method uses User Centered Design or abbreviated as UCD.User Centered Design (UCD) is a term that describes the design process in which the end-user will influence how the design is formed (McLoone HE, 2010).The UCD method places the experience of the user as a reference for the design of the application being made.If the design is closer to what the user wants, the higher the chance that the application will be accepted (Solichuddin RB,2021).
The lecturers who are respondents in this research have the following criteria; age category between 25-45 years, male or female, live in urban areas, use computers/ laptops in their work, and have ever gamified students through any application.
The UCD method has stages including specify the context of use; specify user and organization requirements; produce design solutions; evaluate design against user requirements.Literature study is used to find discussions related to the topic to be raised, references used as references in this research related to user interface and user experience along with the User Centered Design method.

Problem identification
Search for problems related to the weaknesses and shortcomings of existing gemified platforms.

Specify the context of use
This stage is used to identify people who will use the system.Researchers used observation methods and short interviews with sources.The interview technique used was semistructured interviews.Semi-structured interviews are interviews that use question guides and questions can develop according to the topics discussed.Some questions for the interview include: a. Do you know about gamification apps? b.Have you ever used gamification applications in the learning/teaching process?c.If so, through which platform did you use the gamification app?
d. What is the effectiveness of using gamification for teaching/learning?e.How often do you use gamification platforms?f.What benefits can you get from using the platform?g.Disadvantages of the platform you are currently using?

Specify user and organization requirements
This stage is used to identify what needs or requirements from users must be met for the system to be considered successful.User needs are obtained when identifying problems and needs have been validated by users.The results of the interviews that have been obtained then analyze the problems of the users and also the suggestions given by the users.At this stage, brainstorming will be carried out from researchers with users to present solutions to problems from users.Solution validation is done face-to-face.

Produce design solution
At this stage is the stage of designing prototype User Interface (UI) and User Experience (UX) in accordance with the wishes and needs of users in accordance with the validation of solutions that have been approved by the user.

Evaluate design against user requirement
Evaluate the design by showing the design results of the previous stage process in front of the end user or end user.Testing will be completed if the prototype is in accordance with the wishes of the user.If at the evaluation stage it turns out that it is not in accordance with the wishes of the user, then the stage will return to the Produce design solution stage to get the appropriate UI/UX.

Specify the context of use
The User Centered Design/UCD method is a method where the user has an important role.Users will be involved at the beginning of the research until the end of the design.The users in this research are educational actors such as teachers or lecturers.The analysis we do is looking at the use of electronic media in the world of education in universities where students interact more often using electronic media such as laptops.The users of this research are lecturers at Sekolah Tinggi Ilmu Kesehatan Hang Tuah Surabaya from various study programs with suitable several respondents criteria.The user of this research is 4 respondents.After determining the criteria, semi-structured interviews will be conducted with users which will then obtain several problems and solutions.

Specify user and organization requirements
The point of questions to 4 participants are emphasized on confusing and less simple display, there are user restrictions, cannot provide lecture material, and takes a long time when making educational games.The solution to several problems obtained from interviews with participants is the basis for researchers to design wireframes.The "Ezedu" gamified platform provides solutions to existing problems, so the appropriate wireframe and user interface design is carried out.The wireframe design will be validated by users before finally entering the user interface design stage.The wireframe of the login page is divided into 2 views.The left display allows the user to enter the system as a lecturer or student.On the right side, the user enters the username and password to log in to "Ezedu".supporting images if available, for example pictures of medical terminology in organ system anatomy material.Wireframe of Student Login page is a login display for students which is initially divided into 2 screens, on the second layer the student enters the code for the quiz or material to be accessed.Furthermore, it has been corrected to be a different page.

Produce design solution
The design of the "Ezedu" gamified platform user interface that has been validated by participants at the wireframe stage.The user interface is designed by playing with colors to make it attractive and beautiful.This interface design is in accordance with the problem solution and also input by users at the previous stage.The login page consists of 2 users, namely login as a lecturer and login as a student.When the user logs in as a lecturer, the side view will be a username and password, meaning that the lecturer has an account on this platform.The user interface of Lecturer Login page requires the teacher to fill in the National Lecturer Identification Number and registered password to access the "Ezedu" gamified platform.
Figure 10.UI of Student Login Page Users who enter as students will find a side view in the form of entering a code.The code in question is the game code or material code given by the lecturer.After entering the code, students must enter their name or face identification feature.Then students will immediately enter the material or game room according to the code entered.On the home page, the lecturer will display 3 main menus, namely home, content and assignment.On the home page, users can manage profiles.The content menu in which users

Figure 1 .
Figure 1.Research Flowchart Stages of research: 1. Literature studyLiterature study is used to find discussions related to the topic to be raised, references used as references in this research related to user interface and user experience along with the User Centered Design method.2.Problem identificationSearch for problems related to the weaknesses and shortcomings of existing gemified platforms.3.Specify the context of useThis stage is used to identify people who will use the system.Researchers used observation methods and short interviews with sources.The interview technique used was semistructured interviews.Semi-structured interviews are interviews that use question guides and questions can develop according to the topics discussed.Some questions for the interview include: a. Do you know about gamification apps? b.Have you ever used gamification applications in the learning/teaching process?c.If so, through which platform did you use the gamification app?

Figure 2 .
Figure 2. Wireframe of Login Page

Figure 3 .
Figure 3. Wireframe of Lecturer Login Page

Figure 4 .
Figure 4. Wireframe of Lecturer Content Page Wireframe of Content Page on this page, lecturers or teachers can add content for learning.The learning content created can be in the form of material documents, videos and

Figure 5 .
Figure 5. Wireframe of Lecturer Assignment Page

Figure 6 .
Figure 6.Wireframe of The Create New Page

Figure 7 .
Figure 7. Wireframe of Student Login Page

Figure 8 .
Figure 8. UI of Login Page

Figure 9 .
Figure 9. UI of Lecturer Login Page

Figure 11 .
Figure 11.UI of Lecturer Home Page