Naklada Ljevak

“Učenje bez granica“ is a platform that is intended for teachers and students of primary schools. It serves the purpose of helping teachers and students with schoolwork while containing a repository of digital eBook materials which consist of school books, workbooks, and other supporting content.

Naklada Ljevak

The challenge

Our initial challenge was not only to redesign the web application but also to completely overhaul the brand and positioning—we understood that our final product would only be as effective as our research had been.

Although we already had a feel of what it should be; we also had in mind that there was a reason why they asked for a new product. The research conducted made us feel confident in redesigning the web application as well as rebranding the whole platform and ultimately, we were able to move forward with user research including wireframes and user personas.

The idea

The initial design of the platform only consisted of a readable PDF and the platform was not used widely because a lot of teachers didn’t see any benefit of using it. That is why the idea was to make it more interactive by adding the ability for teachers to add content to the eBooks; including photos, audio, and video.

Idea For E Learning Platform

Research

The research was thorough for this project and it consisted of a few stages. From competitive analysis to creating user personas. What we needed was doing a thorough analysis of how competitors were tackling it. It was important that we stayed up to date and that we never lose sight of end-users.

Persona development

Personas, in this case, were pretty straightforward because we knew who was going to use the product; teachers and students. However, in the Croatian education system, there are still a lot of teachers of the older generation who are new to technology and have a hard way of adapting. That fact immensely affected the design from the initial phase to the end product.

User personas in design

Information architecture

It was of great importance to create a simple and intuitive user experience which is mostly achieved by creating great information architecture. The accent is on the materials for students and teachers, that is why the school books needed to be prominent, the menu does not hold many items, but the information inside of it needed to be structured and well presented as it can be seen in the wireframes.

UX information architecture

Design

All of the research above led to the final UI design. Design colors were predisposed with the platform’s branding and the fact both students and teachers are going to use it, directly affected the typography iconography as well as the minimal whitespace look of the application.

eBook reader

Our eBook reader allows students to read every page thoroughly and find things they may have missed out, it also gives them a chance to look through pages whenever and wherever. Teachers also have this functionality where they can open the book and prepare for the next class at whatever time they want with a book reader on their tablets and laptops.

eBook reader

Content editor

Content editor allows teachers to add the content of different multimedia types from different sources in the application. It allows students to have supporting content when reading the books and help them consume it more easily.

Content editor

Development

The development part of the platform consisted of a frontend solution in the React.js framework. As mentioned, the core part of the platform is eBook renderer and adding content to it which was done through Fabric.js and PDF.js. MobX was used as a state management tool and HTML5 API was used for the multimedia content.

React Native, MobX and Fabric.js

Solution

The solution was a platform with the ability to add notes and media content to school books while searching through the content added by teachers (from the student’s perspective). It is:

  • Clean
  • Simple
  • Suitable for all ages
Ebook Library Solution

CoreLine scope of work

01

Research

  • Product-market fit
  • Persona development
02

Strategy

  • User experience
  • Information architecture
03

Design

  • Art direction
  • UI design
  • Visual moodboards
  • Digital identity
04

Development

  • Frontend development
  • Web development