UI/UX Case Study : Online Learning Application (Digitalku)

Independent Study Collaboration Project

Independent Study is part of the Kampus Merdeka Project from the Indonesian Government which aims to provide opportunities for students to learn and develop themselves through activities outside the classroom but are still recognized as part of the lecture. I have participated in the UI/UX Designer with PT. Impactbyte Teknologi Edukasi otherwise known as Skilvul since August 2022.

With the rapid advancement of technology, all needs can be met online. Starting from primary, secondary, and tertiary needs are easy to obtain. One of them is Education. At this time education can be achieved anywhere and anytime. They can learn it freely. So that workers can learn many things easily.

Based on the case, we created an online learning application for workers who want to learn about technology, but can still do their job. We researched several learning applications to find a design that we thought was suitable. We named our application Digitalku.

The objectives of this research are as follows :

1. Creating application design of our version of the learning application from the review of other learning applications.
2. To add business value by making up the understanding better about users by comparing certain online-based learning applications (mainly on mobile) from user reviews.
3. Provide knowledge about the technology needed by users.
4. Not only gaining knowledge, but users also get new motivations from influential people through articles and videos.

I was with 3 of my colleagues namely Charles Phandurand, Andini Mulia Kusumaningrum, and Winadwii to complete this Project. We are also responsible for every single thing we do because we do it together. The job description for each person on the team is not very detailed. As that said, each person needs to make updates and feedback on the process from the beginning until the end. The following below are the contributions I made during the creation of the UX case study:

1. Participating in the initial discussion to give out our idea or opinion (brainstorming) from all of the sources or references we gathered.
2. Reanalyze the idea (brainstorming) that has been decided together with the team members and give a final agreement before making the UI design.
3. Giving a follow-up and giving feedback to each other in every group meeting.
4. Participate in the making of the design process, design system, UI design, and prototyping.
5. Record all activities during User Testability.

In this case, we surveyed applications that use the LMS (Learning Management System) to get solutions for pain points. Then continue to conduct interviews to assess the results of the UI and UX of our application based on the user side. To achieve the main target/focus at the beginning, we go through the Design Thinking Process with the following phases:

Empathize
In this phase, we find out the needs of the target user by analyzing competitor applications, getting data from User feedback from the App Store/Play Store from similar apps, and looking for case references to get related data on websites such as Medium, IEEE, ACM, etc., and obtaining analytical data from governments/agencies that conduct research.

Define
In this phase, we determine the pain point from empathizing to finding out what issues users have in undergoing the LMS app. After that, we make How-Might We an opportunity to find a solution to the problem at the pain point and we chose it.

Ideate

In this phase, we brainstormed ideas based on How-Might we that had been selected. We give each other feedback to determine what features are needed and then put them into the solution idea.

Next, we divide each feature by priority. We divide it into 4 parts inside the prioritization idea. We discussed choosing what are the top priorities in making UI design later. The four parts are:

1. High Value Low Effort (Yes, Do it Now)
   This is the top priority that must be carried out at the time of creation later. Why? Because this is an “urgent and important” category it has the highest priority and will be implemented or tested first.
2. High Value High Effort (Do Next)
   This is an “important but not urgent” category is the one that can and should be scheduled for later after Do it Now. Why? Because this category requires long-term planning or more resources compared to urgent matters, therefore it cannot be implemented immediately.
3. Low Value Low Effort (Do Later)
   This is a “Not important but urgent” category is the ones that can and should be scheduled for later after Do Next.
4. Low Value High Effort (Do Last)
   This is a “Not important but not urgent” category is the ones that can and should be scheduled for later after Do Later or we can skip it.

To realize the results of thoughts that have been collected in the solution idea and after being divided based on prioritization idea, then continued with the creation of user flow. We create 4 user flows:

1. Registration and Transaction
2. Class Details
3. Learning Class Details
4. Task Collection Details

To realize the results of thoughts that have been collected in the solution idea and after compiling user flow, then continued with the creation of wireframes.

• Low-Fi Mockup (WireFrame)

After discussing user flow I was inspired by an application that had similar features and then modified the process.

The next process was refining the Lo-fi mockup to become a Hi-fi mockup. We create a design system that will be used when designing later. There are text styles, color styles, inputs, effect styles, button components, and UI Style guide (card, Tabbing, etc.).

After the design system is created, we immediately use it when creating UI design.

Prototype

After all the design is done, we proceed to make the prototyping. Prototypes are used to try and simulate design solutions that have been created. The Hi-fi mockup was immediately compiled into a prototype with 4 scenarios below:

1. Users can register an account and log in
2. Users can choose a class and make payments
3. Users can use learning class details
4. Users can collect task
5. Users can use the pet page
6. Users can use settings to set up applications

Link Prototype