Back button icon  To front

UI and UX design for a Moodle learning management system used at Tallinn University of Technology. I completed a complete UI rehaul based on user research and feedback, as well as coding the designs myself. front page screenshot course page screenshot

01. Background is a Moodle based LMS that is used in courses offered at the School of IT in TUT. The system provides many functions, the most used being publishing course materials, submitting homework and grading homework submissions. The underlying LMS system utilizes a theme-based interface customization, that offers no separation of concerns, meaning that UI and back-end logic are clustered together.

02. Mission

This project started out as an effort by the department to brand the LMS theme according to the university's brand. From there, it became apparent that a lot of things could be improved upon, especially the UX of the daily tasks of both teachers and students. Thus, the focus of this project shifted to making the mundane, everyday tasks as smooth and frictionless as possible. At the same time, the administration wanted to iron out the annoying quirks coming from the underlying Moodle system.

03. Process

The project began with the intention to customize a Moodle theme to reflect the university's brand. Below are the first mockups with only branding being improved upon. During the process, several drawbacks were identified in the theme that would affect the user experience. As this system is used daily in most School of IT courses in TUT, it was clear that bigger changes were in order, to relieve users' frustration. front page first mockup course page first mockup

A heuristic evaluation was carried out on the previous theme, identifying problems and ranking them based on severity. This resulted in fixing the most obvious problems, such as prioritizing the most-needed functions, removing clutter from the single-course pages, and adding help texts and real-time validation on forms to prevent errors. The course page layout was changed after the evaluation, to have the weeks menu on the side rather than on the top, to conserve space and having more relevant content above the fold. This is reflected in the second course page mockup below.

Users were involved during the next iteration of the UI development. User feedback was gathered with in-person interviews with both teachers and students, and during day-to-day informal communication. A lot of valuable insights were gathered by observing teaching assistants, who had the bulk of the work in class. As I was also working as a teaching assistant at the same time, I kept an eye out for potential improvements as well as painpoints needing to be fixed.

These forms of requirements gathering resulted in a new front page interface, that brought the time-critical and important functions to the front, whereas they previously were located behind several menus and spread out on different pages. Now, the users could access their deadlines and recent feedback straight from the logged-in front page. course page second mockup

Additionally, the vast amount of features offered by Moodle resulted in the users having trouble finding important parts of the system, such as messaging, their grades and the calendar function. These were brought up to the navbar for quick and easy access.

Furthermore, a survey was sent out to gauge the general populations' feelings toward the system and to further identify problem areas. The survey results showed that, in general, the system was deemed usable and convenient by the users. Still, users felt that page copy was lacking in clear hierarchy and the mobile interface was not well discoverable. The improved mobile interface is shown below.

Solutions were generated and evaluated in collaboration with the designers, developers and the department's stakeholders. front page mobile screenshot course page mobile screenshot

04. Results

In the end, a suitable interface was created, that aimed to provide simplicity and efficiency to both the teachers and students using the system daily. The amount of calls for help, both from students and teachers using the system, lessened considerably, hinting at a more learnable and usable LMS.

A key take-away was the skill to balance the requirements against a team of volunteer student-developers. Additionally, I gained experience in communicating with stakeholders in the project and designing doable, but effective solutions to common problems.

Since then, development has continued with new designers and developers.