top of page
Re-designed an LMS (Learning management System) Platform for future ERG (Employee Resource group) leaders.
My Role:
Project and Research Lead
The Team:
2 Designers
1 UX Researchers
CEO of VDG
Duration:
2.5 week sprint
Product type:
Web app
Our Client
Visionary Development Group, is a startup that provides E-learning programs to help global companies cultivate safe and diverse workplaces. Their consulting services include training and certification for employee resource group (ERG) leadership and DEI (Diversity, Equity and Inclusion) data management.
The Challenge
Currently their E-learning platform was hosted on Thinkific. An online platform that helps entrepreneurs create and sell online courses. Thinkific’s platform had limitations that prevented our client from hosting a more accessible, motivating and engaging learning experience. To accommodate her needs she required a custom LMS platform that will host her content well, while providing priority to the resources and easy access to the course material.
What are we working with?
We conducted a thorough analysis of the existing platform that was hosted on Thinkific and identified usability issues and limitations.
Assignment
Assignment
1/1
Navigation
We discovered that all the modules of the course were mentioned on the left-hand side of the page that was constantly visible, taking up significant screen real estate.
Resources
Resources
1/1
Resources
The resources were provided as a mix of media that consisted of links, PDFs, and Google docs.
Quiz
Quiz
1/1
Quiz
We found that the quiz was very dry and not engaging
Navigation
Navigation
1/1
Assignments
All assignments need to be downloaded, completed and re-uploaded onto the platform causing users to leave the site and break their focus.
The Solution
To solve these challenges, we designed a custom LMS platform with clear course progression, standardized resource management, and user-friendly features that allow for easy organization of the existing course content.
How did we get to this solution?
We interviewed 7 individuals who had experience with both live and self-paced courses in order to better understand the differences experiences that users have had with both.
3/7
Users said they like to see a clear progression of their advancement to finishing the course
5/7
They find content that includes all three mediums to be the most engaging
6/7
Users said they prefer to go back to the resources to revise the material
Defining the Scope
We created a Venn diagram to identify what client and user needs overlap so we can give those priority.
What kind of person would want to take this course online?
Say hello to Rui!
GOALS:
• He wants to stay motivated to complete the course
• He wants to be able to access resources through his learning journey.
• He wants a way to track his progress throughout the course in terns of how well he is doing and how far is he from completion.
“My focus is always on what class am I about to take, what have I already taken, and the material with the summarized notes”
FRUSTRATIONS:
• He loses focus when reading large bodies of text
• He finds himself overwhelmed when he is offered too many decisions that do not directly apply to the specific learning material
• Clicking out of the platform to complete assignments is inconvenient and leads to other distractions
Aspiring ERG leaders need a structured and engaging way of learning
so that they can systematically use the provided resources to apply leadership skills and help understand overall business goals.
We identified features that would help us solve these problems in our LMS, so we branched out to see how other companies were solving these problems
We conducted a thorough Competitor analysis but focused mainly on the features within our scope, which is navigation, resources, assignments and quiz
User insight : Users said they prefer to go back to the resources to revise the material
Took inspiration from pathrise and Lingoda for their display of multiple mediums of resources.
Insight: They find content that includes all three mediums to be the most engaging
Took inspiration from Interaction design foundation for adding assignments within the platform.
User insight: Users said they like to see a clear progression of their advancement to finishing the course
Taking inspiration from Interaction Design Foundation on how to show progression in a course.
After looking over solutions other companies have come up with we ideated on some features that fit our context.
Ideation
We did several rounds of a brainstorming activity called crazy 8s for each category, voted on the best ideas and then further developed those.
We prototyped the solutions and tested them with users.
Whats working, what isn't and WHY?
Navigation
Navigation
Navigation
1/1
We decided to conduct A/B testing to evaluate the navigation. We wanted to evaluate how much content should be visible at all times to keep users engaged without distracting them. As the course is live, it was important to find a balance between providing easy access to course materials and minimizing distractions during the live class.
100% of our users did not prefer the bottom nav because they could not preview the remaining course.
100% of our users liked the left nav but wish that it wasn’t visible throughout.
From user feedback we created a nav that will collapse when users want to focus on the content.
Navigation
Navigation
1/1
Resources
Resources
Resources
1/1
To create better distinction between the different categories of resources we separated them into file types.
The icons were too small and 100% of our users could not tell which resources were available for download.
We disabled the right card to clearly indicate which resources are available to download.
Is it accessible?
Making sure that our LMS platform design was accessible to all users was extremely important to us and our client. The colors on the current LMS platform being used failed the color contrast test, however, our client was more than happy to have us explore different colors for their new LMS platform.
Color Iterations
Color Iterations
1/1
The client’s requirement was for a soothing and tranquil platform, hence we selected the orange and muted blue iterations.
Accessibility Check
Accessibility Check
1/1
Deuteranomaly is the most common type of red-green color blindness, making green look more red. Upon recognizing that incorrect answers were displayed red and correct answers in green for the quizzes, we aimed to ensure compliance with color blindness standards as well.
Accessibility Check
Accessibility Check
1/1
How it all came together
Navigation
In response to user feedback
• the navigation bar can be minimized so that students can focus on the course work while the class is live.
• We decided to go with the left hand nav as it is a familiar design pattern amongst learning management systems.
•We replaced the chevrons with text highlighting the heading for the next lesson.
Navigation
Navigation
1/1
Resources
In response to user feedback
• We modified the design by graying out the cards that is unavailable for a better visual cue.
• We categorised the different file types for easier access.
Resources
Resources
1/1
Assignment
• Assignments can be completed on the platform itself a feature our users were happy with it.
• There is also an option to download the assignment as you finish.
Assignment
Assignment
1/1
Quiz
• The quiz was made more engaging and fun with positive micro interactions to provide a sense of achievement.
Quizz
Quizz
1/1
Future Steps:
If given the opportunity to work on this project further I would:
-
Introduce a reward system to make the content more engaging.
-
Ideate on the interface for the admin platform.
-
Test the platform with actual ERG leaders to gauge the usability of the current platform.
Lessons Learned
Communication is Everything:
Through this experience, I have come to understand the importance of delegating tasks and defining roles right from the start of the project. Despite having practiced this with the team, there were still some inconsistencies in our communication.
I also learned that scheduling regular discussions and progress updates can help to minimize misunderstandings and keep the project moving forward smoothly. In the future, I will allocate more time for these discussions and ensure that everyone is on the same page.
I have grown significantly compared to my previous project in terms of collecting metrics and documenting all processes very clearly. However, I also realized that I may have a tendency to be a perfectionist and that I need to learn to trust my teammates' expertise and their methods of doing things. Overall, I am very happy with the product we created and so was our client. I am also grateful to have worked with such an amazing team for this project.
Documentation
If you are curious to take a deep dive into the processes and methods we used here are the files for the artifacts.
Figma Files:
PDF's of all artifacts:
bottom of page