e-Learning Platform

an app that unites both educational and a platform for the advancement of your own courses with an expedient admin panel

System structure:

Web application
Admin interface

Industry

Education

Services provided

Backend development
Frontend development
Product design
Research
Project management
QA
Consulting

Timeline

6 months

Team composition:

Pavel, Software Engineer

Lena, Project Manager

Anna, UX/UI Designer

Technology stack used:

Alex, CEO

We have built an app that unites both an educational platform and a platform for the advancement of your own courses with an expedient admin panel. Any user can take a training course (both free and paid ones), contrive their own courses (personal and public - for advertisement), collaborate with the platform as a content creator, and get a payoff.

Challenge

A Dutch client needed a unique multi-functional product that incorporates the up-the-minute market trends and has its distinctive features.

Its main concept is the creation of training courses by means of specialized cards (based on Quizlet cards), but with capability and functionality expansion.

Design

Anna, UX/UI Designer

Colours

Typography

Anna, UX/UI Designer

Interesting facts

There is an opportunity for authors to create and monetize their content.
Courses fee is the option for admins to set interest deductions per a certain course. The system is PayPal integrated.
Detailed statistics and analytics. The data is collected and analyzed in all roles’ reservoirs: for admins (earnings, profits, etc.) as well as users (hours, cards quantity, etc.).

3 types of flashcards bring about the option to convert the learning of any information into the card form. Card types: self-rating, multiple-choice, writing.
The algorithm of card completion is spaced repetition. The cards are sorted out according to the progress during the learning process. A user sees the new cards or low score ones foremost.
Various content types. A possibility to add video or pictures both in course and cards. The incorporated text editor has been also enlarged.

Developer’s challenges:

1. PayPal integration as well as the ability to set fees for each course. Solution: We have engaged flexible capabilities of API PayPal and conducted numerous tests. 2. Authorization. solution: Utilization of internal capabilities of next.js (middleware), and next. auth libraries. 3. A large number of items. Solution: The correct item allocation in DataBase, items connections distribution

Designer’s challenges:

1. Complex color palette (red and black) due to the client’s requirements. The color and shadows selection took years so that they looked up-to-date and were user-friendly. 2. Vast functionality that demanded non-bulky, easy-to-use, and clear design with a sense of lightness and space (avoiding the screens cluttering with information, so that each user of each role could do what is necessary without being distracted by others things).

Lena, Project Manager

Solution

The client reached us with having in mind an app idea, its structure, and design sketches (color palette and references). We got down to work with our own research and suggested several implementation options. Subsequently, after joint brainstorming, constant close communication, and options coordination we have developed a unique product. Its essence is the following:

We’ve made it possible to visualize and structure all kinds of theory in every course so that the learning process is of learn-and-play form. The game covers all the necessary indicators for effective study and is ensured with real-time animation.

This was implemented by the means of different kinds of non-trivial cards that include answers for open and close questions. They are self-check, multiple-choice, etc. with an image is attached to every card.

advantages of creating an e-learning platform

The algorithm functions in a way that during the card learning you can determine a convenient learning flow: you select a topic and learn it step-by-step, or chose the theory first and master the cards later.

Moreover, we have created a unique users’ rating calculation algorithm. When calculating the rating, a card with the highest score is considered to be passed (leaning on the answers and score - the correct answer is set when the cards are being created). The user will get the lowest score cards first, cards with higher and higher scores will appear later during the repeated learning. All these are covered by the algorithm.

Anna, UX/UI Designer

The features and processes above are dressed up in an attractive design based on the client’s wishes that are adjusted to be easy-to-use.