LMS Core

Redefining the E-Learning Experience

LMS Core is a WordPress theme for creating a Course Website using the LifterLMS plugin.

In the dynamic world of digital education, the effectiveness of Learning Management Systems (LMS) is crucial in shaping students' learning experiences. The "LMS Core" project emerged with a vital mission: to revolutionize the user interface and experience of LifterLMS, a well-established LMS WordPress plugin.

While LifterLMS has been a popular tool among course creators for its comprehensive functionality in creating and selling courses on WordPress, it has often been criticized for its outdated design and user interface that doesn't meet modern usability standards. This gap presented a unique opportunity for enhancement, which was the foundational goal of the LMS Core project.

The project's primary goal was to overhaul the LifterLMS interface, making it more intuitive, engaging, and user-friendly. The aim extended beyond mere aesthetic enhancement to fundamentally improve usability aspects that affect student interaction and learning. The envisioned platform was one where students could navigate with ease and engage more deeply with the content, tailored to a diverse range of learning styles and needs.

UX Research ・ Wireframing ・ UI Design ・ User Testing ・ Front-end Development

My Role

As a freelance UI/UX designer working in collaboration with the LMS Core team, my role involved delving deep into the experiences of online learners who interact with these platforms. This process included extensive user research - from interviews and surveys to usability testing - to gather authentic insights into the student experience. This research informed a holistic approach, addressing every facet of the user’s interaction with the platform, from the initial login to course completion.

The challenge was multifaceted: it was not just about a visual redesign but a complete rethinking of how students interact with online course material. My responsibility was to streamline complex navigation paths, make content more accessible, and ensure that every design element contributed positively to the learning experience. With the increasing trend of mobile learning, optimizing LMS Core for mobile users was also a key focus, ensuring accessibility and consistency across various devices.

In collaborating on this project, I was driven by a dedication to enhancing both learner and educator experiences, bridging the gap between powerful functionality and exceptional user experience. The LMS Core project stands as a testament to the transformative impact of user-centered design in educational technology.

Tools

Figma for design, prototyping, and collaboration.
WordPress for front-end development and testing.
Google Meet and Skype for interviews and usability testing.

Problem Statement

Through extensive user research, including interviews and surveys, several critical pain points were identified in the existing LifterLMS platform, which LMS Core aims to address. These challenges include:

Inconsistent User Experience: Users face a disjointed experience due to an outdated design and cluttered layout, leading to a lack of uniformity across different sections of the website.
Navigation and Usability Challenges: Students struggle to efficiently locate courses, modules, or specific content, with the existing complex and non-intuitive navigation structure causing frustration and time wastage.
Course Selection Confusion: An overwhelming number of courses for similar skills, without clear starting points, lead to user confusion and decision paralysis.
Lack of Mobile Optimization: Inadequate mobile responsiveness hinders the accessibility and usability of the platform for a significant portion of users who rely on mobile devices.
Cluttered Dashboard: The dashboard is overloaded with elements that are not immediately useful, contributing to user confusion, particularly for new users who are not enrolled in any courses.
Course Page Issues: Pricing tables are confusing and poorly positioned, creating uncertainty about course costs and memberships. Additionally, single-plan courses unnecessarily display a pricing table.
Lesson Page Distractions: The lesson page, mirroring a blog post layout, includes several distracting elements, diminishing the focus and learning effectiveness.

These issues collectively contribute to a suboptimal learning experience, affecting user engagement and the overall effectiveness of the LMS.

A website created with LifterLMS plugin (Without LMS Core)

Possible Solutions

To address these identified problems, LMS Core proposes a series of user-centric design solutions:

Revamp User Interface: Implement a cohesive and modern design across the website, ensuring a consistent and intuitive user experience.
Mobile Optimization: Ensure full responsiveness and a seamless mobile experience, making the platform accessible and efficient on all devices.
Dashboard Redesign: Streamline the dashboard by focusing on essential elements, and provide an interactive onboarding experience for new users.
Course Page Redesign:
- Clarify pricing options with a restructured, intuitive pricing table.
- Reposition key information, like pricing, to be immediately visible.
- Eliminate unnecessary pricing tables for single-plan courses.
Lesson Page Enhancement: Redesign the lesson page to prioritize content focus, removing extraneous elements and adopting a layout conducive to learning.

By implementing these solutions, LMS Core aims to transform the LifterLMS experience into a more engaging, accessible, and effective learning environment, ultimately fostering better user satisfaction and learning outcomes.

Discover Phase

Research

Interviews

Interviews were conducted with four individuals who frequently use online courses for skill development. These interviews aimed to gather detailed insights into their experiences, challenges, and preferences.

The key questions asked during these interviews included: -

Can you tell me about your experience with online learning platforms?
What specific online courses have you taken recently?
Have you used LifterLMS or similar platforms before? Can you describe your experience?
What were the main challenges you faced while using these platforms?
What do you look for in an ideal online learning platform?
How important are aspects like ease of navigation, content organization, and visual appeal to you in an online course?
How do you prefer to navigate through course content (e.g., modular structure, search functionality)?
Can you give examples of any frustrating experiences you’ve had with online course interfaces?
How do online platforms impact your motivation and engagement in learning?
Are there features you’ve seen on other platforms that help maintain your interest in a course?
Is there anything you wish to add that would significantly improve your learning experience on an online platform?

Surveys

To complement the insights gained from interviews and to collect quantitative data, I distributed a survey using Google Forms, garnering 28 responses. The survey aimed to capture broader user habits and expectations regarding online learning platforms.

The survey responses provided a broader perspective on user experiences and expectations, helping to quantify the prevalence of the issues identified in the interviews.

The combination of these interviews and survey results offered a comprehensive view of the current state of user experience in online learning platforms, specifically identifying pain points and areas for improvement that LMS Core aims to address.

User insights from interviews and survey

Define Phase

User Personas

I wanted to form a deeper understanding of our user's goals, needs, experiences, and behaviors. So, I created 2 personas based on user interviews and surveys, and I kept updating them throughout the project as I gathered more data.

Empathy Maps

To gain a deeper understanding of user behaviors and decisions, I utilized the Empathy Mapping Method. An empathy map is a collaborative visualization that helps articulate our knowledge about a specific type of user. It allows us to externalize user knowledge, create a shared understanding of user needs, and facilitate decision-making.

Design Phase

Wireframing

The design process began with rough sketches of wireframes to visualize the new layout and flow of a course website. I then created a few low-fidelity wireframes using Figma to explore different layouts for all the website's pages. Once the low-fidelity wireframe was finalized and approved, I continued to refine the design by adding more details.

Student Dashboard

My Courses

Single Course Page

Single Course Page - Enrolled

Mobile Wireframe - Course Page - Enrolled

Lesson Page

Lesson Page - Focus Mode

Checkout Page

Unit Testing

To ensure the website's user-friendliness, we conducted several rounds of usability testing. These tests were carried out through Skype and Google Meet video calls, which allowed me to directly observe user navigation and interaction with the website. Each testing round provided invaluable insights, progressively refining the design to align more closely with user needs and expectations.

Following the initial testing rounds, we began developing the theme. Post-development, we conducted additional testing sessions, focusing on collecting feedback, identifying bugs, and resolving issues.

As of writing this case study, usability testing remains an ongoing process, continually guiding us toward enhancements and ensuring the website remains user-centric and intuitive.

Our current efforts are concentrated on collecting extensive feedback from a broader audience to further enhance and perfect the theme. This continuous testing process is key to ensuring that the website not only meets but exceeds user expectations.

Final Designs

Simplified Dashboard

Completely redesigned the dashboard to focus on essential elements and removed all the clutter.

Completely redesigned and clutter free dashboard

Problem: Cluttered Dashboard:

The initial design of the LMS Core dashboard suffered from an overload of elements, many of which held little immediate relevance for users. This clutter particularly impacted new users, who found themselves confronted with a confusing array of empty sections like 'My Courses', 'My Achievements', and 'My Certificates', especially when they hadn't enrolled in any course yet.

Solution:

Removed the clutter

To remedy the cluttered dashboard issue, I undertook a comprehensive redesign focusing on simplicity and relevance. The revamp involved the removal of the 'My Achievements' and 'My Certificates' sections from the dashboard's front page. Since these sections had their dedicated sub-pages and contributed to the clutter for new users, eliminating them from the main dashboard reduced confusion and streamlined the user experience.

Added onbaarding message, Featured Courses and Recommended Courses

In place of these sections, I introduced a user-friendly onboarding segment specifically for new users. This section prominently displays a message — "You are not enrolled in any courses" — accompanied by a 'Browse Courses' button, guiding new users towards course enrollment. Directly below this, a 'Featured Courses' section was added, providing immediate value and direction to users who have yet to enroll in a course.

Moreover, for users who enroll in courses, an additional ‘Recommended Courses‘ section appears. This section smartly suggests courses related or similar to those they are currently enrolled in. This personalized recommendation system not only enhances user engagement but also aids in maintaining a clean, focused, and functional dashboard design. These changes collectively aim to create a more intuitive and less overwhelming dashboard experience for all users, whether they are newcomers or returning students.

Intuitive Navigation System

Added global side navigation with a clear, logical flow for finding and accessing courses and content effortlessly.

User-friendly Navigation System.

Problem: Navigation and Usability Challenges:

One of the prominent issues students encountered was the difficulty in locating specific courses, modules, or content within LifterLMS. The platform's complex and non-intuitive navigation structure led to significant user frustration, often causing wasted time and a negative learning experience.

Solution: A Global Side Navigation

To address these navigation and usability challenges, a global side navigation was introduced, designed with clarity and logical flow at its core. This navigation panel, consistently positioned on the left side of the screen, is accessible from all pages of the LMS. This feature not only simplifies the process of finding and accessing courses and related content but also provides a more intuitive and user-friendly experience, significantly reducing the time and effort required to navigate through the platform. This improvement aims to enhance overall user satisfaction and engagement with the learning material.

Additionally, I integrated a separate account menu in the header. This dedicated menu provides users with quick access to their personal pages, enhancing the overall user experience by segregating general navigation from user-specific options. This solution aimed to reduce confusion and improve the efficiency of the platform, making it more user-friendly for students.

Paths

Streamlining the learning journey with structured, progress-tracked course sequences for a clear and rewarding educational experience.

Structured Course Sequences for a Focused Journey.

Problem: Confusion in Course Selection

Students frequently experienced confusion when selecting courses, especially when multiple courses covered the same skill set at different levels (beginner, intermediate, advanced). This often led to a lack of clear direction in their learning journey, resulting in frustration and potential disengagement.

Solution: Introduction of ‘Paths’ Feature

To address this challenge, I created a new feature in LMS Core named 'Paths'. This feature allows course creators to curate a structured learning journey by organizing courses in a logical order. For example, in a skill area like animation, courses can be arranged sequentially from beginner to advanced levels.

This feature effectively mitigates the issue of course selection confusion for students. It offers a structured learning journey and simplifies the decision-making process for students, ensuring a clear and focused learning experience. With an intuitive design, progress tracking, and rewarding completion badges and certificates, "Paths" not only enhances user engagement but also provides a sense of achievement and direction in the learning journey.

Improved Course Page Layout

Redesigning Course page with a focus on user-friendliness and efficiency

Course Page Issues

The original course pages in LifterLMS presented multiple challenges for users. Firstly, the pricing tables were confusing and unclear, leading to uncertainty about course costs and options. Secondly, the placement of the course price at the bottom of the page forced users to scroll excessively, which was inconvenient and time-consuming. Lastly, the display of single pricing plans was redundant, adding to the clutter and complexity of the page.

Solution

To address these issues, the course page underwent a comprehensive redesign with a focus on user-friendliness and efficiency. Key changes include:

Enhanced Visibility of Course Pricing:

The pricing of a course is now prominently displayed at the top of the page, along with an "Enroll Now" button. This immediate visibility of pricing details simplifies the decision-making process for users.

Streamlined Access to Pricing Plans:

For courses with multiple pricing options, the "Enroll Now" button now serves a dual purpose. It leads users to the pricing table when clicked, reducing unnecessary scrolling. In contrast, for courses with a single pricing plan, this button directly initiates the checkout process, bypassing the need to view the pricing table altogether.

Redesigned Membership Plan Integration:

The process for courses requiring membership has been simplified. Instead of redirecting users to a separate membership page, a "Join Now" button opens the membership pricing plans in a popup on the same course page. This ensures a seamless user experience where interested users can select a membership plan and proceed directly to checkout without navigating away from the course page.

Addition of a Related Courses Section:

A new section featuring related courses has been added at the bottom of the course pages. This feature not only aids in user exploration but also encourages continuous learning by suggesting additional relevant courses.

Lesson Page Focus Mode

Ceating an environment that encourages concentration and reduces cognitive load.

Problem: Cluttered Lesson Pages

To resolve this issue, a significant redesign of the lesson pages was undertaken, focusing on simplicity and concentration.

Solution

To address these issues, the course page underwent a comprehensive redesign with a focus on user-friendliness and efficiency. The lesson pages were redesigned to minimize distractions, focusing on core content. I introduced a toggleable Focus Mode that displays only the lesson video and text content, aiding concentration.

The toggle feature for Focus Mode offers flexibility to students. Those who prefer an immersive learning experience can activate Focus Mode for a distraction-free environment, while others who might need to access other page elements can choose to remain in the regular view.

Switch to Dark Theme

Offers visual flexibility, crucial for comfortable and prolonged use, especially under varying lighting conditions or personal preferences.

Results and Impact

As the project nears its completion, the impact of the redesign is already becoming evident, even before the official launch.

The feedback from our ongoing usability testing has been overwhelmingly positive.

Users have reported that the new design significantly improves navigation and the overall learning experience.
The Paths feature, in particular, has been highlighted for its ability to simplify course selection and enhance learning progression.
The redesigned dashboard and course pages have been well-received for their clarity and user-friendly layout.

Conclusion

As the LMS Core project approaches its launch, the anticipation and positive feedback from our test users are a testament to the effectiveness of the redesign. The project, still in its final testing phases, has already demonstrated its potential to enhance the online learning experience significantly. This case study, documenting the journey from identifying issues to developing solutions and testing their effectiveness, serves as a reflection of our commitment to creating an intuitive, user-friendly, and effective learning management system. The full impact of these changes will be realized post-launch, but the journey so far has been a valuable learning experience, demonstrating the power of user-centric design and iterative development in creating meaningful digital solutions.