7 UX & UI trends on e-Learning

Teresa Mira
Sep 21, 2017 · 6 min read
Photo by Rodion Kutsaev on Unsplash.

I recently did some research on the e-Learning space and realised there wasn’t a lot of explicit information available about current and future trends regarding UX and UI, so I decided to compile some key take aways from various examples I stumbled upon.

Starting with the premise that any e-Learning platform should make learning easy so the students can focus on the content (which is what matters the most to them) and the fact that the pace of our lives today influences when and how we learn — it’s easy to distill that the interface should act as a real learning facilitator and be adaptable to any learning “space”.

Taking this into account I’ve clustered some interesting characteristics and best practices of some of the best e-Learning platforms I’ve found:


Duolingo, DYI and Barclays Code Playground.

One of the current trends is about gamifying the learning experience with the use of motivational elements and engaging design, to make learning playful. The challenges can be presented in the form of games or by using game elements (such as points and badges) which increase healthy competition between students. Duolingo is a good example, where the user can propose a challenge to a friend and earn Lingots, the in-game currency. On the DIY platform, kids get a new skill patch after the completion of each level. Barclays Code Playground is another good example of a playful and interactive interface, where coding is presented in the form of a game itself.


Future Learn and Duolingo examples.

The use of motivation triggers helps to keep students engaged because it taps into their aspirations. Examples such as progress bars (where the user can check his current position and how far does he need to go) are one of the mechanics that make games so addictive. People like to progress from level to level.

Hero moments that celebrate achievement (with motion UI playing an important role) provide a sense of accomplishment and satisfaction, making the experience more human. In some cases the students may want to share their points and badges on social media, which in turn is instant marketing for the platform.


Duolingo, Busuu, Coursera and DIY.

Uncluttered interfaces are key to a smooth experience. This can be achieved by efficient use of space and clean layouts. The use of cards as a UI element is a trend that has been going for a while, it’s proven to be an effective element when used as content containers to cluster information (this enables the key information to be visible at a glance, while a second layer of content is still accessible but contextual) — so users only see what they need when it’s needed.

Clear hierarchy, feedback and reassurance (confirmation screens, call-to-actions and visual cues for errors and notifications) contribute to a seamless interaction flow. Consistency and predictability make the user feel at easy and in control.


Process masterclass, Duolingo and Google Primer.

A big part of making learning easy comes from how the content is structured, which can contribute to a personalized learning experience driven by self service: courses that are modular, divided by bite-sized lessons, give the users autonomy to create their own learning path (consuming content at their own pace, or in no particular order). Easy learning also comes from the way content is presented: easy-to-scan layouts with small chunks of text and a brief description of what the student is about to learn and how much time they need to invest in it.

Infographics are another way of visualizing information and quickly grasp a concept. In the example above, Duolingo represents visually a complex lesson plan, or in the case of Google Primer a lesson’s recap for a summary of the key learnings of a module — these features contribute to higher retention.


DIY, Duolingo and Google Primer.

The experience shouldn’t be confined to the platform and it doesn’t end when a student completes a set of lessons, it should be an ongoing dialogue. Follow-up messages with tips, resources, or updates and friendly reminders help to keep momentum and build trust (tone of voice is an important aspect to make the user feel they speak the same language).

Learning on the go is crucial and not a “nice to have” anymore. Multi-device design and offline content are a must since mobile browsing is a constant in our lives. It makes learning convenient — users can manage their time and chose where and when they want to practice.

The social aspect is also a trend, since students like to share knowledge with friends or join clubs and groups, this can also be done by integrating social media with e-Learning, extending the learning experience beyond the main channel.


Busuu, Career Foundry, Coursera, DIY and Google Primer.

Diligent interfaces reduce complexity, help to mitigate technical issues and provide additional support. A help section, a chat bot or an on-boarding tour (useful to introduce a new tool or explain the main features), a quick and simple sign-in process (using your Facebook profile for example, in one single click) or a smart search functionality that allows the user to find content in a logical manner (by lessons or topics) — are proactive ways of promoting a confident interaction and cause a good first impression.


Process masterclass, Wanikani, General Assembly and Future Learn.

Look & feel and visual language can make an impact in the way students perceive education. A well designed landing page becomes an important point of reference for browsing. Good use of negative space is vital since it reduces cognitive overload, works as a visual relief and it’s proven to improve learning efficiency. Bold colors and typography are also a trend and custom illustrations convey the message in a more thoughtful way than stock photography for example, they also add character and personality to the UI and improve brand image.

Forecasts demonstrate that the virtual learning market will be booming in the next years.

These platforms need to promote an autonomous learning process, be engaging, dynamic and accessible. The interface must enable new ways of learning, by doing and creating, while moving away from a sequential static system, to provide better learning journeys.

Do you want to write your design thoughts on .dsgnrs. blog? Read more…

Teresa Mira

Written by

Senior Designer @ Designit NYC



The place where designers become top designers · Top designers | Interviews | Tools | Jobs | Stories

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade