Designing User Interface of a Mobile Learning Application by Using a Design Thinking Approach: A Case Study on UNI Course

UNI Couse, a mobile learning application product developed by CV Unindo Hestama Kreatif, is a mobile learning application that newly transform its system from web-based e-learning platforms. The incapability of web-based systems to gain a better experience with wider consumers trigger the transformation. Designing a mobile learning application is a strategy to increase the usability of the existing e-learning system in a higher variety of services as well as more users. This study utilizes a design thinking approach to understand what user feels and need in their experience of using a mobile application. This approach consists of five stages and is divided into three processes: understanding, designing, and evaluating. This study illustrates a step-by-step design thinking implementation as well as the result of each stage. User testing assesses the usability of the mobile learning application. Finally, design thinking implementation reveals that more users feel comfortable with the apps because all features are needed and easy to understand. The design thinking approach has successfully helped UNI Course to create mobile learning applications that satisfy the users.

system through graphic images, icons, menus, and a pointing device such as a mouse or trackball. Due to the quality of interaction, four dimensions construct UI: the input or output dimension (the look), the dialogue dimension (the feel), the technical or functional dimension (the access to tools and services), and the organizational dimension (the communication and co-operation support) (Oppermann, 2002). In addition, UI beautifies the appearance and facilitates the user to interact with the system. An attractive, easy-to-use system display will increase customer satisfaction (Suratno, 2016). Therefore, the user interface should incorporate as many as system features the expected user population is familiar with.
As a visual part of a platform, the user interface has a role in ensuring the user to be able to interact with the application and how the information can be well-received by the user. The user interface itself combines the concepts of visual design, interaction design, and information infrastructure. Making sure the user satisfaction aspect within the user interface, user experience can determine how easy or difficult the interface is when interacting with interface elements that have been created by UI designers (Pradana & Idris, 2021). Instructions for preparing the user interface design in a mobile application would vary depending on the operating system incorporated (Ghiffary et al., 2018). In this case, the UNI Couse application is based on Android. Hence, the reference for this study in building UI is the design principles of mobile apps, known as Material Design Guidelines.

Material Design Guidelines
All products from Google, including Android, refer to Material Design Guidelines (Ghiffary et al., 2018). This design guideline includes the display on various devices, the use of images and symbols, and interaction with the user. The guidelines described in Material Design Guidelines are comprehensive. Therefore, designing an interface for the UNI Couse will only choose some of the relevant design components for the case studies. The following are some components concentrated in this case study: (1) layout, color design, and display control view. First, the layout is a part of interface design that regulates visual elements on a page in the interface. Then, color is one of the essential components that make up a system. Thus, the color design must also be strategic. Last, the display control view allows users to interact with data through a user interface (O'Connor, 2015).
The layout settings within the user interface would be different depending on the device used to interact. For example, the layout settings in computer and mobile applications are different due to different screen sizes. General provisions in setting a layout are alignment, proximity or distance, grid, scale, and white space or empty areas. However, added screen size is a particular element that must be considered when doing the layout (O'Connor, 2015). Layout elements within Material Design are grouped into these categories: Units & Measurement, Metrics & Keylines, Structure, and Responsive User Interface.
The color combination that would attract the users' attention must be placed strategically, and the consistent use of colors will also help the users understand the application (O'Connor, 2015). The use of color on an interactive symbol or button will grab the user's attention and informs them that the symbol has a specific function (Ghiffary et al., 2018). From the Material Design Guidelines, the principle of using color for Android is to use a bold color as an attraction, surrounded by a more subtle color as the main background, and accentuate shadow effects and light colors to attract attention.
Display control, including a button or an icon, must indicate that the user can understand the control. The term control in Material Design is referred to as a component and includes many control components in an application such as buttons, sliders, tabs, text fields, and others (Material.io, 2017).

User Experience (UX)
User Experience is the combination of attitude, behavior, and emotions when using a product, system, or service (Muslim et al., 2019). According to (Garret, 2003), user experience (UX) is the experience created by the platform for people connected in the real world. User experience is not part of the graphical display of a user interface but the entire process that which user faces when interacting with the system (Pradana & Idris, 2021). UX design with a user approach will provide comfort and convenience if the user interacts with the system. UX will be the link between business goals and user goals. Indeed, UX design involving users will have a high success rate in delivering business and user goals (Shirvanadi & Idris, 2021).
User experience indicates what users feel about convenience, comfort, efficiency, and usefulness when they use the web, smartphone applications, and desktop applications (Muslim et al., 2019). UX design and research require consideration of many dimensions (Resnick et al., 2013) A review reveals various UX dimensions: influence/emotions, enjoyment/pleasure, aesthetics/attractiveness, hedonic qualities, engagement/flow, motivation, fascination, and frustration (Bargas-Avila & Hornbaek, 2011). UX has a broad scope seen from the various theories and research developed. The UX dimensions measured in this study include effectiveness, efficiency, error, ease of use, satisfaction, attractiveness, and visual appeal (Muslim et al., 2019).

Design Thinking
Design thinking is a method inspired by how a designer's perspective maximizes consumer needs to yield product innovation (Lazuardi & Sukoco, 2019). According to Pradana and Idris (2021), design thinking is a human-centered design approach that focuses on solving problems and bringing innovations. Design thinking has five stages: empathize, define, ideate, prototype, and test (Larysa & Marta, 2019).
The first stage is to empathize. This stage is focusing on the target user that needs the platform. Empathy is essential in making a product innovation since knowing what the user thinks, says, feels, and does, will describe that user's needs. Emphasizing process is crucial in describing needs and problems experienced by the user that are powerful to navigate the next stage of design thinking.
The second stage is to define. The defining stage is the stage that categorizes the problem based on the empathize stage. A method in this stage is How Might We. The method makes sure that we can explore as many ideas as possible solutions to a problem or challenge (Pratama, 2020).

Figure 1. Design Thinking Workflow
The third stage is to ideate. The ideate is the stage for issuing ideas that can make a solution to the problems that have been obtained in the defining stage. The ideate phase is done by evaluating several creative ideas.
The fourth stage is to prototype. The prototype aims to find out how users behave towards products. In making prototypes, two types are used: the manufacture of lowfidelity wireframes and high-fidelity prototypes (Pradana & Idris, 2021). The low-fidelity wireframe is the most straightforward design, while the high-fidelity prototype is the final design used for user testing.
The fifth stage is to test. This testing stage is vital in the design thinking process since the results measure effectiveness and efficiency (Larysa & Marta, 2019). Testing results in the form of user experience and feedback from users or users will help to evaluate the product or application that will be implemented. One of the testing stages used in design thinking is usability testing. Usability may clarify every user interaction with the application.

Design Thinking Workflow
The work of designing UI/UX mobile learning application for UNI Couse applies the Design Thinking approach. Within the five-staged design thinking, the implementation of each process provides a path for finding and solving user problems. Figure 1 depicts the design thinking workflow applied in making UNI Couse mobile application. This study modifies the reference from Naser et al (2018) by categorizing the stage into three processes: understanding, designing, and evaluating processes. The design thinking workflow in designing the user interface of mobile learning application in UNI Couse is illustrated as follows:

Design Workflow: Understanding Process 3.2.1 Emphasize Stage
An in-depth interview is an early part of the empathizing process. By doing interviews, the authors build comprehension by researching user needs, habits, and concerns about mobile learning applications. Empathize is done by the author to provide the right solution. At the empathize stage, the author conducted research by conducting interviews and observations. The authors interview five users: one user company and four non-user companies who often use course-based e-learning applications to provide validation. This study chooses five users as an informant due to Nielsen's (2012) argument that mentioned product prototype testing would be effective from five users' perspectives. This study chooses more users outside the company to get a solid perspective.
Scenario creation aims to obtain interview results that meet expectations and remain focused on users' interests (Maiyana, 2018). The results obtained from the interview process with the respondents are compiled into an affinity diagram for processing in the next stage. In the process of empathizing, it is determined what criteria will be the respondents in this project. The following are the respondents' criteria for this project: • Students and general respondent • 17-20 years old • Domiciled throughout Indonesia • Interested/moderate /ever used the online learning course.
• Able to operate a laptop, computer, and smartphone In this application prototyping project, two types of informants become respondents.

Defining Stage
The defining stage is the stage after passing through the phase of understanding the problem or empathizing. This stage categorizes pain points from the problem that arose. In this stage, the authors use two methods namely How Might We (HMW) and impact-effort\ comparation to broaden the problem-solving perspective. HMW method works by turning a statement into a question (Nielsen, 2012). This study takes two steps at this defining stage: doing HMW and determining the impact-effort. The authors' data processing uses the help of HMW & impact effort to determine targeted problems as well as app features to be focused on by the company. This study analyzes impact-effort comparison by discussing targeted app features with company capability.

Design Workflow: Designing Process 3.3.1 Ideate Stage
The ideate stage supports the problems that have been raised in the previous phase by determining an idea or solution. Brainstorming tends to be intense in this stage. The collected ideas that turn out to be the app feature will be selected and prioritized based on what the user thinks about the impact. By imagining what users need within the feature, the discussion also ensures a consumer journey that describes how the available feature from the first encounter until the end. The customer journey aims to finalize the ideas that will be made into a design (Nielsen, 2012). Hence, customer journey helps the user to navigate all contents of feature pages within UNI Couse.  After the idea or solution has been determined in the ideate stage, the next step is to draw the idea into a product prototype. Within the prototype stage, ideas are transformed by forming a wireframe/ low-fidelity design and a high-fidelity prototype (Pradana & Idris, 2021). In forming both prototypes, this study utilizes Figma software. Lowfidelity design is a raw sketch of app feature architecture while a high-fidelity design is a final design.

Design Workflow: Evaluating Process 3.4.1 Testing Stage
The testing stage aims to test the prototype design and user experience of the UNI Couse application. A high-fidelity prototype will be re-tested by the users to validate whether the design can satisfy their needs. Re-testing held a two-step process. First, user testing is done with less than or equal to five users. The second is to optimize the testing for at least two or three users (Nielsen, 2012). Regarding this argument, this study will conduct user testing on five users. The next step is doing interviews and observations of three users of the online course application: one from the user company and two others from a nonuser.
The authors drive user testing by giving several tasks as explained in Table 1. The process also oversees whether the apps are well-performed or not. This stage can suggest whether the design should be improved or not if the user finds any difficulties or inconveniences.

Usability Testing
Usability testing aims to evaluate the quality of apps. Single Ease Question (SEQ) is an assessment using the 7-Likert scale that enables users to rate the ease when using the application (Nielsen, 2012). Figure 2 shows that the yellow bar indicates average SEQ performance. Green indicates above average, which means gradually easy, and red indicates a below-average score (start form score of five) which means gradually difficult.

RESULTS AND DISCUSSION 4.1 Understanding process
Understanding processes include empathizing and defining stages. This process analyzes user problems of what must be concerned on the business side and define the wanted feature. Based on the results of the empathize stage, this study tries to develop the pain points in the five users' perspectives (see Figure 3). The paint point itself is a variety of what users feel uncomfortable with when using the application. Based on Figure 3, four aspects need to focus on the payment process, user interface, class quality & feature, and mentor strategy. Firstly, in the payment process, the users highlight administrative issues such as emailing scan payment transactions with the admin. It would be too late to begin courses due to the process. Secondly, user interfaces quality points to crowded and unattractive design. Thirdly, users highlight the class quality and features regarding duration, facilities, and class features. Fourth, the mentoring strategy highlights the quality of teaching.
From the results of this pain point, this study performs How Might We (HMW) by consulting pain point categorization that needs to focus. This study discusses the map of a pain point in Figure 3 with company stakeholders. From the discussion, the company agrees  After making the HMW, impact-effort comparison map out what app features are to be prioritized. At this stage, the authors discuss with the product development team to analyze company effort and user impact. Figure 4 depicts an impact-effort map that describes several features to be built and the level of user impact according to pain point perspectives. According to Figure 4, the green chart considers preferable features to be made due to a high impact on users and small effort for application developers. While the blue chart is an unpreferable feature that requires high effort, if the company is ready, the user will gain significant impact. Gamification needs extra load in the user interface to  . Impact-Effort Comparation Diagram maximize user participation. Especially red chart, the feature will not be developed due to similar function with chat feature.

Designing Process
After the understanding process has been finished, ideate and prototype stages are executed. Ideate stages interpret the customer journey which describes what features are met by the users (Figure 5). This customer journey serves to discover the contents of all the UNI Couse feature pages. Hence, the users can easily navigate the pages within the UNI Couse application. It also simplifies the process of making apps prototype.

Designing Low-Fidelity Prototype
This Low-Fidelity Prototype (Wireframe) is a rough description of the interface design of the application to be created. This prototype is in the form of a rough sketch that is useful for finding out how much the user interface needs from the flow generated from making the customer journey in the previous stage. It also describes how the feature interacts with the user. Figure 6 depicts the look of the low-fidelity prototype.

Designing High-fidelity Prototype
In the next stage, the authors continue making a high-fidelity prototype design after making a low-fidelity design. The high-fidelity prototype is the final design used for user testing who will use the UNI Couse application.
The first is a high-fidelity prototype of the main page (homepage) (see figure 7). In the high-fidelity design for the main page, the authors design the feature similar to an ecommerce page because the application aims to sell a course. In this application, there is the main page display which several features included such as the basket, the search, the notification, the category course, and the famous course feature. Therefore, the design enables the users to easily understand application usage. Apart from that, the display on the main page also provides a navigation bar that includes a home button, personal courses, live courses, messages, and user profiles (accounts). The display for the high-fidelity main page or homepage can be seen in Figure 7: The second is the high-fidelity prototype of the list page & class details pages (see Figure 8). After finding the wanted course category, the user will enter the course list page. The users can find out courses within the course list page according to the pre-selected category. The course list page includes a search feature and filter feature that enable users to filter courses according to rating, lowest price, highest price, and most popular. After selecting a course on the course list page, the user will enter the course page. On that page, the user can see several features. First, course detail provides detailed information on the course that the user has selected. Second, the favorite feature in the right corner allows the user to save a favorite page. Third, there is a video content bar for course learning media. Fourth, a "Buy Now" feature in the bottom center is available to buy the course. Fifth, a basket feature adds the course to the user's basket in the upper right corner. Figure 8 shows the display for the high-fidelity class list page and class details.

Figure 8. Class Details
The third is the high-fidelity prototype of the cart and payment pages (see Figure 9). These pages display a cart page containing several contents, such as the selected class and transaction details. There is also a favorite feature on this cart page, which can later add the class as the favorites page. After selecting the class, the user will directly come to the payment page. Consumers can view payment details on this page and select the desired payment method. Figure 9 shows the display for high-fidelity baskets and payments.

Figure 9. Cart and Payment pages
The fourth is the high-fidelity prototype of the class page (see figure 10). The page will show a list of paid classes and a feature to add class transactions. The class page also includes a search bar menu that functions to search for paid classes. On this page, the users can access the paid class and track learning outcomes in the courses that have been taken. Figure 10 shows the display for the high-fidelity class page.

Figure 10. Class Page
The fifth is the high-fidelity prototype of the message page (see Figure 11). The page will show a message page that lists the contacts who currently messaging the user. In addition, a search feature will function when users want to search for conversations. On this page, users can also see other friends who are active in the application. Figure 11 shows the display for the high-fidelity of massage page.

Figure 11. Message page
The sixth is the high-fidelity prototype of the account page (see figure 12). The page will show an account page that includes the user account name, account information features, certificate features, favorites, transaction lists, security, and assistance. Figure 12 shows the display for the high-fidelity of the account page.

Figure 12. Account page
The seventh is the high-fidelity prototype of the favorites and account information pages (see Figure 13). These pages will show the class's favorite page. On that page, there is an edit feature that, if selected, will bring up two features, namely the basket feature, which functions to add courses to the basket and delete, which functions to delete the selected course. Regarding the account information page, user personal information will be included. If the users want to change their data, they need to use the edit feature, and if users want to change photos, they can use the pencil feature under the account photo. Figure 13 shows the display for the high-fidelity of favorite and account information pages.

Usability Testing
Usability testing compiles feedback from five users given seven task commands that aim to evaluate how well the application operates (see Appendix 1). According to Table 3 shown in Appendix 1, the SEQ value for respondent number one is 5.5. Related to the SEQ score shown in Figure 2, the value of 5.5 (yellow bar) is categorized as a 71% completion rate with finishing using the application in 2.2 minutes duration. The SEQ value indicates average (standard) performance. Regarding respondent number two, the SEQ value is 6.1 (green bar) which is categorized as an 87% completion rate with finishing using the application in 1.9 minutes duration. The SEQ performance is above average namely easy.
Regarding on respondent number three, the SEQ value is 6.5 (green bar) which is categorized as a 91% completion rate with finishing using the application with a 1.1-minute duration. Regarding respondent number four, the SEQ value is 6 (green bar) is categorized as an 86.5% completion rate with finishing using the application 2 minutes duration. The SEQ performance is above average namely easy. Then for the last respondent, the SEQ value is 5.5 (yellow bar) and is categorized as a 71% completion rate with finishing using an application in 2.2 minutes duration. The SEQ value indicates average (standard) performance.

Conclusion
This study aims to illustrate how the design thinking approach is implemented for designing the user interface of the mobile learning application. This study chooses the UNI Couse as a mobile learning application that transformed from web-based technology. Firstly, an understanding process that describes what user feels and prefer are useful for choosing the appropriate learning feature to be developed. Secondly, the result of understanding the process namely impact-effort comparison is important for making the consumer journey a foundation for making prototypes. Thirdly, the testing of the user interface reveals more users feel comfortable with the apps because all features are wanted and easy to understand. Hence, the design thinking approach has successfully helped UNI Couse to create mobile learning applications that satisfy the users.