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.

Card elements used in the WebApp showcasing information about the course such as, title, content and duration.

Client

UX Studio

Industry

Education

Team Setup

1 UX Lead
+ 2 Designers
+ 1 Researcher

Timeline

1 Month

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.

35
UNIQUE COMPONENTS
4
NICHES COVERED
18
PAGE LAYOUTS

Project Timeline

Timeline of the project including the following phases: discovery, user testing, wireframing, UI Kit design and final design.
01

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.
Diagram displaying the core product elements and the niche features. The latter ones are: video material, live lessons, tutors and assignments.
02

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

  • 1. Enroll in a course
  • 2. Payment
  • 3. Submit assignment
  • 4. Learn (lessons’ section)
Collection of UI elements employed in the purchase process include snippets ranging from a card displaying course information to payment details, concluding with progress indicators for the course
03

User Testing

To see how the target audience interact with the product, we ran a series of usability tests with a generic layout made for a fictitious guitar course. The objective was to pinpoint and address any potential challenges or difficulties that learners could encounter.

Page with the different type of courses offered in a fictional guitar related website.Page of a specific lesson of a Guitar course where is displayed the progress the student has.
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.
04

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.

Two screens where the first one features a landing page for all the courses the website offers and the second one, displaying the specifics of a course such as lessons and units.Example of a fictional website where is displayed in two screens the courses that website offers and, in the second one, the specific information about a guitar course.