Moodle redesign

WeChat Image_20210427220437.png
Personal Project

 UX design; Wireframes; Prototyping;

                Usability test; UX research; Interview;
                Personas; User journey map
Tool: Axure; Adobe illustrtor

Why redesign Moodle?

WeChat Image_20210427230547.png
"We have the worst Moodle system in the world!"
---From one of my interviewee

Home page

Since the Pandemic happened, students got an increasing chance to use Moodle platform, because it is the place in which professor upload their teaching materials and also the place in which students upload their assignments. However, as a student, I often hear complaints about Moodle platform is not easy to use and my fellow students have to spend more time navigating through the pages.
Hence, I decided to redesign the moodle system.
Hi! I'm Muhan (2).png

Based on
Double diamond theory
of design thinking 


The process

User research
Interview x 3       
Persona  x 2
WeChat Image_20210428225302.png
The goal: Why do the students feel                                  frustrated with the Moodle platform?
moodle 4.jpeg
moodle 2.jpeg
The findings: Bad user experience
  1. Onboarding entrance are multiple
  2. Confusing navigational menu
  3. Time-consuming to search for courses
  1. Onboarding entrance are multiple: There are multiple places for students to log-in to moodle platform
WeChat Image_20220105192942.png
One can log-in from my Unitn webpage
WeChat Image_20220105192930.png
While one can log-in from ESS3 webpage
2. Confusing navigational menu: There is a top bar navigation, but        there is another hamburger menu below
WeChat Image_20220105193040.png
3.Time-consuming to search for courses: If the student wants to find     a specific course, they have to scroll down to carefully look for         the course name 
WeChat Image_20220105193044.png
Personas (1)-03.png
Personas (1)-05.png
WeChat Screenshot_20210427234819.png
WeChat Screenshot_20210427211650.png
User journey map 
Co-creation with user     




finding solutions

1. A unique onboarding page

2. A sidebar that can be hidden when hovering off

3. A filter or search bar 
From problems 

1. Multiple onboarding entrances

2. Confusing menu

3. Time-consuming to search courses 
Ideas evaluation
moodle 6.jpg
moodle 7.jpg
moodle 5.jpg
Ideas evaluation
  1. The navigational menu shows the clear hierarchy
  2. Image of the course more stand out
  3. The search bar is helpful
  4. The announcement module at sidebar helps reach the link faster
Mi-fi prototype
log-in page.gif
Log-in page
A unique log-in page to let student has a clear idea where to onboard
home page.gif
Home page
The list of courses instead of being divided by plain text, some visuals of the courses cover are added, and a filter bar by the side
navigation menu.gif
Navigational menu
A hidden navigational menu when hovering on so that to show more information
Course overview.gif
Course overview
This is an extra feature that students would need when enroll a course
course material.gif
Course material
This feature is being restructured visually
course assignment.gif
Course assignment
This feature is being restructured visually
Course people.gif
This is an extra feature that students would need when enroll a course
​Space for improvement:
  • Lack of time: One week to do the project, so that missed many detailed considerations from user research
  • Design only from student perspective due to the limited time
Lessons Learned: 
  • Learned to focus on the users' needs instead of improving the existing features, only knowing what they really want and need, then the features could benefit their behavior.