trickle up echb'eenink

How we used modern technologies to create true and meaningful impact

technologies

deliverables

mobile app, interactive animations

categories

mobile / content development

Project Requirements

In a region with very low levels of literacy, we needed to provide them with a tool that could be used by people with low levels of education, and also by people with disabilities. So they asked us to include as many animated characters, interactive activities, audio content along with the regular text content. We also needed to find solutions to several problems:

Content Management

They needed a CMS, to be able to edit most part of the content from an administrative panel.

App distribution

The application should be distributed privately to people in Guatemala, Mexico, and other regions of Latin America.

Offline Content

The application had to work offline, since their programs focus mainly on regions with a low access to stable internet connections.

Work In Progress

The content and storyboards for each lesson were under production.

Trickle Up looked for a solution that could meet these requirements for a full-year. Given the technology access difficulties of the region and the specific requirements their tool needed, They could not find a company that "dared" to make a proposal for them. It was a challenging project, challenging enough for us, we have always liked challenges, so we went for it. for us it was an opportunity to help their program to grow in a better way, to help them stand out and help their team go a step further.

Choosing a CMS: Prismic

After thinking of various solutions and ways to give them a high-quality tool that would allow them to manage content for their app, THE IDEA came to us. Instead of developing each module specifically. We created a flexible system that would allow us to modify the content of any module in any stage of the development, and with this, the app would be very adaptable to any environment. And here’s where Prismic kicks in. We were already actively using Prismic in smaller projects. Specially for its friendly UI for our customers, and the friendly API for our team.

We used Prismic’s Slices system to be the base of our block system. Since it allowed us to create a modifiable interface, that could grow over time but also gave us enough structure to make it expand in a manageable way.

Prismic also helped us to bring another great feature to the table, now any piece of content could be translated into any language, and for a region with more than 20 native languages it was a critical advantage for the organization.

Choosing a Framework: Flutter

Having covered the content part, we needed a mobile framework that let us create a beautiful mobile app without compromising performance and availability for low-end devices.

Flutter was the obvious choice, thanks to its capabilities and low build times. Google’s framework is a really powerful tool for people who want to build gorgeous apps with complex functionality, and what would make it better? Yes, using it in combination with Prismic.

With that in mind, we decided to convert the work we were doing on combining Flutter and Prismic into a standalone package. That’s how Flusmic was born, as a simple but powerful integration of Prismic for any Dart or Flutter project.

The implementation

We developed a total of 12 characters with 5 standard animations for each one, which were managed (we would define where to add them, we could update them) from the Prismic editor. All of the characters were created using Rive, this platform allowed us to create a cohesive union between the development team, content creation team and the animation team.

It allowed us to use any character available in our library in any module and preview the result, being able to easily predict the final results. We created a ‘Character’ custom type so every Rive character file was connected to a document inside Prismic, and it was rendered in run-time using Rive’s SDK for Flutter.

What we learned

Both Rive and Prismic allowed us to build a system independent of the mobile technologies that we decided to use, but Flutter was the choice. It had good compatibility with both platforms, it was a technology known to our team and gave us the ability to build an application that meets the initial requirements and at the same time helped us direct the project towards new possibilities and ways.

Prismic for us, has become an incredible tool and now defines the team’s primary and first-hand technology choice. Also, it has given us the possibility of creating things that are not only functional and efficient, but have allowed us to explore a new world and achieve one of our goals as a team: to be innovative, creative and above all continue to learn more and more to continue contributing to incredible technologies that have given us great results.