Customizable WebApp template for e-learning platforms

Crafted for versatility, our emphasis was on developing modular components and layouts. These serve as foundational elements, empowering designers to kickstart interface development tailored to diverse learning platform requirements.

A mockup showing our clean and efficient webapp template

Goal

We noticed an increase in the demand from clients wanting to create their own learning platforms. As a result, our aim was to develop adaptable components and layouts that could be customized for different client requirements.

Challenge

Learning methodologies can differ significantly, not only in terms of topics but also in the course structure. To address this diversity, our focus was on identifying and incorporating the most essential features. Thus, we created a strong base of shared features suitable for most platforms, forming a solid foundation for future development and iterations.

Outcome

After creating the most important components and applying it in a branded product, we validated the effectiveness of a more systematic approach for the future process of designing learning platforms. This project aims to result in time savings for designers and cost efficiencies for clients.

1 /

Discovery

How we started

With a clear goal in mind, we conducted a competitor analysis to identify common requirements among different learning platforms and explore various learning methods.

Niches covered

Music and instruments
Coding and technology
Visual arts and design
General learning platforms

Diagrams created

Information architecture of each competitor
3 main user flows: admin, teacher and student

Research conclusions

We need to develop a digital e-learning platform that enables businesses to extensively tailor it to match the specific market niche in which their product is being marketed.
Our solution should consist of a modular product with fundamental features and the flexibility to incorporate additional features relevant to the niche.

An illustration of how the core product leads to niche features

2 /

Wireframes and UI kit design

After collecting and processing all the data, we initiated the creation of components and features with ample flexibility and modularity.

During this phase, we employed fundamental design techniques to reach our desired outcome. Our main focus was on ensuring consistency and establishing clear guidelines for future use.

Main user flows created

Enroll in a course
Payment
Submit assignment
Learn (lessons’ section)

3 /

User testing

With a clear goal in mind, we conducted a competitor analysis to identify common requirements among different learning platforms and explore various learning methods.

Screens from the prototype we tested

Insights

The navigation inside the platform course should always be as straightforward as possible.
Providing more than one way for the user to navigate and receive information is beneficial for the learners, as long as it remains easy to understand.
Progress indication can motivate users heavily and is well appreciated if it’s visually interesting.

4 /

Final design

In the course of developing this white-label learning management system, we not only crafted components and layouts to streamline our workflow and save clients’ time and money but also acquired insights that we believe could be valuable for any client looking to create their own learning platforms.
‍
In the end, we implemented all our white-label designs in a branded version, resulting in a comprehensive visualization of how all the elements can come together in a final product.