A progressive web app supporting humanitarian relief

Driven by Christian values, CBM work with disabled people to break down barriers by delivering practical support, improving policy and practice and inspiring the people of the UK to act. In 2016, CBM provided direct funds and expertise to set up and run 21 life-changing programmes in 16 countries across Africa, Asia and Latin America.

We partnered with CBM to help solve a problem…

When disasters happen, people with disabilities are often among the worst affected and the last to receive help. With a distinct lack of practical advice on disability in disaster scenarios, and with 1 in 7 people living with some form of disability, many people are missing out on live-saving relief services such as food, shelter, and medical support.

The initial objectives outlined:

• Build a humanitarian tool to help save/aid the lives of people with disabilities within natural disaster zones.
• Deliver vital information to rescue workers in disaster zones.
• Create a reliable solution that can function offline in remote areas with no internet connection.
• Generate shareable content that experts on the ground can feedback into and improve.
• Allow worldwide accessibility by making the platform multilingual.

Planning a response

CBM decided the best solution to this problem was to develop a set of guidelines to advise field workers in emergency response scenarios on how to make relief services inclusive.

Our challenge was to design and build these tools, that would allow relief workers easy access to these guidelines within disaster zones, where an internet connection can’t be guaranteed.

The client came to us not knowing whether they wanted an app, a website, or both. Information needed to be available offline so it can be used as a reference guide for aid workers in the field without the need for an internet connection.

We undertook a pro-bono discovery phase to help identify functionality requirements and prototype a solution. The output of the discovery phase was used to help CBM gain funding for the full project.

Building a progressive web app

The decision was taken early on to develop a mobile app that can download content to work reliably offline. We chose to build a progressive web app (PWA) rather than a native app for cost-efficiency reasons and to maximise our team’s familiarity with web tools.

A PWA is built in HTML and JavaScript and uses build tools to convert this to a native iOS and Android app. This means we can build once and power the website, iOS, and Android apps. A far more efficient approach!

Because we knew we needed to support multiple languages in the future we used Drupal 8 CMS to manage the content and we exposed this content to the app via a REST API.

When it really matters… can it/will it be used?

In an emergency response scenario, workers need to immediately access the app regardless of the internet connection. This is how we made sure of that:

Real world testing

Aid Workers tested our app in real-life scenarios. Their feedback was used by our design and development team who revised and improved the app.

The task cards – making it easy to use

The app uses task cards, bite-sized snippets that are easy to understand with practical guidance and diagrams instead of long, drawn out explanations. Task cards are searchable and grouped into easily recognisable topics such as logistics, wash, nutrition, food security, health, and camp coordination and management. Users are able to create a favourite list of task cards that can be downloaded and shared with colleagues.

Accessibility audit

The Humanitarian Hands on Tool should be available to everyone, regardless of circumstances or abilities.

This is why we worked together with CBM’s accessibility advisor to make sure the app met WCAG 2.0 guidelines and that its critical information was available to people in even the most disastrous circumstances.

To empower their in-house team, we also worked together to form their digital accessibility toolkit – documentation helping them promote the implementation of digital accessibility.