Improving the User eXperience of a learning platform

Internship carried out between April 14, 2020 and June 19, 2020 to improve the user experience within Koala LMS.

Who am I ?


Raphaël Penault

I am a student from the IUT Informatique de la Rochelle specialised in web development. When I was introduced to the Koala LMS project, I was quickly motivated to work on it. I sincerely believe that Koala can bring a breath of fresh air to teaching as well as to the teacher-student relationship.

This desire pushed me to complete my internship with the Koala Éduc association supporting this project. I was part of the user experience development team during my second year of training at La Rochelle Université. This first experience with Koala allowed me to complete my internship on this project and to continue to improve the user experience.

My internship

Context

During this internship, I was tutored by Guillaume Bernard. He is in charge of engineering and technology on the Koala project. He also supervises as trainees three other 2nd year students from the IUT Informatique de La Rochelle, my classmates Louis Barbier, Olivia Bove and Dervin Enard.

Koala LMS is still a young project. Many improvements are still to be made, especially on the user experience. Where in my previous project, we focused only on entities creation’s formulars. During this internship, my mission was to improve the entire site.

The platform had an unattractive design that resulted from a large number of graphic and ergonomic choices that were technically focused rather than user-centered. The problem was therefore to know what changes must be made to improve the user experience.

the analysis phase

In order to answer this problem, I first documented myself a lot on what makes a good website design. As well as what a new learning companion like Koala should bring. This gave me a better understanding of the expectations of potential users and the issues behind the project.

My classmate Olivia and I made a critique of the existing system based on the Bastien & Scapin Ergonomic Criteria for the Evaluation of Human-Computer Interfaces. After that, we were able to start making the various modifications to the site. Olivia makes the mock-ups and I make the changes to the code following the guidelines of the mock-ups.

Realisation

Improvements relating to guidance

The guidance corresponds to all the means implemented to advise and guide a user in his interactions with the site. To do this, he must be encouraged to click and/or fill in certain information, giving him a few clues. But also, the elements must be grouped together in a coherent and orderly manner, according to their format and location, and be able to distinguish one element from another.

I’ve made a lot of modifications to the guidance system. Some of them are linked to other criteria, so they solve several problems at the same time. Among these improvements are the new search interface, displaying courses now in separate sections and a message to inform the user if the course they are looking for does not exist.

Search update No Search update

Improvements relating to workload

When talking about improvements to a user’s workload, it should be assumed that the user should perform as little action as possible and should have direct access to the desired information. We must therefore guarantee the simplicity of an interface, limit the user’s reading but also ensure the relevance of the information and functionalities.

The vast majority of the changes I made here were to simplify the interface, allowing experienced users to avoid being drowned by useless information. The biggest change in this part is the simplicity of the forms made possible by the use of tooltips that allow non-technical users to easily find out about the various fields to be filled in.

Help Text update Description update

On the screenshot above, you can see the addition of a character counter for the “Description” field. Indeed, a description exceeding 2000 characters is considered too long by the system. This counter responds to the need to inform the user about the length of his description and also improves the explicit control of the user.

Improvements relating to explicit control

The user must be able to control and monitor the system’s processing. He needs to be convinced that he has control over the system to gain a better understanding of the site.

User control is Koala’s most respected criterion. However it is always possible to improve the site on this criterion. As this criterion is often linked to other criteria, the changes made may also correspond to other criteria. The most revealing example and the new design around the notifications.

Now, Notifications :

  • are marked as seen by clicking on the bell to visualize them.
  • display a message when there are no notifications.
  • link directly to the subject of the notification when it is clicked.

Notifications update No Notifications update

Improvements relating to adaptability

Adaptability is how the interface will react to the user’s needs and preferences. The site must be flexible, i.e. several means are implemented to allow the user to customize the interface to facilitate his work habits.

Improvements in adaptability are still minimal compared to all that remains to be produced in terms of responsive design. However, I considered these to be of low priority in any case for changes concerning adaptability alone. For the time being, the changes made are mainly related to the criterion of consistency of application, in particular the truncated titles if they are too long.

Titles update

Improvements relating to homogeneity and consistency

For a site that is easy to use, it is important that the pages that make it up are consistent with each other, that the same vocabulary is used and that the graphic choices are respected.

The improvements in Koala consistency were the most important throughout my internship. These changes are the result of the creation of a graphic charter by Olivia. They have made incredible improvements in terms of consistency, navigation, adaptability and explicit control.

Among these changes is the new design of the blocks presenting courses, activities and resources that now display the information that is really useful to the user. We also find the new design of the details of the entities which are here simpler and more homogeneous.

Courses update Activities update Resources update Details update

Improvements relating to the meaning of codes and denominations

The meaning of codes and names serves as a reminder of the importance of the simplicity and usefulness that an interface should have. There must be a link between the information and the button that links it, the vocabulary used must be simple for comprehension and it must be the same on each page.

Although Koala has a vocabulary of its own (Example: Collaborators, Non-Editor Teacher, etc). Unfortunately, there are always a few small glitches in the interface from one page to another for example. The most telling example is still the translations. Producing efficient, factorized code to cover a large number of pages with such changing terms is difficult. And even when the factorization can be done in a language, at the time of translation, it may well pose a problem, which was notably the case with the permissions of the collaborators .

Permissions Bug

Here the text is translated into French. We can observe that the type of the entity (here a course) is not translated. To fix this bug, it was necessary to separate the entity type from the permission phrase so that it could be translated separately and form coherent sentences for each translation.

Permissions update

Experience Gained

Throughout this internship, I demonstrated a great capacity for reflection and autonomy. I knew how to organize myself as well as possible in order to make the maximum of modifications to the application to improve it as much as possible.

I’m very happy to leave a trace of my time on a project like Koala. I chose this course for its vision of pedagogy and I hope that it will be able to conquer a large number of people as it has conquered me.

I had the chance to work with nice and serious people which greatly motivated me when I added my modifications to the existing Koala. This professional experience, no matter how short it was, was very rewarding and allowed me to improve my web development skills. I have excellent memories of this enriching experience.