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 benefits from 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.
Research
The research was thorough for this project and it consisted of a few stages. From competitive analysis to creating user personas. We needed to do 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.
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 had not to hold many items, but the information inside of it needed to be structured and well presented as it can be seen in the wireframes.
Design
All of the research above led to the final UI design. Design colours were predisposed with the platform’s branding and the fact both students and teachers were 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 on, it also gives them a chance to look through pages whenever and wherever. Teachers also have this functionality because 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.
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.
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.
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.