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
Progressive Web Application, Central Management System
Figma, Airtable
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).
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.
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.
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.
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.
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.
.png)
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.
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.
.png)
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.
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:
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:
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.
To summarize, the following are the features that made it into FLAGexpress.ph:
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.
