[UI/UX Case Study: E-Learning Apps]

Creating an education app with design thinking

Duonine Learning is a technology education application that specifically helps professional workers in providing learning courses for those who are ready to find their desired job

Someone to reach professional workers do debriefing before starting it. Most of them are of productive age, namely 18–55 years who work more than 40 hours a week.The online learning system has long been carried out by the education system abroad with the existence of distant classes or education abroad so that students can continue to learn even though it is not done face-to-face.

Actually, it is very important to improve user-friendliness with an attractive appearance and can increase learning motivation when using the platform as a way to increase user interest in learning.

1. Find out how make responsive & user friendly when the user using our UI design course.
2. Find out how users can be motivated to learn in our courses
3. analyze and Identify how to improve unsatisfactory service
4. Find out the font used when determining the type and size for use in the UI Design Course of Duonine Learning.

My role as a UI/UX Designer collaborating with 3 Team Members, Farid Ajie Syahputra, Intan Octano & 20-106 Dara Fadilah. In this group, my responsibilities are

1. Group leader.
2. Doing research for user needs.
3. Remind the team of their respective responsibilities.
4. make decisions based on the opinion of group members.
5. Help and create in directing the process of making Userflow, Wireframe, UI Design, Prototype that is responsive and user-friendly.
6. Always directing what to do to the next according the goals.

In this case, we choose to use Design Thinking as our design process approach because of its methodological approach to problems solving to find solutions. With this method, we define users, needs, and knowledge to be processed into solutions. We believe that the design thinking method will help us create solutions to problems in applications that meet three elements: feasibility, desirability, and feasibility by understanding The Elements of the User Experience, UX

Empathize(Secondary Research)

At this time, motivation in interest in learning is very low. And many adults and above have difficulty using the application because it is too complicated to use.

Before secondary research, we conduct a competitor analysis to find out the pain points of the problems in the 3 learning applications

From secondary research, we found that the use of applications that only focuses on learning so that other aspects that are needed by users such as interactive, responsive displays, there are always developments and gamification in online courses. So many of the users are not interested in taking the course.

Define

As part of the design thinking process, we define users, needs and insights based on the Empathize (secondary research) that has been obtained.

In the process of this define section, we brainstorm together to get 3 pain points that are calculated as the results for the most votes and crucial issues.

after looking for problems, we determine the steps in “how might we”. During brainstorming, we got 3 HMW’s, namely:

1. How can we build an impression on the target user through the fonts we use?
2. How can we increase engagement in its services?
3. How can we make interesting color compositions?

Ideate

Duonine is an application that helps prospective professional workers who are studying to prepare digital talents in Indonesia. Users will be able to choose commitments and exercises on available courses and can be practiced according to user courses. To keep users motivated, they earn points when doing exercises and can exchange their points for vouchers or even when you want to buy, you can exchange these points at the payment stage.

Ideate Stage Steps

1. Solution Idea: Group brainstorming results
2. Prioritization Idea: Prioritize what’s important of solution idea

Prototype

Before creating a high fidelity prototype, we created a high fi userflow and wireframe as well as a UI Design. Based on the task flow, we describe all the flows together. At this stage, we also get in-depth feedback or criticism and suggestions from our friends.

1. Userflow

User flow is the steps taken by the user when using a product to complete a task. In this case the userflow starts from login to logout on the application

2. Wireframe

Wireframes are important for many reasons. One is that wireframes focus on functionality, behavior, and content priority. Once you’ve designed the basics, designing products in UI Design becomes a lot easier. In the case here I only describe some of the things that I think important to show.

3. Design System

A design system (as it pertains to tech products) is more than a UI toolkit or component library. It’s more than a style guide or set of code guidelines. It’s even more than the sum of those parts. A design system is an evolving ruleset governing the composition of a product. In this design we make text styles, text fields, color palettes, navigation bars, icon styles, tabbing & button fields.

Typography: “Poppins displays an elegant impression when applied and the use of pink in writing aims to illustrate that the Poppins font is a font that is suitable for various purposes, both formal and informal.”

4. UI Design

In designing the User Interface in order to increase interaction with humans, of course, it must improve two sides, namely (Applications and Users). for example I show some UI designs of the many that have been completed.

5. Prototyping

UI designs that have been formed on the screen (commonly called mockups) are still static. In this case, there are many possibilities of information that is not conveyed optimally so that a further step is needed, namely making a prototype using motion design principles.

Test (User Research to User)

In our test, we use a user research method: In Depth Interview that starts with stimulus research. There are several stages that is

• Research Objective
• User Criteria
• Introduce to User
• Question List
• Scenario Research
• Usability Metric

For scenario research, conduct user interviews based on the question list, ask respondents to share screens & briefly explain the procedure for using the prototype in Figma. the results of the interviews are entered into the data record produces a single ease question 6.2/7 with result passed.

Duonine Learning is a technology education application that specifically helps professional workers in providing learning courses for those who are ready to find their desired job. The Main task for goals of this project was to increase app revenue in terms of user-friendly interface, easy-to-use platform. For the purpose of the app, I got the results that have been done in the form of empathize (secondary research & competitor analysis), brainstorming with related groups define (pain point & how might we), Ideate (Solution idea, Prioritization Idea), Prototyping (Userflow, Wireframe, System Design, UI Design, Prototyping) and test the user with the in depth interview method (Stimulus research & record data).for the next project if there is a chance I want to improve the appearance by paying attention to its functional and responsiveness according to the target user.

After going through the design process, we found solutions for application development by generating the problem given by the user as follows:

1. Create page or feature about the app (Solution: by adding several pages and features supporting user needs)
2. Lack of information regarding course details (Solution: Add the course details)
3. Less service for payment method (Solution: add the service of payment method)
4. Move between “history” (navigation bar) with “progress tracking” to navigation bar (solution : reconsider from the problem)