UI/UX Case Study — Online Course Mobile Application (tekooni)

INTRODUCTION

After two months of internship as a UI/UX designer, I’ve come to a stage where finally I have to document the project with all the briefings provided by the mentors. I ventured to write this UI/UX Case Study which of course is also a means of sharing and learning together. There are still many shortcomings because this is my very first experience but I see this opportunity as a medium to achieve more self development.

This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia.

BACKGROUND

Being able to take the time to study either outside of work hours or formal education is a promising thing. It can improve professional skills related to our interests. The presence of online learning courses can be a solution in the midst of our daily busyness. In addition, the idea should not interfere with our rest time. “tekooni” was initiated to tackle those concerns.

Skivul triggered us to solve a UI/UX Case Study about an online course mobile application and let us develop the idea. There were three of us in the team: Rafi Kurnia Pangestu (myself), Afnita Fitri, and Ridho Akbar Syah. We gathered together at the Define and Ideate stages after knowing the instructions to expand possible ideas then split up for the rest of the process afterwards.

I was puzzled on how I should continue the process but shortly, I remembered that we don’t really have to do the process like how it’s familiarly ordered from Empathize to Testing in the Design Thinking Methods. The process is always seen sequential but the execution is actually very non-linear. So, that’s why I sequenced the process into Define, Ideate, Prototyping, Testing, and Empathize.

Eventually, doing the user research at the final stage aimed to just carry out design iterations besides taking feedback on usability testing I had done. The usability testing using System Usability Scale (SUS) was conducted online with respondents via Zoom.

PROBLEM SCOPE

1. I only designed the android mobile app version
2. There are four main features from my solution idea: Log In — Sign Up, Search for a course, View course details, and Buy a course

RESEARCH METHODS

• I used Design Thinking Method to the process the design
• I used qualitative research methods by conducting online in-depth online interviews via Zoom with respondents for user research
• I used the System Usability Method to measure the usability of my solution idea

DESIGN PROCESS

The design process includes empathize, define, ideate, prototyping, and testing.

• Empathize is a process where we approach users to hear their complaints. Later, the pain points obtained will be used as a reference for developing idea solutions. The result of empathize could be transformed into personas.
• Define is a process where we elaborate the problems obtained from users.
• We do the ideation/ideate after describing the user problem. Here, we start brainstorming to develop possible ideas that can be created.
• Prototyping is the process of designing a product according to the reference made in the ideate stage. Existing components must be consistent and pay attention to the appropriate design rules.
• Testing is the process where we share our designs and ask for user feedback. Testing could be done by conducting a usability testing with its various types (e.g. System Usability Scale). What we get from the user feedback, we do the iteration if there are some critics and suggestions.

Disclaimer: Before going to the Define and Ideate stages, I want to tell you that actually all the sticky notes had been updated by me where they were combined with my other friends’ sticky notes in order to make the serving looks neater but also still representing.

1. DEFINE

This is the stage where my team and I had our session by

1. elaborating the pain points we got from the users
2. and taking some outlines that represent the overall points which is called “How-Might We (HMW)”.

1.1 — Pain Points

This is the pain points we elaborated together and I rearranged to make it more efficient to see.

1.2 — How-Might We

Along with the elaborated pain points, I conclude that actually the respondents need “A mobile app with a good an interesting interface and experience in browsing courses, viewing user’s progress, and providing offline access”

2. IDEATE

My team and I contemplated the solution ideas that are expected to have:

• a good interface,
• easy-to-understand features,
• an enthusiastic experience for learning,
• a flexible learning time but there is still a time limit for individual discipline,
• a feature to download materials to be accessed offline,
• integrated payment methods,
• and discounts.

2.1 — Solution Idea

The solution idea is obtained based on the created HMW. This is a description of all the possible features that we can make to meet the wishes of the user

2.2 — Affinity Diagram

The mapping process is carried out at this stage so that previously separate features can be classified appropriately.

2.3 — Prioritization Idea

Prioritization Idea helps to regulate the efficiency of designing time.

• The horizontal line shows the further to the right the higher the level of effort to do it. This means, all features that take a lot of effort to complete, can be placed in the “Later” column.
• While the vertical line shows value. The higher the features are placed, the faster the features are done. “Yes, Do It Now” column is usually filled by the features are easier to design.

2.4— User Flow

There are four main tasks in one user flow:

1. Log in/Sign up
   There are two types to sign in or sign up. First, with common ways which is to the database or with integrated other social platforms such as Google and Facebook)
2. Search for courses
   After log in/sign up, users can search for a course they want by scrolling through the ‘Browse’ page or by using the search box)
3. View course details
   Users can view the course details when they click the course card to see Syllabus, Benefits, Instructors, and Reviews. They also can.
4. Buy a course
   Users can buy a course by clicking ‘checkout’ button or ‘purchase button’ in which both direct users eventually to choose the payment methods.

2.5 — Style Guide

3. PROTOTYPING

3.1 — Low-Fidelity Prototype

This is one of my Crazy 8’s Design. I drew the flow from the splash screen to the sign in page. I served only the Crazy 8’s Design due to limited time caused by an asynchronous circumstance that occurred at the stage of creating the wireframe. First, the mentor ordered us to make the wireframe in forms of website to mobile (responsive retrofitting) but at the prototyping stage, we were freed either to make the UI in forms of mobile directly or to fit the content of the current desktop site in a mobile.

3.2 — High-Fidelity Prototype

Then, the high-fidelity prototype was made in Figma with the existing style guide.

3.2.1 — Splash Screen, Onboarding, Sign In and Sign Up

When users open the app, they will meet the splash screen and onboarding screens first before going to sign in or sign up screen.

3.2.2 — Browse and My Course

To search for a course, the screen will be default in Browse screen. Users can either search for courses via search box or provided on the Browse screen. Also, if users have already bought a course, they can find their purchased course in My Course screen including their progress in each course.

3.2.3— Course Details

Inside of the course, there are syllabus, benefits, instructors, and reviews menu. They can see the course details interactively in one screen.

3.2.4 — Cart and Choose Payment

In the Cart and Choose Payment, users can do the choosing their selected courses and proceed to the payment. There are a few payment methods choices such as via credit cards, via e-wallets, and also via bank or m-banking.

3.3 — Interactive Prototype

To access the prototype, you can either:

1. access it directly from the simulator below (click full screen button and set the options to Fit — Scale down to fit to adjust the size)
2. or visit this link https://bit.ly/tekooni and set the option to Fit — Scale down to fit to adjust the size

Try better at https://bit.ly/tekooni

4. TESTING

To know how usable and good the design is, I used System Usability Scale with calculations that have been determined by John Brooke (1986). The score range is 1 to 5 based on the Likert Scale (from strongly disagree to strongly agree).

There are ten questions on the questionnaire:

1. I think that I would like to use this system frequently.
2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very quickly.
8. I found the system very cumbersome to use.
9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.

Watch the interviews here: https://youtube.com/playlist?list=PLsZzHpv1iARak9m8t23sypaRRWqWGfjpm

After the interview and scoring on each task given, my design got a score of 90.31 (Excellent) in total from the respondents.

Also, the respondents gave their feedback on the design solution that I made with the following details.

1. Position on certain features that respondents think is not proper.
   - “The sign up button with Google should be placed at the bottom of the screen.”
   - “The categories should be sorted down, not sideways.”
   - “For e-wallet payments, it should be combined with ATM payment lines to make it look better.”
2. ‘Browse’ page which is still very confusing what is the function of browse and dashboard architectures.

5. EMPATHIZE

Finally, after going through five previous stages, I reached the empathize stage to carry out design iterations besides taking criticisms, feedback, and suggestions on usability testing I had done.

5.1 — Research Plan

• Research Objectives

1. Find out user needs in conducting online learning
2. Find out user habits in doing online learning
3. Find out the level of usability, convenience, and satisfaction of the idea solutions offered in the Log In — Sign Up, Looking for a course, View course details, and Buy a course
4. Know either the user interface and user experience have been made good enough or not

• Respondent’s Criteria

1. Age 18–55 (students, workers, job seekers)
2. Indonesian and/or foreigners who live in Indonesia
3. At least have been exposed to digital products/applications
4. Understand Indonesian and/or English
5. People with middle to upper economic level

• Research List of Questions

1. During your work, have you ever taken the time to study outside office hours or college hours? Why?
2. In your opinion, how important is learning to improve your professional skills?
3. What learning media do you use? (Books, Online Courses, or Bootcamps)
4. What fields are you currently studying/have studied? Why?
5. Have you ever used an online course application to improve your professional skills?
   If so, what did you like and dislike about the app?
   If you haven’t, are you interested in learning through an online course application? Why?
6. What are the things that you think are important in an online course application?

5.2 — User Research

I did the In-Depth Interviews via Zoom with two respondents.

All the names are disguised due to privacy and also because basically user personas are fictional. I summarized the data as follows.

CONCLUSION

What I get from this UI/UX Case Study is how we can design an online course application that is easy to understand, not confusing, and simple. The process order in Design Thinking is also non-linear so that we shouldn’t be pegged to the process sequentially. Also, those feedbacks from the respondents became my reference to iterate the design as viable as possible. The score calculation in usability testing showed that my solution idea has been usable, desirable, and viable known from the total score. It valued 90.31 which is Excellent based on System Usability Scale Methods.

Connect to my LinkedIn: Rafi Kurnia Pangestu | LinkedIn