UX/UI Design & Research

Project

Redesigning Moodle

Timeline

June 2023 - Jan 2024

Target User

Students and teachers in e-learning

Location

Germany

Industry

Education

Overview


This case study focuses on the redesign of Moodle, a popular learning management system (LMS) used in academic institutions. The project involved a complete UX overhaul, including user research, wireframing, prototyping, and usability testing. The goal was to enhance Moodle's interface to improve accessibility, navigation, and user engagement. A user-centered design approach was applied, integrating research insights with accessibility and interaction design principles.


Key areas addressed include dashboard structure, course navigation, content layout, communication tools, and mobile responsiveness. The redesign aims to create a more streamlined and intuitive user experience for both students and instructors.


My Role

UX Researcher, UX/UI Designer, Interaction Designer, Usability Tester


Skills

UX Research, Wireframing, UI Design, Prototyping , Usability Testing , Accessibility Design


Tools





35%

Simplified Course Navigation

45%

Enhanced User Engagement

65%

Improved Learning Activities

Problem


Moodle's existing interface presented several usability and accessibility issues, especially for users in higher education. Key problems included:


  • Unstructured and inconsistent course layouts across departments and instructors.

  • Overloaded dashboards lacking clarity and personalization.

  • Poor navigation requiring multiple clicks to access key areas.

  • Absence of modern communication features like real-time chat.

  • Limited support for non-native speakers due to hidden language settings.

  • Suboptimal mobile usability, particularly for viewing and submitting assignments.

These issues collectively created confusion, hindered task completion, and negatively impacted user satisfaction and learning engagement.



Goal


The goal of the redesign was to improve Moodle’s usability, accessibility, and engagement for students and instructors in higher education. The objectives included:


  • Creating a consistent and structured layout across courses.

  • Simplifying navigation through an intuitive interface.

  • Improving access to learning materials, assignments, and deadlines.

  • Introducing real-time communication tools to support collaboration.

  • Enhancing mobile responsiveness and accessibility across devices.

  • Supporting international and multilingual users more effectively.

Key Challenges


  • 📌 Inconsistent Course Structure: Variations in course design made it difficult for users to orient themselves quickly across different subjects.


  • 📌 Cognitive Overload: Dense content presentation and lack of visual hierarchy led to frustration, especially on the dashboard and course pages.


  • 📌 Navigation Complexity: Users were often required to return to the homepage to switch between tasks or find information.


  • 📌 Lack of Communication Tools: Existing forum tools were outdated, and users lacked the ability to chat or collaborate in real-time.


  • 📌 Low Accessibility Awareness: Language settings and help content were not easily discoverable, limiting access for non-native speakers and new users.


  • 📌 Mobile Limitations: The interface was not optimized for smaller screens, leading to poor usability on mobile devices.




Solution


The redesign introduced structural, functional, and visual enhancements, grounded in qualitative user feedback and best practices in UX design.


🔁 Interface & Navigation


  • Replaced the vertical sidebar with a horizontal navigation bar for better access to assignments, grades, and messages

  • Implemented semester-based course filters and standardized templates for course layout

  • Introduced collapsible sections in course content to reduce information overload


💬 Communication & Collaboration


  • Developed an interactive chat function for real-time communication between students and instructors

  • Redesigned the news forum into a dynamic feed with reactions, threaded comments, and notification settings


📅 Task Management


  • Enhanced the dashboard with recent activity, assignment deadlines, and personal notifications

  • Integrated a calendar view to highlight weekly or semester-wide events and submissions


🌍 Accessibility & Inclusivity


  • Moved the language toggle to a consistent global navigation area

  • Created an onboarding help section with video tutorials and an improved FAQ

  • Applied color psychology and accessible fonts to support readability and focus

  • Ensured responsive layouts for mobile and tablet screens


Add Sections or Complete Pages

Add breakpoints to your blank page, then drop sections to have them responsive out of the box.

Get Started

Learn More

Design Process

1. Research & Discovery

  • Conducted contextual inquiries and semi-structured interviews with students and faculty using Design Case Study Framework.

  • Applied thematic analysis to extract patterns and group user feedback

  • Created empathy maps and user journey flows to inform design direction


2. Wireframing


Designed low-fidelity wireframes for six core screens:

  • Login Page

  • Course Selection Page

  • Course Overview

  • Navigation Panel

  • News Forum

  • Interactive Chat Feature


3. Prototyping

  • Developed high-fidelity interactive mockups in Figma

  • Applied university branding, consistent spacing, and clean typographic systems

  • Created interactive flows simulating real user scenarios

4. Testing & Evaluation

  • Conducted cognitive walkthroughs and shared short video-based prototypes

  • Collected open-ended feedback through surveys

  • Iterated based on clarity, contrast issues, and user suggestions


User Side Redesign

Origin of the interviewees

Conclusion

This redesign demonstrates the impact of a user-centered approach in transforming a complex, legacy system into a streamlined, engaging, and accessible learning platform. The process highlighted the importance of involving real users early, applying accessibility standards, and focusing on structural clarity.

The proposed interface supports faster task completion, better collaboration, and a more inclusive learning experience—ultimately helping institutions deliver better digital education at scale.



View all case studies

Key Features


  • 📚 Structured course organization with semester filtering

  • 📌 Horizontal navigation bar for intuitive interactio

  • 💬 Real-time chat functionality embedded into the platform

  • 📅 Calendar with color-coded assignment and event reminders

  • 🧭 Collapsible course modules with progress indicators

  • 🌍 Language selector accessible from all pages

  • 📱 Fully responsive mobile layouts

  • 🎓 User onboarding via help videos and FAQs


Results & Feedback

User feedback was collected from students and instructors through Microsoft Forms and 1:1 sessions.

  • 90% of participants preferred the redesigned navigation and dashboard layout

  • 80% found the chat and calendar features highly valuable for learning coordination

  • Users appreciated the course filtering and clarity of the redesigned UI

Non-native users reported easier access through improved language visibility and help tools.