14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

WORLD OF WYSIWYG

Custom LMS design: creating eLearning platforms for 21st century learning

Published March 29th, 2023

11 min read

Frequently, LMS design is driven by the old way of doing things, for old reasons. So sadly, too many learning management systems (LMSs) are designed for old-style schooling, passé business training and obsolete learning methods. But that can’t continue. New eLearning requirements need new LMS design approaches.

Di Mace

Marketing Communications Manager at Tiny


To better serve today and tomorrow’s eLearners, education technology (edtech) needs LMS designs that look forward for their design direction and functionality, not backward. They also need to incorporate the rapidly evolving education methods and 21st century learning and development (L&D) goals.

It’s well documented that L&D engagement levels dropped at the same time as remote and online education rose during the COVID pandemic. In fact, the key culprit – a lack of direct connection – has become one of the largest challenges for online training and development initiatives around the world.

The simple answer is better tools, for better learning.

Why create a custom learning management system?

The key reason for building a custom LMS is to improve learning outcomes. A next-gen LMS design, aims for a user experience (UX) and user interface (UI) that encourages deeper engagement. Improvements in both UI and UX support the teaching and learning practices now being employed, and also produce better course and learning outcomes.

Throughout their life, modern learners are exposed to a huge variety of technology. So coming into edtech, their expectations are high. Those expectations are also heavily influenced by their experiences on other platforms – especially social media – where engagement and entertainment are high priorities.

As a LMS product manager, developer or product designer, you need to understand:

  • How LMS users' expectations have changed
  • How education and training has and continues to change
  • What new digital classroom practices are being adopted

Then, you can produce custom LMS designs that engage as well as educate.

Why LMS UI and UX are important

A great LMS design is the perfect merge of UX and UI. It delights the people who use it – students, learners, teachers, subject matter experts and administrators – and facilitates the achievement of their desired learning outcomes.

The combination of great looks and feel (UI) with smooth functionality (UX), can produce an exceptional learning management system. It’ll motivate the people who interact with it, in a meaningful and intuitive way. But by contrast, a poor UI/UX experience leads to lower levels of learner engagement.

Research conducted by Forrester shows that 88% of end-users are unlikely to come back to a LMS platform, if it doesn't provide a great eLearning design. And unfortunately, an overwhelming number of LMS designs suffer from poor UX. Recent LMS research from Capterra shows that poor usability is the number one reason why educators seek better options for their learning management system.

Source

Several learning management systems already provide improved tools. And the three main methods used in their LMS design, to overcome platform switching behavior are: UI, UX, and accessibility.

What is LMS UX design?

LMS User Experience (UX) covers a much broader area than LMS UI design. UX encompasses all aspects of the end-users interaction with a company/provider/brand, its services, and its products. It combines all the factors that make a product or LMS enjoyable, effective and easy to use – by setting the tone for all the other LMS functions and features.

The breadth of UX design factors can include:

  • Accessibility

  • Users with disabilities
  • Offline access
  • Multi-language
  • Visual design/appearance
  • Intuitive design
  • Multi-platform adaptability
  • Usability
  • Customer service
  • Course structure and layout
  • Personalization/customization
  • Onboarding
  • Engagement
  • Ease of use

A next-gen or custom LMS design must combine the majority of these UX elements. It should merge appearance and customization with structure, accessibility, and navigation in order to create the perfect blend of look and function.

What is LMS UI design?

LMS User Interface (UI) is the layout and functionality of the pages in the LMS and ties more closely with how a person feels when they finish interacting with the platform/product.

As part of the UX design, the LMS UI design focuses on how people interact with the system.

Some of the components that make up the user interface of modern LMSs are:

  • Icons
  • Buttons
  • Menus
  • Search bars
  • Welcome screens
  • Dashboards
  • Newsfeeds

For effective learning experiences, interactions with the LMS should be easy and straightforward, so that the system isn’t a barrier to the user’s learning activities.

If you want to offer products or services that have value for your customers, you must first make the effort to understand what customers consider valuable.

Jan Jursa

Author of UX Storytellers

LMS UI design considerations

A great LMS UI design should be simple, attractive and intuitive. And it should eliminate superfluous actions that aren’t essential when interacting with the LMS.

Similar to other software, LMS UI design controls the all-important first impression and has a direct impact on how a person interacts with the entire system. By extension, it should deliver a harmonious and smooth user experience.

Three key LMS UI design considerations are:

1. Ease of use

The overall look and feel, its icons, buttons, navigation and search bars should be intuitive and simple so there are no hurdles to accessing and completing the necessary activity, as well as reaching a learning goal.

2. Modern design

A simple, clean and responsive design where the UI retains all of its features and functionality when resized between different screen sizes. Colors should be consistent and accessible for all users.

3. Intuitive navigation

The LMS should have a familiar and straight-forward menu structure that’s consistent throughout the entire system.

LMS UX design considerations

Creating a better user experience (UX) involves making something easy to use and more appealing. As a whole, it focuses on human-product interaction, including aspects of hardware design.

To deliver an effective LMS UX, you should avoid the common mistakes such as a lack of mobile adaptability, complex navigation, and dull and unengaging experiences.

According to Statista, in 2022 there were 5 billion people accessing the internet on their mobile, indicating that over 60% of the global internet population uses a mobile device to go online. Given that volume, your LMS must smoothly adapt to different devices, especially smaller screens, or you risk losing users.

The better your images, text, navigation and other elements adapt to different devices, the more positive the UX of your learning management system is for users.

88% of online consumers are less likely to return to a site after a bad experience.

Justin Mifsud

Founder, Usability Geek

The UX design of your LMS can also significantly impact your customer retention.

Ultimately, you want users to find it simple, easy to use, and enjoyable. And accessibility to users with a range of abilities, is essential. Images must have alt text, audio descriptions included for users who are blind or visually challenged and closed captioning added to any video material.

All these adjustments – when incorporated in the LMS design from its conception – helps all your LMS users, not just those with hearing or vision impairments.

While UX is recognized as a trillion-dollar problem in ecommerce, it’s been sadly overlooked in LMS design, in favor of other considerations. Highlighting the importance of UX, the Future of Design in Startups Survey listed the five biggest benefits for a UX-focus:

  • Boost in revenue and conversion
  • Fewer support calls, therefore fewer employees
  • Increased customer satisfaction
  • Reduced development waste
  • Lower risk of the development of a wrong idea

That’s five perfect reasons for making UX a priority in your LMS design, especially when combined with the 21st century learning principles now being employed in eLearning.

LMS design with four modern learning principles in mind

Some teachers are already using their initiative and adapting classroom practices with eLearning tools and technology. However, the edtech sector needs to keep up – by providing LMSs that incorporate this knowledge into their LMS design.

LMSs meet 21st century skills

Today’s eLearners need 21st century tools to prosper. While several essential 21st century skills have been identified, those receiving the most attention and deemed critical for learning, are known as the four Cs – critical thinking, creative thinking, communication, and collaboration(1).

eLearning tools for 21st century learning must incorporate these four pillars of learning.

If you haven’t already, investigate whether your LMS design supports these four pillars of learning, and if it doesn’t, they’re the basic starting points for a redesign of your LMS – to deliver improved eLearning results. Here’s four examples of modern learning principles, applied to LMS functionality:

1. Facilitating questions and answers

Questions are used by teachers to discover what students do or don’t know, and what’s being misunderstood (2). However, there’s an art to asking good questions – the most effective ones are typically divergent (or open) questions, encouraging higher levels of critical thinking (5).

LMSs should allow teachers to pepper online lessons with questions that reveal students’ thinking. Teachers and trainers should be able to access responses in real-time, to immediately adjust lessons and clear up common issues.

Taking this to the next level, an LMS could prompt suggested alternative questions, such as “This appears to be a closed question – consider starting with Why…”.

TinyMCE configured with a placeholder question used in a year 7 technologies class

See TinyMCE in action

Check out our interactive product demos and discover all the features packed into TinyMCE.

Get TinyMCE Free

2. Collaborative learning and discussions

Collaborative learning increases motivation and information retention, and enhances critical thinking through peer discussion (7). Google Docs-like software that allows real-time collaboration is a useful online tool that supports communication and collaboration.

The best LMSs allow eLearners to collaborate on group projects – helping them learn from each other, provide feedback and combine their shared knowledge and skills. Collaboration in an LMS takes many forms – so select the collaboration method that best fits your audience:

  • Comments
  • Virtual sticky notes
  • Shared whiteboard space
A collaborative workspace built with TinyMCE’s real-time collaboration

3. Increasing participation and engagement

Teachers and trainers often encourage participation by randomly selecting participants to answer questions. So what are the LMS design implications for this? An LMS should facilitate the random selection of people from amongst the learning group and could be automatically updated using an eLearning tool like an online name picker (e.g see www.wheelofnames.com ).

For your LMS design, the core concept to include is random selection – so each person has an equal chance of being selected.

An online name picker taken from a website called wheelofnames.com

Get started with TinyMCE for LMS

Start building using our LMS editor starter config and a free 14-day trial.
Or see a demo and talk to an expert

Explore TinyMCE for LMS

4. Media galleries encourage comments and question of others' work

A gallery walk enables learners to provide feedback on other’s work, ask questions, and learn from each other’s successes and challenges.

The best LMSs facilitate gallery walks by allowing media uploads (like documents, images and rich media), to a common place where all participants can then view and provide feedback on each other’s work.

TinyMCE image upload with Tiny Drive

LMS rich text editing

In order to provide modern eLearning environments, LMSs need a powerful rich text editor that has all the content editing features users, subject matter experts and administrators expect in modern applications.

They need to be able to:

  • Format text with different styles and colors
  • Insert links
  • Use emojis
  • Add tables
  • Add images and rich media
  • Spell-check work
  • Be accessible to all people
  • Work collaboratively.

TinyMCE is the world’s most trusted WYSIWYG HTML editing component, and is used in millions of applications including many of the leading LMSs. Read more about these solutions in our article about best LMS platforms and view the full list of TinyMCE features.

To find out how to build your new and innovative learning management system with TinyMCE or to integrate it with your existing solution, reach out to our support team, or try TinyMCE and its Premium plugins on a 14-day free trial, to see which plugins align closest with your LMS design.

🎩 Hat tip to Ben Long for the foundational work and research done on this article


References

(In alphabetical order by authors)

(7) Docherty, M. (2020). Collaborative learning: The group is greater than the sum of its parts. In M. E. Auer & T. Tsiatsos (Eds.), The challenges of the digital transformation in education (pp. 26–33). Springer.

(1) Koul, R. B., Sheffield, R., & McIlvenny, L. (2021). The essential twenty-first-century skill set—Transversal competencies. In R. B. Koul, R. Sheffield, & L. McIlvenny (Eds.), Teaching 21st Century Skills (pp. 69–76). Springer.

(5) Pagliaro, M. M. (2017). Questioning, instructional strategies, and classroom management : A compendium of criteria for best teaching practices. Rowman & Littlefield.

(2) Wiliam, D. (2018). Embedded formative assessment (Second edition.). Solution Tree Press.

author

Di Mace

Marketing Communications Manager

Messaging strategist and copywriter whose passion lies in working with brands like Tiny, that have deep-seated values and embrace the power of their story. She gets a kick out of solving problems, loves learning new things and making stuff, every day. When she’s not thinking through clever copy lines or clarifying value propositions, she’s knitting amazing socks for everyone she knows.

Related Articles

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.