Redesign of an e-Learning Website
Case Study
01
Project Overview
A LMS (Learning Management System) theme update significantly changed the design to the e-learning course platform covered in this UX case study, making it look bulky with few backend options to change it. Worse, it also removed internal course navigation menus, making the UX nonfunctional.
With students feeling lost and design control reduced, the decision was made to rebuild the course website from the ground up with a new theme and bring in new features to aide students.
Problem Statement
An existing LMS website with active students underwent a theme update that completely changed the UI, making it clunky and very spaced out with virtually no backend controls to modify it. In the process, it also removed navigational elements and other essential features to allow students to navigate through the course.
Additionally, a new course and a new onboarding free course were about to be released, reducing the time frame to make decisions and release the update.
The Goal
Switch the WordPress theme to something more customizable and rebuild the website to improve the UI while adding in new features to help users in completing the courses successfully. Additionally, this would be done on an active course website, so minimizing disruption to existing students while not losing any student data and access was a high priority.
The Team
I was the lead on the project. The website was co-owned between myself and another author/educator. We had over 100 active students at the time with others going through the free “sample” onboarding workflows.
My Role
I was the sole UX designer and developer working on the project, utilizing a few forums and friends to ask questions of with some of the technical details.
02
User Research
I began by reaching out the the premium LMS theme currently on the website, expressing my concerns and frustration with the recent, forced update to the theme and lack of controls to customize. While they promised no further major updates, they also had no plans to fix any of the issues I brought up.
The decision was quickly made that the updated LMS theme could not be kept due to the poor UI and horrible UX, especially with no plans to allow or improve any customization.
Comparison of Prior (Purchased) UI/UX and Updated UI/UX
Original LMS Website Design
(hover for more info)
Updated LMS Website Design
(hover for more info)
User Survey
Exisiting students were sent a survey and four students who indicated they were willing to meet to answer more questions were given one-on-one interviews. A list was made of all feedback, which aligned with what I’d noticed (and feared) when I’d seen the theme update.
Research Results
I organized all feedback into areas of pain points and added in other notes about some suggestions of improvements that students had seen in other LMS websites to research to see how heavy a lift they would be to incorporate.
Pain Points
- New Navigation Confusing? 90%
- New Module Page Difficult? 87%
- Locating of video (too low on page) 75%
- Organization of Downloads 66%
User Requested Features
- Internal Course Navigation 100%
- Completion Bar 88%
- Auto Lesson Forwarding 72%
- Less Scrolling to Reach Content 62%
- Clearer Access to Bonuses 47%
Personas
One student, Bill, familiar with course websites and very helpful with ideas became my user profile to guide the new website setup and features.
Bill
Bill has taken several e-courses and is familiar with their layout. He likes internal navigation for quick links in case he wants to jump back to previous information or forward to a related module. He also wants to know how far he’s progressed in the course. He likes simple functionality and would prefer if marking a lesson complete would move him to the next one automatically.
03
Wireframes
Most of the information architecture of the website would remain the same. However, the overall look of the website would under go a complete makeover. The existing brand guide and colors would be kept, but with full customization control, I reconsidered font choices.
The update on the existing premium LMS theme changed the look of the website from image based with a san serif font combined with a stylized cursive to an extremely large, all captialized, bold title that looked like Arial Black. The update also removed most images or made them extremely large blocks set below the large, bold titles, which felt like they were shouting at students. This setup required two or three full screen scrolls until reaching lesson materials and videos.
A return to an image based website using a san serif font with some highlighted words was designed as a low fidelity wireframe in Photoshop. Then it was mocked up directly in the website using the new theme, testing out its abilities. Templates for main course pages, module pages, and individual lessons were also designed.
Website Redesign Wireframe
Brand Guide
Brand Colors
The colors for the original website were kept. Much of the color scheme had been lost in the LMS theme update, but using Divi and some of the gradient overlays and icon accents allowed them to be utilized again.
A simple, clean san serif font with variable spacing was desired to give the website a clean look. Open Sans was selected for use. It is easily readable, unobtrusive giving focus to the lesson content, and has a nice bold or italicized version for accented words or lines.
Numerous images had been used in the first iteration of the website and had been lost in the theme re-design. Though secondary to the lesson material, they provide visual interest and helped create enthusiasm or curiosity for lessons.
For this reason, I utilized the existing images and added a few new ones purchased from Shutterstock. However, the sizes were kept small to reduce website load times and visual clutter.
Original Fonts
(pre-theme update)
Current Fonts
(after theme update)
Redesign Fonts
(after redesign)
04
Development
With a massive rebuild on a site used heavily daily by paying students, the new version was built on a staging site to not impact current student use.
The first issue that arose was that the LMS theme used a special post/page type of “courses,” which the new WordPress theme, Divi, did not recognize. In order to utilize all previously created course material and pages, a plug-in that easily allowed changing the post/page type was installed, saving days of work.
Answering User’s Needs
New Side Bar
Lesson Complete Button
To address user pain points and wishlist features, I added
- Side bar navigational menus for internal course navigation
- A new plugin to create a check mark next to lessons in the sidebar menu to show which had been marked complete
- A progress bar to the bottom of the sidebar menu
- A “Mark Complete” button to each lesson, which when clicked initiated the check mark on the sidebar menu and moved the student to the next lesson. At the end of the course, it moved students to any bonus material.
- Reduce scrolling to lesson materials (a more compact design).
Additional Functionality
A few new elements were added that couldn’t be created under the old theme.
- When a premium course is marked as completed, a “Congratulations” badge appears on the course page.
- Clicking the badge takes students to a coupon for an additional course.
- After registration, students are taken to a thank you page with an upsell.
- Additional main menu functionality was created to show different elements based on user logged in status, for students versus affiliates, and course visibility.
Testing
The staging site was tested as much as possible for navigation, video play, and functionality. However, some plugins didn’t work on a staging platform and purchased plugins that were good for only one site license did not function either. While I had faith previously utilized plugins would continue to work, time to find errors and fix them was built into the website update/relaunch.
Redesigned Lesson Page
(hover for more info)
05
Relaunch
Approximately a month passed between the creation of the staging site and it being ready for release, meaning student data had changed. A little nervous, I made backups of MemberPress data and other user profiles/data to ensure nothing was lost with the update.
Students were notified via email that the website would be down for a Saturday afternoon and potentially during Sunday as well. As they had been a part of the user research, most students were aware of a forthcoming update. Still, I kept the tone excited and light, suggesting they work on their book/worldbuilding/character development/plotting for teh weekend. The website was then put into construction mode and the staging website was moved to the live site.
I double checked user data against the backup copy and transferred any needed files. The relaunch went actually very smoothly and the only issue, in the end, were a few links that were not updated from pointing to the staging site to the proper page on the live site.
Website Speed Through
06
Results
The website rebuild not only restored course navigation, it enhanced student experience. Feedback on the update was very positive. From a UI perspective, the new design was more compact and visually pleasing. With complete design control, additional options like a coupon to reward students for completing courses were able to be added.
The rebuild took less than a month and the website was down only an hour before the relaunch. Only minor issues like links that didn’t update in the transfer from staging to live were found. And everything was accomplished in time for the release of the two new courses, meaning I met all the goals laid out in the beginning. 👍
Pages Rebuilt
Days to Rebuild
New Features
$ Saved Annually
07
Lessons Learned
This redesign had a lot of moving parts. Knowing I was not only lead but mostly alone, I took pains to double check myself, ensure everything was backed up, and to ask questions from both the Divi team (who are fantastic) and the previous LMS theme help desk (who were not as helpful) when I had questions.
The deadline caused some pressure, but also kept the project moving. All obstacles were met with a problem-solving enthusiasm. To say I’m pleased with the result would be an understatement. The students love the functionality and I love having complete design control.