Trickle Up: Leveraging Gamification for Real-World Impact

Harnessing the power of video game technologies to create a transformative app that generates positive social impact and lasting change.

img

Trickle Up

At the heart of everything we do lies an unwavering belief in the transformative power of technology. We don't simply build websites or apps; we envision them as catalysts for growth, enabling individuals to unlock their full potential and overcome limitations.

Our mission extends far beyond the realm of code and pixels. Sometimes, It's about crafting digital experiences that empower individuals with disabilities to interact with their environment in ways previously unimaginable. We strive to create a world where technology acts as a bridge, fostering inclusion and tearing down barriers that stand in the way of an individual's ability to contribute to and thrive in society.

Client

Trickle Up, Las Americas

Deliverables

Character Design / Animations, Audio Production, Multi-platform App, Interactive Content, Custom Web Panel, Process Design

The Challenge

Our story unfolds in a region facing significant literacy challenges. The need for information and educational resources was clear, but traditional text-based approaches posed significant barriers for many individuals. To address these challenges, we embarked on a mission to create a tool that empowered everyone, regardless of their literacy level or disability.

Accessibility and inclusivity became our guiding principles. We understood that achieving this required more than just providing information. Instead, we focused on crafting an engaging and interactive experience, incorporating elements like:

  • Animated characters: Engaging and relatable characters helped bridge the gap for individuals with low literacy levels, providing visual cues and context to complex information.

  • Interactive activities: By incorporating interactive elements like quizzes, games, and simulations, we transformed learning into an active and enjoyable experience.

  • Audio content: High-quality audio narration made the information accessible to individuals with visual impairments and those who preferred auditory learning.

However, our journey was not without its challenges. We started working within these constraints:

App Distribution

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

Content Management

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

Offline Content

The application had to work offline, since Trickle Up 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 sought a solution capable of fulfilling their unique requirements for an entire year. The region's limited technology access and specific tool demands proved daunting, deterring many potential partners. However, we relish a challenge, and this project resonated with our core values. It presented an exciting opportunity to empower Trickle Up's program, enhance their visibility, and equip their team with the tools they needed to excel. We embraced the challenge with enthusiasm, confident in our ability to deliver a solution that exceeded expectations.

The Process

The Eureka Moment: A Story of Innovation and Flexibility

After brainstorming multiple solutions, we stumbled upon a breakthrough: build framework for adaptability. Instead of developing each feature as a standalone entity, we crafted a flexible system capable of dynamic content adjustments at any stage of development. This revolutionary approach assured the app's seamless adaptation to diverse environments.

Enter Prismic. Already familiar with its user-friendly interface, beneficial for our clients, and its developer-friendly API, we recognized its perfect fit for this project. Prismic's flexibility and ease of use empowered us to build an adaptable application, tailor-made for Trickle Up's specific needs.

img

☝ We used Prismic’s Slices system as the base of our framework. 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 addressed the content management aspect, our next challenge was to select a mobile framework that enabled creating a visually stunning app without compromising performance or accessibility for low-end devices.

Flutter emerged as the clear frontrunner, its capabilities and rapid build times making it ideal for our objectives. Google's framework bestowed upon us the power to craft visually captivating and functionally intricate app experiences.

This vision led to the creation of Flusmic, a simple yet powerful package that effortlessly integrates Prismic into any Dart or Flutter project. With this innovative solution, we empowered our team to build high-performance, visually stunning mobile applications with the ease and flexibility of both Flutter and Prismic.

img
img
img
img
Character development

Bringing Characters to Life

Our creative vision manifested in the development of twelve unique characters, each equipped with five standard animations. These expressive elements were seamlessly managed through the Prismic editor, enabling us to define their location and implement updates with ease.

Rive served as the cornerstone of our character creation process, fostering a unified workflow that bridged the gap between development, content creation, and animation teams.

Leveraging Rive's capabilities, we garnered the flexibility to effortlessly integrate any character from our library into any module, previewing the final result with remarkable accuracy. This seamless integration allowed for precise prediction of the final product, eliminating potential discrepancies and ensuring a cohesive user experience. By establishing a custom "Character" type within Prismic, we established a direct connection between each Rive animation file and its corresponding character on screen. This efficient workflow facilitated smooth real-time rendering through Rive's Flutter SDK, bringing our characters to life with captivating dynamism.

img
img
img
img
img
img
img
img
img
Final Thoughts

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 that allowed us to empower the Trickle Up team with rich content editing. 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.

Inspired by this story?

Check out these other human-centered ideas that we've created for amazing people around the world.

E-Commerce Website

Elevating E-Commerce: The Simply Fresh Kitchen

Revitalizing a beloved family business with digital innovation, expanding their reach and sales to new heights.

Learn More

Digital Product

Kiinos: Building an NPS Platform from Inception to Reality

Embarking on a journey from concept to creation, we crafted a revolutionary NPS platform that empowers businesses to measure and enhance customer satisfaction.

Learn More