Redesigning Learning Management System into E-Learning App for Higher Education

Quick introduction: Hello, I’m Aidil. Currently, I stayed in Malang, Indonesia for my bachelor’s degree. I’m feeling so happy to share the last project I worked on for my last exam in university.

Note: The real platform already launched 3 years ago and it’s website-based. I can’t mention the system name, just call it DF

Dataset

DF learning data in 2020

Amount user in University (based on data statistic in my university)

Problems

• The DF system is not in demand by users because it has many shortcomings both in terms of interface / experience and functional (sync, slow speed, etc.)
• By point no.1, Google classroom is still one of the alternative platforms that are most often used by students and teachers during online lectures rather than the official learning media provided by universities.
• In previous studies in 2020, DF had a value below the average for attractiveness, and efficiency
• More than 13.000+ active students do online learning while pandemic and use the media platform for accommodate lecture activities

Goal

Based on the problems, I want to solve the problems on UI/UX side. So in this project, I had 2 goals to achieve:

• Redesigning DF learning experience and interface to attract user motivation
• Make students want to use DF and stay active in their activities in online learning regardless of all the limitations, obstacles and conditions they face (students and universities)

Research Question

1. Why are students not interested in using DF learning for their learning media in the online learning period?
2. How does the effect of DF e-learning help students’ activities in online learning?
3. Is there a significant behavior of students in online learning?

Challenge

1. We had 3 roles on this platform such as student, lecture and admin. How sync the students and lecture need?
2. Find out student behavior in online learning, especially for new students

Note:

• Why do I make new students to be my main focus? Because in this case, the students can only have 3.5–4 years to use this product. And there will be a new generation of users every year
• On this part I will do in students side

Scope

New students batch 2019–2020

Outcome

E-learning Mobile App

Before, I starting the design process. I did a little observation or literature review to look at what features are working or not of DF. Here’s a thing what I had:

DF Learning features

From 19 features what DF learning had, Not all that features used by students to help their activities in online learning. How do I know that?🤔 So, I did a quick survey to find out what activities are most users do often while using DF learning. And the result’s:

Students activities

From 4 activities that we had, and 13 previously known features are and then I analyzed it to find a direct relationship by grouping it and then adjusting them into activities that are often carried out by users.

After I do that, I got 8 features are do in that 4 activities directly such as:

1. Courses Filter
2. EUD (Edit, Upload and Download) File
3. Grading
4. Forum Discussion
5. Q&A
6. Helpdesk
7. Attendance Sheet and,
8. Reminder

So, the design process will focus on the data above with 8 Features from 4 activities most often do by users.

Let’s get started…………….!! 🕵️

The Design Process

Design Proves

🔎Research

Interview

So, in this phase. I conduct to do in-depth-interview with new students. The main goal is “To find user pain points and behavior while studying in online learning with DF-learning”.

Why I do interview?

“Interviewing is a data collection tool that works best in many cases when the intent is to have an understanding of the “Underlying reasons and motivations for people’s attitudes, preferences or behavior. ”

With Criteria:

1. New students batch 2019 and 2020
2. Had use DF learning (at least once)

Affinity Diagram

I’m feeling overwhelmed with all the insights I got, I needed to start prioritizing to form a strategy. So I decide to use this method(affinity map)

Below was the results from interview session. I got 5 students for this session.

Note: I can’t mention the real product name because it’s internal privacy

The insights, I divided into 3 categories are:

The problem is the main problem that we have to solve, and the insight is the activity behind the problem that occurs and the barrier are all the things that can make user can’t reach their goals. So, this time I’m trying to break down the one problem from user stories.

Key insights:

From that’s example, we know something about mental models users in the previous system. The picture above is the flow how user finding a new assignments in DF e-learning.

The reason behind why users (student) are not using this e-learning for support their activity is mainly closed down to 2 reasons:

1. The system features are not really helpful for users activities. Because, if users want to know something happened on the class group in DF learning, users have to check their account frequently or waiting the other friends telling or forward it the task into the group message (WhatsApp)
2. Much effort for users to do in specific activities in DF. For example: too many options are put on a single page, such as irrelevant information.

Proto-Persona

Proto-persona (Gothelf & Seiden, 2013)

After I conducted interviews with 5 participants and analyzed some of feedbacks I got, my conclusion is in higher education there are two types of students such as:

• Process oriented

This typical persona thinks being a process person can build a good mindset for us. This means that when you study in class, you will be curious about the learning process. We’re trying harder to understand why it happened the way it did? On the other hand, it would be different if the teacher couldn’t convey information properly. We need more effort to understand it. So, this type requires a good relationship between teacher and students.

• Grading oriented

Slightly different with this type. For the most part students in university have a values (Grade) oriented. This is not entirely wrong, because the finish line of learning is Grade. But in this case, 3 out of 5 students I interviewed when doing online learning, they just want to get good grades for each assignments.

Understandable, if some students in higher education had a Grade oriented without to thought the learning process. I have a statement for this:

“Grade is a unit of measurement that is considered to have the most value by academics and society in determining a person’s intelligence”

So, next we will see how the way this two persona reach their own goals…hmmm 😎

UX Evaluation: Usability Test

This usability test I do after I interviewed the participants. Why do I conduct UT for this?🤔 Simple, I have to make sure what is user say is similar to what they actually do when using DF learning

Like father Nielsen said:

“Pay attention to What User Do, not what they say”

I created some scenario for it. You can see the scenario by click THIS

Question

On this session, I made 2 questions to answer:

1. How’s far the user knowledge in utilizing DF as a learning media?
2. How good is DF in providing experiences to users both in terms of workflow, services and features?

Before, I do the usability test. I created some hypothesis about how users do do the test. These hypothesis is an initial assumption that is presumptive where the results still not sure if it’s true. And in this session, I will prove my assumptions it’s true or not.

1. Users have difficulty exploring DF because too much information is displayed so that users feel frustrated or confused
2. Users do not know what features can be used to support education
3. A lot of options are given to the user when the user first opens DF (Main screen)
4. The information presented is too much which is not really needed by the user
5. There are too many doors for users to go through when they want to move from page one to a more specific page

Goal

I want to answer the question that have been made previously and validate or invalidate my assumptions presented with real users. From this user testing, I will gather insights from users and come up with some solution to fix the problems

Objective

User experience (flow, navigation, etc.) while using some kind of features to help their main activities.

The results I displayed with 3 kind of data such as user path trace, task success and time tasks.

User Path Trace

Task Success

Mean Time per Tasks

• User path trace, is the results how participants operate the DF learning with some kind of features being tested. Total participants I got on this usability are 10 students and I divide into 2 sessions. With 5 participants from interviewed and 5 others random. Why? because I thought in the first session I watch them thoroughly and maybe they feel anxious and really carefully to not making any mistakes. So I decided to do second session with random people (actually not random people but is their friends from first session). Overall, there is no pattern changes between when I see them or not. 2 others images are the task success and how long they’re do.

I know, you must be a little curious how the DF interface looks like😆. I’ll give you a sneak peek of the DF learning interface.

DF Interface

Key points:

At the end of this activity, I got some feedbacks from several participants. And what is it? Most of them said that there are some features that they just found out about and some that are easy because they have often been done in DF learning.

Remember the hypothesis I defined before? (you can check it above, on the data results). 4 out of 5 my hypothesis is correct. The experience was really bad on this media learning (DF). How can some tasks related to the user’s main activity show the worst times, even though the flow is very simple (check user path traces: DP)

Back to the data above, we know that students do well when checking their assignments such as finding feedback or finding new tasks in DF learning. But on the other hand, they don’t know how to see their value in what they did with the task (find grade overview and grade report).

User Journey

User Journey Map

For high quality image: CLICK HERE

This method I decided to use is for mapping how users walkthrough in our products. From this journey, I have gained a lot of insights when mapping each of phase of the user journey such as what they’re doing, what they’re thinking, what device they’re used and etc.

Define

After a long research process, It can be defined the problems faced by students are:

1. The students didn’t interested to use this media learning, because the media it’s not user friendly at all.
2. Information overload, and make the interface looks tight.
3. User doesn’t know where place to see their final grade they obtained at the end of each semester/
4. The navigation, buttons and more are not visible. Users waste their time for looking something they can click on
5. For checking a new assignment on a single subject, users have to visit through inside some of the subject pages

Competitive Analysis

My goal is to do this competitive analysis is to get an initial idea of how competitors are handling the student activities about the problems I defined above and user frequent activities while doing online learning I mentioned at the beginning.

There are 3 competitors LMS I used such as Canvas, Schoology, and Google Classroom. That 3 competitors I used because they occupy the leaderboard in 2020 as the best learning platform for education by G2.com

Features ( Platforms Contents for LMS )

So from that data above, we’ll focus problems on course assessment or student assignments and lastly grading. Even though Canvas won on assessment and grading, I still do analyze the other competitor. There 2 ways I analyze in this session such as finding some documents/journals with relevant research and from user feedback about their experience while using it.

I summarize that data into strength and weakness side, so you can read that on the table below

LMS Competitor (Competitive Analyze)

After going through a long process, I know what I need to do to improve the previous learning media (DF) to be better. Let’s get ideate for what solution I can give to solve the problems.

1. Focus to improve the user main activities features such as seeing everything about assignments (task progress, new assign, due date, etc.)
2. Improving the information architecture to reduce information that user don’t need
3. Make the interface clean and user friendly

🎮Design

Determine the sitemap

DF Learning sitemap

It’s a first I have to do, because I need an overview of what pages are I needed for the product. The impact will be seen in the user flow when the user navigates the system (usability).

One thing, in here I just add two more sites such notifications and account. The other two sites (home and grades) is already in DF learning before.

You can see the different sitemap on the previous system by CLICK HERE. It was very messy and here I tried to make it simple.

Information Architecture

DF Learning Information Architecture

There are 4 concepts in information architecture, such:

1. Information (data and knowledge)
2. Structuring, organizing, and labeling
3. Finding and managing
4. Art and science

And you can see how I create the IA for DF learning by click the link below.

See the full image: CLICK ME

Wireframe

From the information architecture that I created earlier above, now I put everything into a wireframe. To find out what layout I want to use and how I set the IA to be placed into the layout, I tried to find some layout references in dribbble.com

Moodboards

And here the wireframe:

Wireframe

High-Fid

Design System

Home

Grades

Notifications

Account

Prototype

You can test the prototype here

*on progress

Testing

After I finish the design, Now I have to test and share with users / early students in my universities (2019 — 2020).

Before

After

The new problems coming on summary page (part of grade page). Okay let’s see what it is:

1. On the page, the user doesn’t pay attention to the details because it doesn’t have enough contrast. Sometimes, they have to find the grades I get on my assignments, especially on the missing status. So the thing they have to do is open each category and search for them one by one.
2. They are wasting time for screening their assignments results (grades) because it’s too small to see for them

You can see the improvement on that image “After” above.

Future Research

This isn’t the end. We need sync the lecture requirements for make the learning process better. One thing, basically what is our teachers used, the students must adjust and follow it

So many things I’ve to validate such as card components (progress bar), Course page and etc.

Feel free to hear your suggestions or anything feedbacks you have for my first study case on comment box. Thank you

Reference:

1. https://educheer.com/essays/advantages-and-disadvantages-of-interviewing-as-data-collection-tool/
2. Pros and Cons of Conducting User Interviews | Interaction Design Foundation (IxDF) (interaction-design.org)

Books and journal:

1. Alva, A., Medina, F. F., Mego, H. O., Huamani, E. L., & Roman-Gonzalez, A. (2021). Comparison of Learning Management System Platforms for Choosing A Suitable Platform for Users in Research Administration. International Journal of Engineering Trends and Technology, 69(1), 81–84.
2. Gothelf, J., & Seiden, J. (2013). Lean UX Applying Lean Principles to Improve User Experience. United States of America: O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA
3. Sutadji, E., Hidayat, W. N., Patmanthara, S., Sulton, S., Jabari, N. A. M., & Irsyad, M. (2020). Measuring User Experience on SIPEJAR as E-Learning of Universitas Negeri Malang. IOP Conference Series: Materials Science and Engineering, 732, 012116.
4. Sari, A., Baedhowi, P., & Indrawati, D. (2017). The Use of Learning Media with MOODLE Approach to Improve The Quality Of Education: A Literature Study. Proceedings of The International Conference on Teacher Training and Education 2017 (ICTTE 2017). International Conference on Teacher Training and Education 2017 (ICTTE 2017), Surakarta, Indonesia
5. Roth, R. (2017). User Interface and User Experience (UI/UX) Design. Geographic Information Science & Technology Body of Knowledge, 2017(Q2).
6. Kapros, E., & Koutsombogera, M. (Eds.). (2018). Designing for The User Experience in Learning Systems. Springer International Publishing.
7. Joo, H. (2017). A Study on Understanding of UI and UX, And Understanding of Design According To User Interface Change.
8. Wargadinata, W., Maimunah, I., Dewi, E., & Rofiq, Z. (2020). Student’s Responses on Learning in The Early COVID-19 Pandemic. Tadris: Jurnal Keguruan Dan Ilmu Tarbiyah, 5(1), 141–153.

and many more.