During the COVID-19 pandemic, there was a notable surge in the popularity of online learning platforms. Various organizations quickly sought to establish their own learning platforms to support students in their educational pursuits. Leveraging its user-friendly plug-and-play features, many turned to WordPress to create fully functional learning platforms – without incurring substantial costs. This preference was reinforced by the availability of widely-used LMS plugins like LearnDash, Sensei, LearnPress, TutorLMS, and others within the WordPress ecosystem.
To gain insights into the success of top online learning platforms, we conducted an analysis to understand how they organize their websites and monetize their offerings.
This examination explores the details of how these platforms structure their course pages, meticulously scrutinizing elements ranging from the header to the footer. Key features such as search functionality, course lists, filters, and monetization strategies were closely examined. By dissecting the methodologies employed and presenting data-driven findings, our goal is to offer valuable insights that can assist online learning platforms in optimizing their course pages, ultimately providing users with a seamless and enriching learning experience.
Methodology & The Data
We selected online learning platforms that have high traffic and offer various courses from different instructors. Based on that criteria we selected 6 online learning platforms:
Specifically, we were looking for the following data points:
- Number of elements in the header for each platform
- Presence of Search Box and autocomplete suggestions
- Number of courses displayed per page
- Pagination methods used
- Number of course filters offered by each platform
- Presence and count of elements on individual course pages
- Monetization model employed by each platform
Header Section
In our analysis of website header sections, we focused on the number of elements present. By “elements,” we mean items like Categories, Courses, Login, Register, and similar components. On average, we observed that websites typically include 6 elements in their header. The highest number of elements found was 8, while the lowest was 5 items per header section.
Q: How many elements should you have on your website header area
A: The optimal range is between 5 and 8 elements.
Q: What should be included in a website header?
A: To guide you on what to include in your website header, consider incorporating the following elements: Logo, Course Category dropdown, Search bar, All Courses link, as well as Login and Register buttons. These components form a well-rounded set of features for an effective and user-friendly online learning platform website header.
Here is an example of header area design of Udemy:
Search Functionality on Online Learning Platforms
We discovered a common feature across all of them – the inclusion of a Search Box in their header section. Furthermore, each platform has implemented autocomplete suggestions to enhance searchability and improve the overall user experience. This consistent practice among online learning platforms underscores the importance placed on facilitating effective and user-friendly search capabilities.
Body Text Font Size
Font size on the six leading online learning platforms varies in terms of CSS units. Among them, three platforms utilize the “rem” CSS unit: Udemy with a font size of 1.6rem, Codecademy with 1rem, and Domestika with .9375rem. The remaining three platforms employ different units: Pluralsight uses “.875em,” Future Learn adopts “137.5%,” and Skillshare specifies a font size of “15px.”
| Online Learning Platform | Font Size (CSS Unit) |
| Udemy | 1.6rem |
| Codecademy | 1rem |
| Domestika | .9375rem |
| Pluralsight | .875em |
| Future Learn | 137.5% |
| Skillshare | 15px |
List of Courses Page / All Courses Page
Courses Per Page
How many courses are shown on the All Courses page?
On average, online learning platforms display approximately 16.6 courses per page. Pluralsight and Domestika, however, stand out by showcasing 18 courses on their respective pages, while Skillshare opts for a slightly lower count, displaying 15 courses per page.
Pagination
Among the top six online learning platforms, 4 utilize numbered pagination, while the remaining 2 employ infinite pagination. Specifically, Codecademy and Domestika implement infinite scroll as their chosen method for handling pagination.
Course List Page Overview
Course listing page is the page where all courses are listed with a brief information of the course. Websites use Grid or List layout to present this information.
Here is an example of what a course list page looks like:
Examining the course list pages of the top six online learning platforms, we observed the inclusion of a few essential elements. All six platforms consistently feature the Course Title and Course Duration. The names of course instructors are displayed by four of these websites. Notably, only three platforms showcase a course’s featured image, and Domestika stands out as the sole platform to incorporate a short course preview video.
Here’s a breakdown of the elements and their respective counts:
| Elements | Count |
| Course Title | 6 |
| Course Duration | 6 |
| Instructor Name | 4 |
| Course Featured Image | 3 |
| Course Rating | 3 |
| Course Level | 3 |
| Course Price | 3 |
| Students Enrolled | 2 |
| Total Lectures | 2 |
| Course Description | 2 |
| CTA Button | 2 |
| Course Preview Video | 1 |
This analysis provides insights into the varied approaches taken by online learning platforms in presenting information on their course list pages to engage and attract potential students.
Course Filter Analysis
When it comes to course filters, Udemy leads the pack among the six learning platforms, offering a more detailed and granular course search experience. Udemy provides users with a total of nine course filter options, encompassing Ratings, Video Duration, Topics, Subcategory, Level, Language, Price, Features, and Subtitle.
In comparison, Codecademy features five course filters, Pluralsight has three, and Skillshare offers two filters. Notably, Future Learn and Domestika, in contrast, do not incorporate any course filters on their all courses pages.
Here’s a summary of the course filter offerings on each platform:
| Platform | Course Filters |
| Udemy | 9 filters |
| Codecademy | 5 filters |
| Pluralsight | 3 filters |
| Skillshare | 2 filters |
| Future Learn | 0 filter |
| Domestika | 0 filter |
This breakdown highlights the varying levels of granularity and customization in course search functionalities across the different learning platforms.
Individual Course Pages Overview
The individual course pages, dedicated to providing detailed information about a single course, play a crucial role in the online learning experience. Analyzing the individual course pages of the top six online learning platforms reveals consistent inclusion of essential elements across the board.
All six platforms have the following elements on their individual course pages:
- Course Title
- Course Duration
- Course Description
- Course Rating & Reviews
- CTA Button
In addition to these common elements, four websites display:
- Breadcrumb
- Course Rating
- Number of Students Enrolled
- What You’ll Learn
- Table of Content
- Related Courses
- Instructor Details
Three platforms go a step further with a floating Add to Cart section that remains fixed while users scroll.
Here’s a breakdown of the elements and their respective counts:
| Elements | Count |
| Course Title | 6 |
| Course Description | 6 |
| Course rating & Reviews | 6 |
| CTA Button | 6 |
| Course Duration | 6 |
| Breadcrumb | 5 |
| Course Rating | 5 |
| No of Students Enrolled | 5 |
| What you’ll learn | 5 |
| Table of Content | 5 |
| Related Courses | 5 |
| Instructor Details | 5 |
| Instructor Name | 4 |
| Requirements | 4 |
| Preview Video | 4 |
| Floating Add to Cart | 3 |
| Last Updated | 2 |
| Who is the course for? | 2 |
| Transcript | 1 |
| Featured review | 1 |
| Frequently Bought Together | 1 |
| More Courses by Instructor | 1 |
| FAQs | 1 |
Live Chat
Among the top six platforms, only Pluralsight provides a live chat option for customer support. The remaining platforms utilize email or support forums to address customer inquiries.
Footer Menu
Our analysis focused on determining the number of menu items present in the footer area of online learning platforms. On average, platforms have 27 menu items in the footer. Codecademy boasts the highest number with 62 menu items, while Skillshare has the lowest, featuring only 13 menu items.
Monetization Strategies
Moving on to the crucial aspect of business – monetization strategies. Among the top six online learning platforms, Udemy stands out by offering a Pay-Per-Course model. On the other hand, Skillshare, Pluralsight, Codecademy, Future Learn, and Domestika adopt a monthly subscription model as their preferred approach for monetization.
Key Takeaways
- Header with 5 to 8 elements, including Logo, Course Category dropdown, Search bar, All Courses link, Login, and Register buttons.
- Implement a search box in the header with autocomplete suggestions
- Decide on the number of courses to display per page. The average is around 16 courses
- Choose a pagination method based on user experience preferences.
- Design a course list page with essential elements such as Course Title, Course Duration, Instructor Name, Course Featured Image, Course Rating, Course Level, Course Price, Students Enrolled, Total Lectures, Course Description, and a Call-to-Action (CTA) Button.
- Provide course filters for a granular search experience. Consider options like Ratings, Video Duration, Topics, Subcategory, Level, Language, Price, Features, and Subtitle.
- Ensure individual course pages include elements like Course Title, Course Duration, Course Description, Course Rating & Reviews, CTA Button, Breadcrumb, Number of Students Enrolled, What You’ll Learn, Table of Content, Related Courses, Instructor Details, and a Floating Add to Cart section.
- Consider implementing a live chat option for customer support.
- Choose a monetization model based on your business goals.
By following this checklist, aspiring online learning platforms can optimize their course pages, providing users with a seamless and enriching learning experience.
