What we've done

Helping to fight drought in Brazil

We've helped AP1MC* in their mission to bring water to thousands of families in the Brazilian semi-arid region. Through field research and strong integration between the design and development teams, we've built a responsive web app with offline support and automatic data sync. The result was a streamlined and faster enrollment process. After all, those who need water cannot wait.

Company
Associação para Um Milhão de Cisternas (AP1MC), a non-governmental organization which brings water to people in dry regions of Brazil.
Challenge
Build a cross-platform Progressive Web Application (PWA) to make the enrolling process simpler, faster and more robust.
Contributions
  • Branding
  • Field & User research
  • Product strategy & design
  • Back & front-end development
  • Deployment & operations
Tools
An interface example An interface example An interface example
AP1MC Form Interface
Challenges

Arid challenges

Associação para Um Milhão de Cisternas (“Association for 1 Million Cisterns”—AP1MC) helps people who live in the Brazilian semi-arid region, an area in a constant state of drought, where the rainy season usually lasts only a few weeks per year. This help comes in the form of building cisterns to collect and store the rainwater, which can be used later for drinking, farming, and daily activities. One of the NGO's greatest challenges is to enroll eligible families. It's a daunting task, both due to the extensive area coverage, that can span more than 1 million km² (~250 million acres), as well as to the difficulty of access to those places.

The enrollment process is done by technicians from affiliated organizations on-site, in sessions that would usually take multiple hours, and involved filling out extensive paper forms while talking with family members, checking documents, inspecting the land and taking measurements. Then the answers would then be taken back to the office and typed into the AP1MC on-line system in a manual, slow and error-prone procedure. Frequently, they found that a required field was blank or that some information was incorrectly filled. In this case, the interviewer had to go back to the family property, in a trip that could take hours or even a whole day since some places are distant and difficult to reach.

Project goals

  • More efficient enrollment without paper forms

    The solution should eliminate the manual data transference from paper to digital, both mitigating human error and saving the staff time so they can focus on reaching more families.

  • Fewer unnecessary travels

    Automated form validation should reduce expenses with additional visits for adding missing information or fixing incorrect fields.

  • Reduction of training effort

    An easy-to-use interface with contextual instructions should reduce the training needed for the affiliated personnel.

  • Broad device compatibility

    The software should be lightweight and work on many platforms since the affiliated network has many types of devices with varied capabilities.

  • Flexibility for different organizations

    The affiliated organizations are independent and have different internal processes and administrative structures; the solution should accommodate these multiple realities.

Execution

From analog to digital

Immersion and field research

To help us understand these problems, we went to field—developers and designers—to closely witness the hardships of enrolling families. We were able to observe the limitations faced by interviewers, as well as how and in which conditions forms were filled—oftentimes standing under the scorching sun and jumping back and forth on form questions following where the conversation would go first. On top of that, we were able to shape the information hierarchy and the system requirements from a newfound unified understanding of the context.

Designer-developer collaboration

Right from the start, we understood the need to develop a cross-platform app based on open-source web technologies. We designed a fully responsive UI that were effective both on-the-go and at the office—this way the NGO could use any device, especially in the low-end bracket, under a unified codebase, improving system maintainability and evolution.

Designers and developers worked together to create a great user experience without compromising technical requirements.

In the new system, the form had to be filled out only once, avoiding rework. The form filling itself was greatly improved: we split it into collapsable sections, facilitating navigation; we added progress indicators to each section, highlighting missing fields; we rearranged some questions to follow a natural conversation; we used algorithms which allowed us to offline-validate some more crucial or error-prone fields.

Interface colors and contrast were tested under sunlight, maintaining legibility even in extreme lighting conditions; some inputs were optimized for touch-based interactions (such as multiple choice answers) and others were added.

Image of the original subscription form (on paper), followed by a low fidelity prototype and finished with a UI design proposal.

Technical challenges

This project was all about facing adversity, and it couldn't be different technology-wise. Making a mobile app with online and offline usage was a required feature because of the precarious network coverage in distant semi-arid regions. In order to address that requirement we decided to develop a new Progressive Web Application (PWA).

To keep data synced without loss or conflict (and also ensuring that the system is always up-to-date in all devices) we created an extra, low-bandwidth step which backs up unsynced data on the fly as much as possible. When a network connection is available, the full form can be synced to the main server.

The synchronization step integrates data from the mobile app and from an existing web app. To address this scenario we've created a new API to be the gateway between both applications. This way we had more control over the data and minimized the changes needed to their legacy back-end infrastructure.

Of course, the project demanded constant exchange with the web application's development team. Creating the documentation of the API prior to development offered both teams a guide to what to develop, allowing us to parallelize the work and deliver with greater quality by minimizing integration issues among the three applications.

Results

An (almost) adversity-proof application

The final result was AP1MC Fichas—a complex albeit easily usable system, which works in any device or platform, simplifies processes and facilitates the enrollment of thousands of families in need of permanent, sustainable access to water and to life.

Despite the project's success and the heroism of the NGO, the cuts in government funding during the 2017/2018 Brazilian political and economic crisis ended up shortening the life of the project. Ironically, we hope for clearer skies ahead.