Redesign of an e-Learning Course Website

A complete overhaul of a purchased, premium WordPress LMS designed theme drastically changed the look and functionality of the website. Internal course navigation was removed. Design options including fonts and typographical emphasis were severely limited.

Additionally, the launch of two new courses, including a list-building free course expected to increase sign-ups on the site significantly, necessitated a quick decision on what to do and a short window in which to accomplish it.

Existing students were emailed to see what features they’d like to have included to aid their course navigation and enjoyment. Those who were willing were interviewed for more details.

Students missed the course’s internal navigation as now they had to rely on browser back buttons. They also listed a visual progress bar and automatic forwarding to the next module as desired features.

With a limited time frame, I researched pre-designed solutions. Several plugin options that worked with WordPress were available. Other LMS themes existed but each had their pros and cons.

With all the data in hand, my business partner and I decided to go ahead with the website rebuild despite the tight time frame. Two new plugins to add course navigation and progress would be purchased and I’d create an e-learning website from scratch using the Divi theme, which would give us the most control going forward.

One student, Bill, familiar with course websites and very helpful with ideas became my user profile to guide the new website setup and features.

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 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. The update removed most images or made them extremely large blocks set below large, bold titles. 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. A template for main course pages, module pages, and individual lessons were also designed.

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 help 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.

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 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.

• Side bar navigational menus were added for internal course navigation
• A new plugin created a check mark next to lessons in the sidebar menu to show which had been marked complete
• A progress bar was added to the bottom of the sidebar menu as well
• A “Mark Complete” button was added 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 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 taking to a thank you page with an upsell.
• Additional menu functionality was created to show different elements based on user logged in status, for students versus affiliates, and course visibility.

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 planned for the website relaunch.

With approximately a month between the creation of the staging site and it being ready for release, student data had changed. I made backups of MemberPress data and other user profiles/data to ensure nothing was lost with the update.