How we built an educational platform for teachers.

Read through this in-depth case about the shiny new web app we built for De Watergroep to gain a clear insight in our methods and the course of a project at Spaced.

An educational platform not only has to have strong content. It also needs to attract and capture users with a beautiful and intuitive digital design. Spaced is thinking pro-actively and does more than just technical development and design. They take the initiative to validate ideas with the end-users in a structured and professional manner and this shows in the final result.

Kathleen De Schepper, head of communication at De Watergroep

The challenge

De Watergroep is the biggest water company of Flanders. As a part of increasing their positive societal impact, they want to explain the purification process of tap water to children from the age of 6 to 12 and sensitize its usage.

De Watergroep
Karel De Grote Hogeschool
Educational platform for teachers (Progressive Web App)
Testrunning the tapwater course in a real classroom
Testing and gathering feedback on the platform's content with a live target audience.

The solution

A series of workshops with both pedagogues and professionals resulted in an educational platform that supports teachers to inspire with stories and pass on knowledge about the life cycle and purification process of tap water. Teachers use this platform to pick and choose from a set of plug and play activities they see fit to use in their classroom.

The platform itself is a mobile-first Progressive Web App. We created our own design system and UI kit to be used for future development of additional features or other applications. Under the hood we used Laravel to build up a backend which keeps things running smooth.

The process

Chapter I - Research

Define the problem, conceptualize the solution

When we combined the insights from pedagogues and professionals through applying co-creation and dialogue, the group decided to focus on teachers and abandon the idea of creating a stand alone digital experience for children. A platform for teachers would more likely achieve a higher impact.

By the end of the last workshop the concept definition was a platform that supports teachers before, during and after their class. Teachers would be able pick and choose from various activities they could simply plug in their class to pass on knowledge about the purification process and life cycle of tap water.

A teacher casually said in the starting phase of our first workshop: “Oh but not every school has tablets or computers, neither do kids individually sit in a corner of the class to use a computer.” — It made us strike-through more than half of our proudly found pre-existing ideas.

The process

Chapter II - Prototyping & Design

Validate the concept

The main goal during this phase is to make the concept tangible. We started of by creating a set of click-through wireframes that instantly visualize the concept, giving us the chance to spot looked over mistakes in the concept early on. After validating the basic flow, we started to gradually build up a design system that contains all of the user-interface components such as buttons, colors, cards,... to be used in the platform.

We created a click-through designed prototype by bringing these elements together in the appropriate screens. Feedback on the first prototype guided us to a second prototype in which we introduced a new version of the user-interface components both in design and logic, which we tested again. At the end we had a design system containing all user-interface components ready to be developed.

In my experience there is no such thing as luck

Obi-Wan Kenobi

The process

Chapter III - Development

Provide a proof of concept, improving the concept

The first thing our developers did was translate every single user-interface element from the design system to HTML & CSS and bundle them together in a user-interface kit. Secondly, they constructed a dummy version of the digital platform using the UI kit elements as building blocks. This dummy version did not yet contain any logic or connection to a database. We used this version to run tests on different devices and browsers and asked external people to see if they could understand the purpose and goal of the platform.

Next up was creating the backend and connect it to the dummy version of the platform.

This backend enables admins to manage the activities in the platform and show these activities to the end-users of the platform who can then save and print their custom selection of activities.

This platform meets Progressive Web App (PWA) standards. These require the platform to be reliable (fast loading times), fast (respond quickly to interactions) and engaging (feels natural and immersive).

After doing one final test with potential end-users, we launched the platform on World Water Day, the 22nd March of 2018. Together with our client we will continue looking to how we can improve the content and the platform in a next version.

Do. Or do not. There is no try.

Master Yoda

Feel inspired? Let’s see if we have the answers to your questions.