02 MOODLE REDESIGN2023
PROJECT OVERVIEW:
Redesigned Moodle's interface to improve navigation and usability for students and instructors, addressing difficulties in finding course materials and managing assignments.
PROJECT GOAL:
Improve Moodle's UX by streamlining navigation, simplifying content, and improving task efficiency
PROBLEM:
Users reported difficulty navigating Moodle, leading to frustration and wasted time. Key issues:
* Complex navigation menus.
* Inconsistent layout across pages.
* Difficult assignment submission process.
* Poor visibility of announcements.
RESEARCH:Conducted user surveys and usability testing with 15 students and 5 instructors.
SURVEY AND INTERVIEW FINDINGS
PERSONAS
LOW TO HIGH FIDELITY PROTOTYPING
Following design validation through testing, we developed digital low-fidelity prototypes for further feedback. Iterations refined text, icons, and colors using our team's style guide.
Although we redesigned many features, I will highlight the design process for one specific example.
SELECTED FEATUREFocusing on Moodle's core "Module" feature, which users often find clunky, primitive, and unintuitive, this project aims to reduce pain points and improve its user experience.
ORIGINAL PAGE
General Feedback
Users were given tasks to complete, grading them on a scale of 1 to 5, with 1 being strongly disagreeing / very inconvenient, and 5 being strongly agreeing / very convenient.
Users found the current Module page to be messy, with the following average grade for tasks:
1. Understanding Module Code to Module Name — 1
2. Finding Course Material — 2
3. Checking of Grades — 2
4. Submitting Assignments — 1
PAPER SKETCHES
Difference In Layout
The redesigned module page features a fixed sidebar for quick access to key sections (announcements, attendance, current week). Unused links like badges/competencies were removed based on user feedback.
The main content area is now narrower and centered for better readability. The original Moodle's unlimited width made long lines difficult to read on larger screens.
Early Design Phase
The initial design phase focused on significant layout changes, structuring content blocks for hierarchy and usability.
Following layout validation through user task completion, we added basic text and titles for clearer user feedback in the next testing round.
LOW FIDELITY PROTOTYPE
Scope Update
Prior testing highlighted the need to reorganize the Module homepage for intuitive module discovery and to link codes with names.
Module Homepage
The Module Homepage features a personalized dashboard, filtering modules by trimester and department.
Users can rename modules (avoiding code confusion) and customize page layouts.
Design Validation
Renaming module cards improved user recall. A search bar also enhanced module discovery.
Prototype Link: https://nayfla.link/v1primary
Module Individual Page
Modules are organized weekly with downloadable content. Module announcements are automated.
Individual module pages display automatic progress updates and new announcements.
This streamlines file access for students.
Design Validation
Users found that automated announcements help to bridge communication easily.
Prototype Link: https://nayfla.link/v1primary
HIGH FIDELITY PROTOTYPE
Polish
At the later stage of the design, we now add in colors to make the overall interface cohesive. We also applied color theory to reinforce the design and conducted another round of testing with students to validate said choices.
Prototype Link: https://nayfla.link/v2primary
Checking Back
Usability testing of the redesigned interface showed:
* Assignment submission time reduced by 50%.
* User satisfaction with navigation increased by 40%.
* Positive feedback on the clarity of the interface.
PROJECT REFLECTION
1) Simplicity and Usability: Simplifying Moodle's UI for better usability was challenging yet rewarding. We prioritized intuitive navigation and reduced clutter for an improved student experience.
2) Integration and Compatibility: Seamlessly integrating diverse software content to enhance Moodle's efficacy was a goal. We carefully evaluated the redesigned app's ability to handle varied functions without overwhelming users.