FLAGexpress.ph (DCTx)

How might we design a convenient reporting and transparency solution so donors can report their past donations, keep track of the donations, and make sure the donations are being properly distributed amidst the city’s lockdown rules?

March - June 2020

Project Nature

Progressive Web Application, Central Management System

Tools & Methods

Figma, Airtable

Summary

FLAGexpress.ph is a system that allows individuals and organizations to donate or report past donations for our front-liners via the Office of Civil Defense (OCD).

Overview


As the COVID-19 virus  took the world by surprise, a group of volunteers came together and worked remotely to create digital solutions caused by the problems brought upon the COVID-19 pandemic. This group is DCTx, or the DEVCON Community of Technology Experts.

One of the digital solutions created by DCTx is FLAGexpress.ph.

FLAGexpress.ph or Frontliner Logistics Assistance Gateway Express is a website that provides a donation scheduling and transparency reporting system for the Philippines' Office of Civil Defense for COVID-19 related donations.

Starting the Project


While the country was scrambling for solutions, several challenges had to be taken into account: lockdowns, disabled means of transportation, a high volume of donations, the pressing need for medical supplies, and so on.

At first, our solution was to simply create a scheduling and logistics solution platform to support the free transportation service the Armed Forces of the Philippines (AFP) wanted to provide for COVID-19-related donations. However, when President Duterte announced Administrative Order No. 27 which mandated to centralize all donations to the Government via the Office of Civil Defense (OCD), DCTx started to work closely with the Office of Civil Defense (OCD) to help account for proper allocation and governance of the donations.


On the donor-end, FLAGexpress.ph was originally envisioned to be a free donation delivery service. Given that, existing delivery services such as Grab Delivery and Lalamove were observed and used for inspiration for the flow and design. Specifically, the parts where a user inputs their address, add items they want transported, and input the address of the end-destination of the items.

In this scenario, we wanted donors to use FLAGexpress.ph to input their address, state the items they were donating, add the address of the hospital they wanted to send the donations to, and schedule a date and time for when the AFP should arrive to pick-up and deliver the donation.

A brief explainer on what we wanted to happen
Some of my sketches just as I started to work on the project in early April 2020

As a starting point to explain what we envisioned FLAGexpress.ph would be on the digital side, I put together a prototype to present the the donor-flow as well as the admin user flow.

However as the project evolved, the scheduling solution and delivery aspect of FLAGexpress.ph was dropped as stakeholders wanted to pivot into a transparency reporting for donations, as their logistics were already being done separately. As I go through the project, I will discuss how the project transformed throughout the time it was worked on.

E-volunteerism During a Pandemic

Several back-and-forth meetings were conducted between DCTx and OCD and only select members of the DCTx team would go to Camp Aguinaldo to discuss the project. 

Face to face meeting with OCD

Whatever was discussed in these meetings would be relayed to other members of the DCTx team via video call. Of course, most of the interaction and collaboration for this project happened online to protect volunteers from contracting the virus themselves.

One of the video calls the team had for FLAG

Volunteers had a set daily stand-up call on weekdays at 9PM in the evening. This time was selected as many volunteers still had to work their day job in the morning. Slack and Viber was used to update and contact other volunteers and Google Meet or Zoom for our stand-ups or team huddles. Other productivity and collaborative tools such as Notion, Trello, Gitlab, Heroku, and Figma significantly helped the volunteers move in the remote set-up.

Creating FLAG

Since the first iteration of the project was focused on creating a service similar to Grab and Lalamove, the design was focused on solidifying the flow of the product. As such, a basic design for the donor Progressive Web App (PWA) and the OCD’s Central Management System (CMS) was created (and presented in the video above). Rapid prototypes were created with the goal to quickly gather feedback from OCD and iterate from there.

And so because the project was moving at a fast pace, the team decided to use Airtable as the MVP of the product. The donor flow initially created was made into an Airtable form so the OCD could manage the data collected using the same service. This method was used to test and simulate the experience of the service. 

Illustrating how FLAGexpress.ph would work



The simulation FLAGexpress.ph was conducted at Camp Aguinaldo. The simulation was meant to test (1) the reporting of donations, (2) the processing of OCD, and (3) the delivery of the donations care of The National Disaster Risk Reduction & Management Council (NDRRMC), who would have been in charge of delivering donations to institutions instead of the AFP as directed by OCD.

Testing Airtable as an MVP of FLAGexpress.ph

While one team was coordinating with the OCD to test and optimize the service, the rest of the team was dedicated to improving the design and development of the product.

The design team focused on making a PWA design best fit for mobile use and a CMS dashboard to monitor everything. We came up with the following designs:


PWA

Screens featuring improved designs by Kai


At this point, the designs were improved thanks to another fellow volunteer, Kai Laiz. She also created a prototype of the new experience available below:

CMS

Mockups of the CMS Dashboard with improved designs by Kai

At this point, after several back-and-forth meetings with OCD, the delivery aspect of the product was removed and the product and we focused on the transparency of reporting of donations aspect. This was because several donations were going through the system and it was much important to OCD to track and report everything.

Some donations that went through OCD


To summarize, the following are the features that made it into FLAGexpress.ph:


  1. Offer a donation - this allows donors to notify OCD about a direct donation delivery and schedule it for OCD  head office. 


  1. Report previous donations - this allows donors to provide details about past donations  for reporting to the Office of Civil Defense


  1. View transparency reports - this allows donors to view the latest reports published by the office of civil defense. The reports are provided by OCD Admin and exported from OCD’s SCM. FLAGexpress.ph accesses the report as a JSON file access or CSV format for visualization. 


  1. Flagexpress.ph admin - this  allows OCD to download the audit logs of all submissions under FLAGexpress.ph as a reference to all data submitted 


  • Integration to OCD SCM - this allows flagexpress.ph to send all submitted details securely sent to OCD’s SCM via a comma separated value or CSV file for central reporting. DCTX has no direct access to OCD’s SCM. 

While FLAGexpress.ph team was able to achieve many things, the project was unable to launch due to several factors. One example was the lack of resources available given the voluntary nature of the project. Nevertheless, it was still amazing to see FLAGexpress.ph reaching as far as it could given the circumstances.

Us volunteers expressed that being part of DCTx was a good way for us to cope during these difficult times and even fulfilling to help the best way we knew we could during a pandemic. The list of FLAGexpress.ph team members are available at the DCTx website.

Let's collaborate!

Thanks! I got your message :)
Oops! Something went wrong while submitting the form.