Lecture Enfant E-learning platform

How we developed an online French learning platform for children 5-10 years old.

Client

Lecture Enfant was created by a team of teachers, specifically for primary / junior core French classrooms, as well for primary francophone school classrooms. Their books are the result of over a decade of direct teaching experience with students.

Lecture Enfant provides teachers with a practical resource: short books in both PDF and VIDEO format, and related activities for their young French learners.

Сhallenge

The main challenge was to make an interesting and understandable interface for very young children (5-10 years old).

It was necessary to look at the case not from the adult user point of view, but from a junior one. We did our best to make sure that the little user understands all the elements of the interface, and can easily interact with the platform. This interaction had to bring only joy, pleasure, and positive emotions.

Solution

We have created a platform with a “child-friendly” interface that looks like a computer or mobile game. After an in-depth research of the UX for very young users, we abandoned complicated icons and made the fonts bigger. We also left one targeted action per screen to avoid student’s confusion.

Our team implemented a system of rewards in the form of a puzzle collection, and a collection of emojis. We designed an illustrative progress map through the course with nature locations and cartoon animals.

Mood board & "child-friendly" UI

Since the target audience is very young children (5-10 years old), we decided to make the interface “child-friendly”. We collected a mood board with interface parts from different educational platforms and games to identify ours, and understand which stylistic elements would exactly fit us. We chose pink and purple as the main colors because they would suit both girls and boys.

Logo redesign

The client had the original logo, which we decided to make more visually interesting. It had a catchy element — a “playful” letter “E”, which we wanted to emphasize in the new design. We also added some “magic” to the visual language of the logo.

Persona mapping & roles

The project has 4 user roles: Global Admin (client), School Admin, Teacher, and Student. Each role has its unique actions. We designed interfaces for the student and teacher. The administrator roles were created based on the UI kit with all the necessary elements.

Global Admin

Adding books and levels
Managing learning content
Creating schools
Creating teachers
Creating students
Creating private students

School Admin

Creating teachers
Creating students
Managing the school’s student database

Teacher

Creating a class
Adding students to a class
Listening and reviewing student recordings
Moving students to different levels
Leaving text and audio messages

Student

Reading books
Watching videos
Passing quizzes
Recording speech and sending it to the teacher
Collecting puzzles and emojis

Student Interface UI

We started our design work with the student part, as it is one of the most important parts of the project. The target audience is children, and it was very important to make it interesting for children to interact with the platform.

Student Interface Key Features

We made every part of the interface engaging for children. Not only the “gameplay” itself, but even the Log In screens. We designed a system of rewards for little students at every stage of interaction with the platform to keep their attention. We also used enlarged fonts and simple icons, which are easier for young users to perceive.

Gaming Log In with Illustrated Code

To get students into the system, the teacher sends a direct link to his/her students. The student Logs In in 3 steps:

1. Entering the class code.
2. Choosing their avatar and name among their classmates.
3. Choosing 3 unique pictures in a certain order.

The teacher prints out beforehand the cards with the information they will need to enter beforehand. The cards are distributed to the students.

Puzzle Collection

The learning process consists of reading books, which are grouped into levels of 8, 10, or 12 books, depending on the difficulty. After reading each book, the student receives one piece of the puzzle, which is then assembled into illustrations of different animals.

The student has a separate page with the entire collection of animals, including blocked levels, which motivates them to keep collecting.

Reward System

To make the learning platform even more motivating for little students, we have added a reward system — animal emojis.

Just as levels consist of a certain number of books, each book consists of 8 steps. For passing each step, the system “gives” the student one emoji. By the end of all levels, the student will have collected about 2,500 emojis.

Illustrated Progress Map

The puzzle collection consists of animals images. Each animal belongs to one of the 4 nature sectors: sea, beach, forest, and mountains. We made a progress map in the form of a natural landscape, on which the 4 sectors are represented.

On the map, a student can see which levels have been passed, and which are still to be completed. It is also clear which book is in the level the student is currently in. A student can see which step in the book he/she is currently progressing through.

Record the Voice and Send for Teacher Review

Reading each book consists of 8 steps, which include watching a video, repeating the text aloud after the speaker, and going through quizzes. The final step is to record student speech and send it to the teacher for review.

If the student did well, the teacher will “give” the student a piece of the puzzle. If the student did not do well enough, the teacher will record a message with recommendations, and the student will do another recording.

Teacher Interface UI

When creating the design for the teacher, we followed the concept of the existing style for the student, but made it looks more “strict”. We used more common buttons, as opposed to the “playful” buttons of the student interface. We used a smaller font and far fewer illustrations.

Additional Features

In designing the student and teacher parts, we tried to take all the nuances into account. By creating an ilustrated 3-step student Log In, we made sure that students didn’t have to memorize the codes and always had them in front of them.

Integration with React

We integrated Moodle with React. This increased the speed of the whole system during the times when a large number of users are on the platform. It also allowed us to get away from the «boxed» look and make a beautiful custom-made interface.

Using CSV files

The teacher has to add students to his/her class. Since he/she can have a large number of students, adding each manually through the standard form is not very convenient, we need the ability to upload all at once.

To solve this problem, we used the functionality of CSV files.

Integration with SCORM Package iSpring

We use this service to display quizzes with different types of questions nicely and functionally. It is a SCORM package that allows you to quickly create courses with more options to customize the visual display. It also adapts well to mobile devices, allowing our users to learn from different devices.

PDF File with Log In Information

To make sure young students always have information how to get into the system at hand, we made cards. The teachers can download a cards PDF from their interface, print them, and hand them to the students.

Illustrated Certificates

Teachers have the additional option of giving students a certificate for passing a level. The teacher can find certificates for each level in their interface, print them, manually type in their students’ names, and present them.

Feedback and communication

We worked to make sure our ideas and comments would not get lost in endless correspondence with screenshots. For this aim we used a simple Agile board to keep track of all tasks and their statuses.

Trello & Figma

We onboarded our team on Trello. This way the whole team was in touch, communicating with the client, clearly understanding the status of tasks, and seeing the client’s feedback.

The whole team also had access to Figma. Everyone could see the client’s point-by-point comments which was extremely useful for us.

Results

The client wanted to create a learning platform to put its intellectual worth in a digital format and enable more children to learn French in a playful and engaging way. We created a “child-friendly” interface that is easy and fun to use both for adults, and children.

Deliverables

Creating an online learning platform with clear and child-friendly interface
Interactive and secure login with 3 steps: class code, choose oneself from classmates, picture password
Voice prompts for passing the steps
Student voice recordings for teacher review
Integration with iSpring quizzes
Adding students via CSV file or school base by teachers
Ability to leave voice messages to students
Dashboard with overall progress
System of encouraging pop-ups in game form

Project in figures (impact created)

People

1500 +

Hours

270 +

Design layouts

Technologies and tools

Moodle, PHP, MySQL, AWS, JS, TypeScript, React, Redux, SASS, Rest API