UI/UX Case Study : Designing User Interface and User Experience for the Website edspert.id Using the User-Centered Design Method
Summary
Edspert.id is a web-based electronic learning media that aims to provide learning that focuses on expertise in the digital / IT field such as programming, design, or digital marketing. Based on the results of an interview with Muhammad Ali Topan, the Edspert.id Program Manager, so far Edspert.id has been developed only from the programmer’s point of view, and does not pay attention to the visual side or user experience and also based on the observations of researchers, found that there are deficiencies such as the edspert.id web information that is incomplete, confusing navigation, and display that needs to be updated. Based on these problems, a problem-solving approach method is needed to have a good impact on users, so edspert.id requires a good User interface and User Experience design. The User Centered Design (UCD) approach was chosen in this study because in the research process users are directly involved as the main basis for system development. Active user involvement is a determinant in future website development. The results of the design in the form of a prototype were tested using a User Acceptance test for 25 users and the average value of the 5 test criteria variables was obtained: Balance 91.7%, Unity 89.3%, Emphasis (Emphasis) 89%, Rhythm (Rhythm) 93.3%, Proportion (Proportion) obtained 89.3%. So that the final value of all variables obtained an average of 90.52% has been declared Very Good.
Introduction
Edspert.id is one of the web-based learning platforms aimed at providing skill-focused education in the digital/IT field, such as programming, design, and digital marketing. Based on an interview with PT. Widya Kreasi Bangsa, Muhammad Ali Topan, the Program Manager of Edspert.id, mentioned that so far, the development of Edspert.id has been solely from a programmer’s perspective. The system was created to be functional without much consideration for visual aspects or user experience when using the website. Additionally, based on observations by researchers, there were identified shortcomings such as incomplete web information, confusing navigation, and outdated design.
Due to these deficiencies in terms of visual aspects and user experience on the Edspert.id website, it cannot be deemed comfortable and enjoyable to use yet. It has not been maximally effective in assisting users to achieve their goals, which is to serve as a platform for learning desired skills.
In the old version of edspert.id, it can be observed that based on user interviews, users encountered difficulties in accessing class details due to the lack of clear interaction from the cards that direct them to the class detail pages. It can be concluded that the functionality and performance of the edspert.id website cannot be considered satisfactory.
Given these issues, a problem-solving approach is needed to provide a positive impact on users. Therefore, edspert.id requires a good User Interface (UI) and User Experience (UX) design. User Interface (UI) refers to the point where the system and the user can interact with each other through commands, such as using content and inputting data. On the other hand, User Experience (UX) is described as the experience related to a user’s reactions, perceptions, behaviors, emotions, and thoughts while using a system.
Research Phases
The research methodology to be employed will utilize the User Centered Design method. The following are the stages of the research:
1. Plan the User-Centered Design
In this stage, preparation is carried out before conducting research using User-Centered Design. This involves collecting information from various sources and conducting observations and interviews with users and stakeholders.
a. Literature Review
Literature review is a stage of collecting information from various printed and electronic sources. The researcher conducts a literature review to gather references and insights and to understand the User-Centered Design methodology in the process of designing User Interface and User Experience. It serves as a reference in the analysis and evaluation process using User Acceptance Test on the created design.
b. Observation and Interview
In this stage, observation and interview activities take place. Observation involves monitoring the location of the object, the stakeholder’s situation, understanding the user, and browsing about edspert.id (appearance, etc.). Interviews are conducted with stakeholders and users to understand the issues. An interview was conducted with Muhammad Ali Topan (via Google Meet), the Program Manager of Edspert.id. Additionally, interviews were conducted with 5 users of edspert.id.
Interviews with stakeholders and 5 users were conducted to identify issues related to the user interface and user experience (UI/UX). The results of the interviews conducted with the Program Manager of Edspert.id and 5 users from March 15 to April 24, 2022, lead to the conclusion that there are several issues that need to be addressed.
Solution
2. Understand Context of Use
In this stage, based on the observations and interviews conducted, information has been collected and detailed results have been found to determine User Identification and User Persona.
a. User Identification
User identification aims to elaborate on the characteristics of users directly involved in the use of the system. Here are the results of user identification:
Age: 18–25 years
Education: Fresh graduates from high school (SMA/SMK) or college attendees
Experience: Experienced in online learning and website usage.
b. User Persona
User Persona aims to define the characteristics of users who meet the target user criteria for Edspert.id. After interviewing 5 Edspert.id users, here are the results for one of the User Personas.
3. Specifying User Requirements
After identifying and determining user characteristics, the next step is to specify user requirements by understanding user needs based on interview results.
a. user requirements
b. Site map
The sitemap serves as an overview or flow of features on edspert.id. It is explained that on the homepage, there are 4 sections: Featured Classes, Class Categories, Testimonials, and About Us. Each section will lead to its respective page.
4. Design Solution
In this stage, the researcher engages in designing the interface, starting with the Low-Fidelity Wireframe, High-Fidelity Wireframe, and Prototype phases.
a. Wireframe Low Fidelity
Wireframe is the initial design or basic framework of a website before it becomes a prototype.
b. Wireframe High Fidelity
High Fidelity is the finalization stage of the wireframe with the addition of color, content, proportional layout sizing, and supporting illustrations.
4. Evaluate against requirement
In this stage, testing and evaluation of the design are conducted using the User Acceptance Test method. The testing involves distributing online questionnaires. The researcher initially set a target of 23 research subjects, divided into 3 stakeholders: 5 student users, 5 users who have completed high school or equivalent, 5 Fresh graduates, and 5 users who are already employed. However, due to challenges in the researcher’s conditions during the design phase, such as the COVID-19 pandemic, limited communication, and internship time with the internal edspert.id team, there were changes in the testing subjects. The revised structure includes 1 stakeholder and 24 users. This decision is based on considerations, citing Nielsen (2013), that the minimum number of respondents for testing should be 20 people. Participants are distributed across the age ranges of 20–21 years (64%), 22–23 years (28%), and 25–26 years (8%). Their educational/work backgrounds consist of 40% students, 16% high school graduates or equivalent, 12% Fresh graduates, and 32% already employed.
Based on the test results in the table above using the User Acceptance Test (UAT) method:
- Balance Variable: The average percentage is 91.7%, indicating that the development of edspert.id has a very good display with clear presentation of information and images.
- Unity Variable: The average percentage is 89.3%, suggesting that the development of edspert.id has a good combination of colors, a well-structured menu, and is in line with current trends.
- Emphasis Variable: The average percentage is 89%, indicating that the development of edspert.id has a good understanding of menus and payment features.
- Rhythm Variable: The average percentage is 93.3%, suggesting that the development of edspert.id provides a very good user experience.
- Proportion Variable: The average percentage is 89.3%, indicating that the development of edspert.id has an appropriate and user-friendly display, font types and sizes, and buttons.
In summary, these results suggest that edspert.id, in terms of development, has a very good display, clear information and images, a good combination of colors, a well-structured menu, and excellent user experience. The menus and payment features are well-understood, and the overall design is appropriate and easy for users to understand.
The results of determining the final score indicate that the goals of the User Interface and User Experience Design for edspert.id using the User-Centered Design method have exceeded expectations. Based on the questionnaire responses from 25 participants and the interval table, the final result is 90.52%, which is declared as Excellent.
Documentation :
