top of page
Moodle Mockup

Moodle: Reimagining the educational course platform

Project Type: Concept redesign in the education sector

My Role: Entire project from research to design

Moodle is a Learning Management System (LMS) used by schools and universities to provide a “home base” platform for educational resources. Moodle allows teachers and professors to customize their class sections and post lectures, course content, quizzes, grades, and more.

This project is conceptual, born out of frustrations as a user myself, and of complaints I heard from peers at University. 

Competitive Analysis

Moodle has several competitors, including Google Classroom, Blackboard, and Canvas. Compared to Moodle, these platforms were easier to use, log in to, and troubleshoot. 

These three competitors were taken into account in the redesign of Moodle's log in flow - utilizing a combination of factors that worked well for competitors.

Moodle: Its Current Interface

THOUGHTS, OBSERVATIONS, AND CONSIDERATIONS

What does "Your site" mean? On the browser version, you login with your Unity ID. To find the Site URL, users must access Moodle on a browser.

Moodle - original app design

Scanning a QR code would require users to access a secondary device

Moodle - original app design

There is no way for a user to navigate back in the login flow

Typing in the University site does not provide accurate search results

The Challenges

From my personal experience as well as the experience expressed by other students, I identified Moodle's usability issues. For the scope of this case study, I decided to focus on the mobile app. user log in experience.

PAIN POINTS

1

Log in flow was confusing, leaving users unsure of how to access their dashboard on their mobile phones.

2

Filling in the input fields incorrectly does not trigger accurate error statement/instructions leaving the user confused on what or where the error is.

3

In order to log in via the QR code, two devices are required. This is counterintuitive since users are already on a mobile device and likely do not have another accessible device to utilize.

4

Both methods of logging in to the app requires the user to open the browser version of Moodle. This led to frustrations in the user study, with participants having to switch back and forth between their browser and app to complete the login process.

User Testing

To verify my personal frustrations with Moodles UX, I tasked five students at North Carolina State University with logging into the Moodle app. Participants, 4 females and 1 male, ranged from ages 18-21. All participants regularly used Moodle on their browser. No participants had used the Moodle app prior to this study.

HIGHLIGHTS

“There is no point in going on the Moodle app if I have to log in on the browser anyways. It feels useless.”

Participant 1

Rating given: 2/5

User attempted to log in with email instead of their unity ID.

User recieved a “Can’t connect” message after typing email into “Your site” field

User tried clicking all of the buttons and appeared visually confused.

User verbally expressed that they “have no idea” on how to log on to the mobile app.

User was unable to successfully log into the Moodle mobile app.

CONSENSIS

The Moodle app created confusion for users when attempting to log in to the app.

Problems Included:

  • Not knowing how to log in

  • Not knowing what the app meant by “your site” 

  • Frustration that typing in the correct URL for “Your site” doesn’t actually work

  • Frustration that users had to navigate outside of the app to log in.

  • Lack of consistency between the browsers log in screen and the mobile app log in screen.

Persona

Moodle User Persona

Process

Beginning with wireframes, I explored concepts on ways to transform and simplify the login flow for students. 

Moodle Wireframe
Moodle Wireframe
Moodle Wireframe
Moodle Wireframe
Moodle Wireframe
Moodle Wireframe

The Final Design

Moodle Mockup
Moodle Mockup
Moodle Mockup
Moodle Mockup

HOW AND WHY THIS BECAME THE FINAL DESIGN

  • Friendlier, more modern interface design.

  • University search is used to find a users school as opposed to tying in a site URL.

  • Incorporation of university branding once a user selects their school.

  • Login flow is more consistent with competitors that users may have used in the past. 

Conclusion

By providing a clear login flow and keeping consistent with what users would expect to see based on other platforms on the market, as well as the login flow of the browser Moodle, users would be able to easily access the Moodle app without frustration. 

NEXT STEPS

1

Additional rounds of user testing and feedback.

2

Development.

3

Launch.

bottom of page