Designing Agos eBayanihan — a collaborative crisis platform in the Philippines

I worked with Rappler for 2–3 months (April 2017) to design a collaborative platform that combines top-down government action with bottom-up civic engagement. Agos helps communities mitigate risks and deal with climate change and natural hazards.

This is an in-depth UX case study describing my design process. Along the way, I’ll explain the UX tools I used, my reasoning and thoughts behind the decisions I made, and some challenges I faced. I’ll divide this case study into three parts: Introduction, Design Process, and Outcome. I’ll also provide a summary at the end of the article.

Introduction

Client: Rappler

Roles I assumed during the process:

• User Researcher
• UX Designer
• Visual Designer

People involved:

• Product owner
• Chief Technology Officer and 2 Lead Developers
• Head of Research & Content Strategy
• Head of Multimedia & Video Production
• Move Project Manager
• CEO & Executive Editor
• 45~ Active volunteers

Onboarding

I flew to Manila and met with the team involved in building and maintaining Agos. On my first day, I spent time with the product owner to understand the product and its inception, the project scope, use cases, timeline, and resources available.

The usual reaction of Filipinos after having warned about an incoming storm

Most casualties are caused by unpreparedness. The lack of awareness and validated reports resulted to underestimation of crisis.

My Design Process

After talking to the product owner, I realized that the project is more challenging than it actually is. The pain points were obvious but no one seems to agree on what problem(s) we needed to tackle. Biases are inevitable.

⚠️ Challenge: Defining the problem and setting expectations

To overcome this, I facilitated a design sprint where I gathered the stakeholders. They were involved in defining the problem, mapping the user map, sharing pain points, creating solutions, and voting on concepts.

Design Sprint

With persistence and a little bit of luck, I was able to block 2 hours of their time and formed a sprint team. Because of time constraint, I only chose methods from the sprint book that are effective in setting goals and forming unified decisions. I structured our design sprint to accommodate their busy schedule.

Sprint question, HMW note and vote, Solution sketch, Art museum

The design sprint was a success. Everyone agreed that:

• The vision is to become a one-stop platform during crisis.
• The primary user is the volunteer.
• The target moment is report validation.

⚠️ Limitation: I am not allowed to share more information pertaining to the synthesized result of the sprint.

User Interviews

I met with the key people involved in rescue and relief operations to better empathize with their struggles. At this point, I noted bottlenecks commonly experienced by volunteers.

• “There are a lot of irrelevant reports coming into the system due to misuse of the twitter hashtag #RescuePH.”
• “It takes time to validate or invalidate reports one by one.”
• “There is no way to assign and track the status of reports.”

💡 All of these bottlenecks were also mentioned in the design sprint.

The mission statement is to help volunteers validate reports and respond to them efficiently.

This can be achieved by focusing on 3 goals:

1. Provide a quick way to view and validate reports.
2. Prioritize actionable reports over information reports.
3. Help leads assign rescue missions and track progress.

Content Audit and Survey

Before jumping right into sketching ideas, I have to make sure that my design decisions are guided by data.

• Content audit: I listed all pieces of information and categorized them.
• Survey: I ran an online survey to 56 participants to evaluate user demographics and prioritize information based on importance and relevance.

Some questions in the survey

Here are the findings:

1. 91.2% access Agos in desktop when validating reports.
2. 92.9% have loved ones who are far away. Which means updates on loved ones’ locations and of the user’s are both valuable.
3. 87.5% are willing to volunteer during a crisis.

Information relevant to each phase

A crisis has 4 phases namely Peace, Alert, Crisis, and Recover. Not all information are arranged the same way– the importance and relevance vary from one phase to another.

⚠️ A competitive analysis is ideal to compare information hierarchy and user flows. Considering culture and environmental factors, I narrowed down my search to PH websites and found nothing similar. Furthermore, crisis management platforms are either too specific or already partners with Agos like BangonPH, eBayanihan, and NOAH.

Persona

To better empathize with my users and to guide my decisions in this process, I created and validated 2 proto-personas that represent the majority of the volunteers.

Wireframing

I translated the information categories to reusable components, mapped out the user flow, and kept iterating until it felt cogent and logical. I kept in mind the notes I took from the interviews and made sure the flow follows the actual scenario during a crisis.

Moodboard

I arranged images, colors, and type to reflect Agos’ style and feel.

Medium-High Fidelity Mockups

Next, I moved to Sketch where it’s easier to move things around.

Initial mockups

⚠️ Design limitation: Use of components for easier tech implementation and article embedding.

The primary pages are the dashboard, reports, specific report, report submission, profile, activity log, settings, and FAQ.

I won’t discuss profile, activity log, settings and FAQ anymore since they are pretty straightforward.

Dashboard

The dashboard starts with an Add a Report button followed by a carousel of relevant news, inspired by the news ticker. This keeps volunteers on the loop.

The map is designed to scan social media for appeals for help or rescue, appeals for relief aid, and situation reports nationwide. It allows the public to send similar appeals via SMS for free. The software behind Agos automatically analyses and plots the data in a single mobile-friendly map that is accessible to all. — Rappler

Illustration I made to label types of crisis

The alert map indicates areas that are experiencing a crisis. In this example, flood pins are highly concentrated in Aurora city due to many reports of users affected by Typhoon Lando

Counters are used to bundle duplicates in specific areas.

💡I used a unique and bright color (orange) for rescue pin to make it stand out in the map.

The left column’s purpose is to give users an overview of all reports. They can see a count of unassigned rescue reports, a breakdown of statuses, then finally a list of trending reports.

One of the top 5 most voted HMWs in the design sprint is to integrate data localization to show personalized reports. We considered 2 user types:

Ordinary volunteer: They care the most about the city they are in and the nearest people they can help, thus the default view is within a 20km radius.

National agencies, LGUs, media partners: They care most about seeing critical areas nationwide, thus the default view is the entire map of the Philippines.

💡Tailoring not only the information but also the default settings to each user type plays a big role in making a better UX.

Now let’s focus on the two most important pages that helped achieve our three goals:

Reports page

Reports

Goal 1: Design a quick way to view and validate reports.

Clicking a report from the list opens a card preview showing only the information necessary for assessment. Quick actions are readily available to validate or invalidate the selected report.

Goal 2: Prioritise actionable reports over information reports.

The use of colored status labels helps users to skim through the list. Every 15 minutes, unmarked rescue reports reappear at the top to reinforce action.

A/B Testing

💡 Usually, the primary button is highlighted to influence the user’s action. In this sense, however, that is not applicable. After running an A/B test, we found out that 3 out of 5 participants are confused how to invalidate a report in design A. Meanwhile, design B clearly shows a choice between true or false by applying same button styles and putting both in the same row.

We also found out that the left sidebar layout performs better (Design A). 4 out of 5 participants said that they find it more seamless that the cause-effect is from left to right.

Specific Report

Goal 3: Help leads assign and track the progress of rescue reports.

Leads can assign reports to a national agency, a local government unit, a private sector, or a civil society group. Strict ownership means a report can only be assigned to one volunteer unit at a time. In addition, activity logging is effective to hold accountability (who validated the report?), track changes (who’s currently assigned to this?), and inform leads (are they safe or do they need backup?).

The Outcome

A/B Testing

I asked five colleagues in the company and available Movers (Agos volunteers) to participate in the A/B test. This is to find out which layout performs better than the other, in terms of cognitive load and interaction. The findings were mentioned above.

Prototyping

I stitched together the pages into a clickable prototype using Invision for user testing and feedback gathering. Next, I shared the link to 10~ active volunteers and ran remote testing. This helped me validate design decisions and further refine them in preparation for the stakeholder’s review.

⚠️ We conducted remote testing instead of the standard user testing because the volunteers are from far-away provinces and were particularly busy that week. If I had more time, I would go for the standard user testing which is more reliable.

Stakeholder’s review

The first phase of the redesign ended with a stakeholder’s review. Here, the CEO of Rappler joined the meeting where I presented a deck summarising the entire process from the onboarding to the design solutions.

🎉 I received everyone’s approval with minor feedback.

Iteration, Dev Hand-off, and Launching

I went back to Cebu City where I continued working on the final changes and prepared the assets for the hand-off. Rappler’s team worked on the development for three months. The first phase of the redesign: Volunteer’s platform, was launched during the summit.

🎉 The product owner updated me that she received much positive feedback from attendees with little to zero negative feedback.

⚠️ There was no feedback survey after the launching so I can not provide you with specific numerical data.

Summary

My Design Process

Key takeaways:

💡The relevance of information can differ from one phase to another.

💡Tailoring not only the information but also the default settings to each user type plays a big role in making a better UX.

💡Do not rely based on assumptions and past experiences. Do qualitative and quantitative research. You’ll be surprised that what worked on your past and similar projects don’t work with your current one.

💡Users have expectations on how your product interacts with them that you must take into consideration. Listen to them.

Most casualties are caused by unpreparedness. The lack of awareness and validated reports resulted to underestimation of the crisis.

With this design solution, I hope that Filipinos can be more educated on how to prepare, respond, and overcome crisis.

What I would’ve improved

Looking back a year after

• In the dashboard, I would’ve questioned the relevance of each component especially the Facebook likes counter. How is it contributing to making decisions?
• In the data table, I would’ve taken advantage of colors to emphasize crucial data. For example, high-risk mission reports should be indicated in red. Putting it at the top every n minutes is not enough.
• In the report view, I would’ve have added helpful labels to indicate the limitations of their access.
• Overall if given more time and budget, I would’ve done more rounds of usability tests to catch loopholes and fix them.

What will happen next to Agos?

The goal after the launch was to hand it over to a government department that will lead in managing and maintaining the platform.

Thanks for reading. How about a clap or two? 👏