ABC do SAPO is an interactive web app to help small children to learn the letters and associated words. It had native versions for Android (meanwhile discontinued) and iOS, and the web app was intended for schools.
The team was made of very talented people: Native App UI design by Rodolfo C Diogo, backend and frontend magic by Software Engineer Alexandre Carvalho, original musical theme composed by Sérgio R Cavaco, and art and illustrations by Luis Cavaco. I was responsible for UX/UI Design and UI Development.
Context
Although we had native versions for iOS and Android for the general public, a web version was required to be used at schools that have been equipped with notebooks for kids.
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, so we had to provide solutions for performance.
Background image composition to be made from visual artist’s editable files. Being a fan of Luis Cavaco’s work, the thought of editing his originals gave me butterflies in the stomach.
Inside the “game area” web app and native apps had to work seamlessly.
Process
The first step was to build a simple wireframe to identify the patterns from the native apps, that we needed to replicate “as is” on the web app.
This simple study was based on the native apps wireframes for layout patterns and functionality identification and served as shared understanding for this amazing Engineer/Designer/Artist continuous collaboration.
The notes taken were hand written in the wireframes prints. These were redone in draw.io for clarity and translation.
Next step was to build the wireframe structure in HTML and CSS until the elements positioning was the closest possible to the native apps. This allowed Luis (the artist) and Alexandre (the engineer) to iterate the videos (both artistically and programatically) directly on the cards. It’s a shame I haven’t kept screens from HTML wireframe iterations..
The cards’ background matching with each video background was tricky. The goal was to hide the video borders, merging it in the cards background. Videos had to be light, but as they loose 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 settings 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 combined synamically 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
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, and on iOS. The Android version was already discontinued, therefore we have only the Internet Archive page of Play Store (link may be slow to open).