DCTx - RapidPass & TraceCovid apps

DCTx - RapidPass & TraceCovid apps

DESIGN LEAD, STRATEGY, UX/UI DESIGN, ANIMATION, VISUAL DESIGN

DESIGN LEAD, STRATEGY, UX/UI DESIGN, ANIMATION, VISUAL DESIGN

During the Covid-19 pandemic, with no more commuting, I found myself with spare time. Recognizing the severity and persistence of lockdowns, I sought ways t help. I reached out to my network and scoured international news for opportunities and eventually connected with DCTX.

They are a volunteer group, under the Philippine non-profit DevCon, who created free scalable (gov) tech solutions in response to the pandemic. I joined working on it with a small team that we rapidly expanded to around 400 volunteers.

The problem
The health and safety training sector is often seen as stagnant and unexciting, with slow innovation. While many acknowledge the importance of training for life-threatening situations, it often lacks priority. Common complaints include inflexible scheduling, high costs, and limited effectiveness. Yearly mandatory training is uninspiring, repetitive, and doesn't simulate real danger, typically reaching only a select few in organizations.

DCTX logo

The problem
When Covid hit the Philippines, frontliners & emergency personnel were continuously stuck in traffic due to rigorous checkpoint checks, wasting hours each day, and lacking proper information. Manual logging also meant a lot of overhead and poor data that policymakers could use to make data-driven decisions. Given the strict approach of the government and a lacking infrastructure, the lockdown measures weren't expected to ease up for a long time.

The goal
Create the Philippines’ first nationwide digital checkpoint pass & tracing system to speed up frontline workers' availability to help others, provide more accurate information for on-site personnel and provide the government with more data on where hotspots are forming.

My role
Senior lead designer & co-project lead. Guiding, coordinating & collaborating directly with ~60 designers, developers & researchers. Working together with a group of ~400 volunteers overall.

The goal
Create the Philippines’ first nationwide digital checkpoint pass & tracing system to speed up frontline workers' availability to help others, provide more accurate information for on-site personnel and provide the government with more data on where hotspots are forming.

My role
Senior lead designer & co-project lead. Guiding, coordinating & collaborating directly with ~60 designers, developers & researchers. Working together with a group of ~400 volunteers.

The process

  • Agile development, mixed release cycle. The safety & data
    protocol checks at official institutes were the biggest bottleneck.
  • Continuous user testing & training of on-site users, facilitators & regulators. Included journey mapping, (paper) prototyping, usability testing and A/B tests.
  • Agile development, mixed release cycle. The safety & data
    protocol checks at official institutes were the biggest bottleneck.
  • Continuous user testing & training of on-site users, facilitators & regulators.
    Included journey mapping, (paper) prototyping, usability testing and A/B tests.

The outcomes

  • Manila's government adopted Rapidpasses as their main
    way of prioritizing & validating people at security checkpoints.
  • More than 900.000 RapidPasses were distributed, saving anywhere between 1-3 hours per person/vehicle.
  • A total of 4.9M Filipinos reached during pandemic lockdowns.
  • The project gained Microsoft sponsorship to increase development velocity & increase reach of the multiple apps we developed.
  • Afterwards, digital application usage became more accepted, local governments now exploring further use-cases.
  • Manila's government adopted Rapidpasses as their main
    way of prioritizing & validating people at security checkpoints.
  • More than 900.000 RapidPasses were distributed, saving
    anywhere between 1-3 hours per person/vehicle.
  • A total of 4.9M Filipinos reached during pandemic lockdowns.
  • The project gained Microsoft sponsorship to increase development
    velocity & increase reach of the multiple apps we developed.
  • Afterwards, digital application usage became more accepted,
    local governments now exploring further use-cases.
Rapidpass logo

RapidPass

Prior to our project, checkpoint personnel manually processed lengthy documents and logged vehicles using pen and paper. This was time-consuming, resulted in poor data quality, frequent data loss, and minimal insights. We conducted interviews to identify their needs & priorities.

Paper logging sheet

The official way of 'data-gathering' before Rapidpass was introduced

The official way of 'data-gathering' before Rapidpass

As we envisioned a digital solution, we carefully considered factors such as low nighttime visibility, unreliable internet access, limited availability of mobile devices among a sizable population, language diversity, usability and data privacy requirements.

As we envisioned a digital solution, we carefully considered factors such as low nighttime visibility, unreliable internet access, limited availability of mobile devices among a sizable population, language diversity, usability and data privacy requirements.


As we envisioned a digital solution, we carefully considered factors such as low nighttime visibility, unreliable internet access, limited availability of mobile devices among a sizable population, language diversity, usability and data privacy requirements.


Military convoy using phone app

Police & military manually checking documents for each vehicle

Staff manually checking documents for each vehicle

DCTX app figma design files overview

Having a ton of people working on the same thing quickly needs order

Lots of people working on one thing quickly needs order

A matter of time
Time was a significant factor in this project in multiple ways as there were long daily lines at checkpoints, patients' lives at risk, and limited time availability from volunteers.

To speed up development, we used existing frameworks
and Material Design patterns for quick prototyping and
a cohesive UI. We made a brand guide for all new members to streamline our workflow. As the lead, my responsibilities centered on development, maintaining consistency and fostering skill growth through a buddy system that paired junior & senior volunteers.

A matter of time
Time was a significant factor in this project in multiple ways as there were long daily lines at checkpoints, patients' lives at risk, and limited time availability from volunteers.

To speed up development, we used existing frameworks and Material Design patterns for quick prototyping and a cohesive UI. We made a brand guide for all new members to streamline our workflow. As the lead, my responsibilities centered on development, maintaining consistency and fostering skill growth through a buddy system that paired junior & senior volunteers.

A matter of time
Time was a significant factor in this project in multiple ways as there were long daily lines at checkpoints, patients' lives at risk, and limited time availability from volunteers.

To speed up development, we used existing frameworks and Material Design patterns for quick prototyping and a cohesive UI. We made a brand guide for all new members to streamline our workflow. As the lead, my responsibilities centered on development, maintaining consistency and fostering skill growth through a buddy system that paired junior & senior volunteers.

Develop, test, refine, repeat
In true agile fashion, we kept iterating & designing from a very rough state all the way up to a refined product that worked for the users through continuous testing. We were lucky enough that all the personnel at the checkpoint, as well as the frontliners passing them, were open for us testing with them on-site.

This led us to add certain pages for extra info, have a clearer onboarding and improve the overall UI (especially to facilitate all the different screen ratio's given the wide variety of phones that people were using).

Military personel holding up phone with rapidpass PH app
Two mobile phones with apps open
Rapidpass app on phone error code
Phone app scanning entry approved
Rapidpass PH banner on street
Delivery driver phone app
Rapidpass phone app animation

Ship it
Once the app was developed enough to be operational, the government provided the checkpoint staff with dedictated phones and the app pre-installed to minimize the app not working. We hosted multiple sessions where they were trained on how to use the app, what the different feedback messages meant if entry wasn't approved and how to handle situations if things didn't work. Thankfully, this went surprisingly smooth.

Leveraging social media
A lot of Filipinos don’t have direct access to internet. However, many do have Facebook as it’s provided for free in a lot of areas. We used this as our main outlet to launch a marketing campaign with the widest reach, together with live tv presentations, to inform the masses. This created enough traction and pre-registrations to get the local governments interested and involved.

People could register online or via text, get a unique QR code for use in the app or as a printed card to help those without a mobile device or constant internet access.

DCTX social media campaign

Easy to product content to keep production time low

Ambulance and staff illustration
Tracecovid logo

TraceCovid

Next to RapidPass, we also created TraceCovid; a visualization tool for the public & policymakers to understand COVID-19 data effectively. While we did get phase 1 launched, we ran into tricky things like:

  • Data Privacy & Standards: We faced challenges related to data privacy concerns, lack of standardized data sources, and the absence of established protocols for handling health data.
  • Technical Hurdles: It took quite some time to find the right data sources, translating design concepts into functional interfaces, and ensuring that visualizations worked (fast) on mobile devices.
  • Usability Considerations: Designing visualizations that were both informative and user-friendly posed challenges, as the team needed to cater to the needs of both the public and policymakers.
  • Ethical & Legal Risks: We had to address the risks of storing sensitive health data from users and ensure accurate reports.
  • Data Access & Cleaning: Accessing & cleaning data was a major challenge as there was practically no structured & clean data sources, which are crucial for effective data visualization.

Deep dive

For a more in-depth look at the technical side of the data science, how we created the visualisations and dealth wilt the above issues, you can check out my colleague's article.

TraceCovid

Combining tons of data into accurate & useful data viz is tricky business

As seen on

Behind the scenes // process

Behind the scenes // process

As seen on

DCTX team members

Shoutouts
A big thanks to the talented team: Dom, Jess, Dwin, Jo, James, Cassie, John, Vanessa, among everyone else. I was repeatedly thoroughly impressed with how much people can do in a short timespan if you all have a shared goal to do something that helps others.

Despite we were all just volunteering, stuck at home, dealing with different timezones, managing a huge team whilst staying sane outselves during the covid-19 pandemic, we somehow pulled it off.
Really proud of all the people involved in this, salamat! 

Shoutouts
A big thanks to the talented team: Dom, Jess, Dwin, Jo, James, Cassie, John, Vanessa, among everyone else. I was repeatedly thoroughly impressed with how much people can do in a short timespan if you all have a shared goal to do something that helps others.

Despite we were all just volunteering, stuck at home, dealing with different timezones, managing a huge team whilst staying sane outselves during the covid-19 pandemic, we somehow pulled it off. Really proud of all the people involved in this, salamat! 

Shoutouts
A big thanks to the talented team: Dom, Jess, Dwin, Jo, James, Cassie, John, Vanessa, among everyone else. I was repeatedly thoroughly impressed with how much people can do in a short timespan if you all have a shared goal to do something that helps others.

Despite we were all just volunteering, stuck at home, dealing with different timezones, managing a huge team whilst staying sane outselves during the covid-19 pandemic, we somehow pulled it off. Really proud of all the people involved in this, salamat! 

Awesome, you've reached the end!

Wow, you made it down here!

If I can help you with a similar project, let's talk.

Other projects

Branding Zero Emissions WorldGamifying an impactful climate NGO

Saving Lives with Mixed RealityImmersive CPR, firefighting & medical courses

The future of energyHow to create a sustainable energy grid

Molecules to MedicineAn AR journey through innovation

Managing the GridInto the future of rail logistics

Infectious FanaticsStories of intense fans

Daily RendersCadence of Pixels

Daily UIInterface explorations

3D PlaygroundExploring polygons

Tangible LettersFont personalities visualized

Fading BoundariesHumans x Digital

LinkedIn
Medium
Dribbble