Educational Web App for kids

ABC do SAPO is an interactive web app to help small kids to learn the letters and associated words. It has native versions for Android and iOS, and the web app was intended for schools.

Context

Although there was a native version for iOS and Android, a web version was required to be used at schools that have been equipped with notebooks for kids .

The team was made of very talented people: UX/UI design by Rodolfo C Diogo (@oratokbebeuorum), backend magic by Software Engineer Alexandre Carvalho (@alexandreacarvalho), original musical theme composed by SĂ©rgio R Cavaco (@srcavaco), and illustrations developed by Luis Cavaco (@cavacoluis). I was responsible for the UI Development and UI Design of surrounding web elements.

Challenges

The preliminary studies indicated that the greater technical challenges would be synchronizing animations and sound, and get the original videos to merge with the background.

The target audience used very basic notebooks, therefore with a basic graphics card.

Background image to be made from visual artist's editables .Being a fan of Luis Cavaco's work , the thought of editing his originals gave me butterflies in the stomach.

Process

First I worked on received wireframes for layout patterns identification. The notes taken were hand written in the wireframes prints. These were redone in draw.io for clarity and translation.

wireframe for ABC do SAPO

First I built the HTML structure and CSS styles until all positioning looked the closest possible to the native app. this allowed Luis e Alexandre to work and test the videos directly on the cards.

The cards' background matching with each video background it was tricky. The goal was to hide the video borders, merging it in the cards background. Videos had to be light, mas as they lose quality, background color degrades. Degraded colours tend to be made of different coloured pixels making impossible to match with a pure hexadecimal background color. After a dozen iterations testing different setting on exporting the videos, we could finally match the backgrounds and move on.

Then I edited the artwork to produce the background assets for screens 1 and 2. As the web app is responsive but still has to look as close as possible with the native app, I combined overlapping background images to achieve the same composition.

The final part was the desktop background around the app, which I implemented using several images to allow responsiveness. To better integrate everything together, I made the web app screen transparent, so the whole desktop background would be the same in the web app's screen, making it match.

Final product

ABC do SAPO screen ABC do SAPO screen ABC do SAPO screen

It was a huge success and an amazing experience to actually see the kids playing. For example, everyone liked the oranges but a couple were afraid of the square :-)

You may try ABC do SAPO on the web , on iOS  or Android .