Return to Portfolio / Next Case Study
Super Typhoon Rai (Odette) was not just a natural disaster; it became the catalyst for the unprecedented human-centric design project, the Tabangay Ta Initiative. In the aftermath of the typhoon that devastated my home in Cebu, Philippines, this initiative emerged as a beacon of hope, connecting devastated communities to essential resources during their darkest hours.
Families were isolated and disconnected from essential services, and communication became a luxury. The situation’s urgency called for a solution that was intuitive, accessible, and reliable. Tabangay Ta, a crowd-sourced directory platform, emerged as a lifeline for victims of Super Typhoon Rai (Bagyong Odette). The objective was simple: to efficiently connect those in need with critical resources during a disaster. In this project, I wore multiple hats: from user research to WebApp database management.
Discipline
Product Design, User Research, Interaction Design, No-Code Development, and Product Thinking
Timeline
Mid-Dec 2021 — Start of Jan 2022 (Two weeks only due to it being a disaster response project)
My Role
On-the-ground Typhoon Victim, Designer (Product & Social Media), Full-Stack Developer (Bubbl.io)
Intended Users
Victims of Supertyphoon Rai in Cebu, Philippines
Tools Used
Figma and Bubbl.io
Notes
*Tabangay Ta’s website is currently not accessible — even through Wayback Machine :(
The Problem
The typhoon’s wrath left an estimated 513,000 families reeling, homes destroyed, and communities fragmented. With internet access limited to an intermittent 3G signal, it became evident that a low-tech platform was necessary to channel aid effectively.
Project Goals and Constraints
As I worked on the feature requests in Bubble.io, I helped myself prioritize tasks and improve other parts of the UI/UX by establishing clear goals, constraints, and user personas.
Goals:
- Connect disaster-stricken communities with essential resources efficiently.
- Ensure an intuitive, accessible, and reliable solution.
- Leverage visual cues, straightforward UI/UX, and familiar-to-the-locals iconography and language for clarity.
Constraints:
- Limited time due to the urgent nature of the disaster response.
- Low-tech infrastructure with limited internet access (3G signal).
- Minimal budget for the project (personal funds of the founder).
- Dynamic and evolving resource availability/needs during the crisis.
User Persona
These “guidelines” accelerated our design and development decisions, ensuring that the Tabangay Ta Initiative catered to the needs of real users.
User Flow
Our barebones platform is designed with simplicity and ease of navigation in mind. We aimed to minimize the number of steps users needed to take to find essential resources.
Tabangay Ta — The Living Web App’s Home Page
Left Column
- Introduction Blurb: A clear description of what the Tabangay Ta Initiative is and its mission.
- Category Selection: Users can select from button groups representing different resource categories. By choosing a category, they can filter the listings in the right column.
Right Column
- Resource Listings: This area displays a list of cards, each representing a specific resource.
- Sorting Options: Users can sort the listings either by proximity (“Nearest”) or by the most recent update (“Last Update”).
- Resource Card Details: Clicking on a card brings up a pop-up with more detailed information about the resource.
Anatomy of the pop-up:
- Maps Integration: To pinpoint the exact location of the resource.
- Social Media Sharing: Allows users to share the resource details with others.
- Distance: Displays how far the user is from the resource.
- Last Updated: Indicates when the information was last refreshed.
- Location: A brief description or address of the resource’s location.
- Photos: Displays images of the resource if available.
- Upvoting / Downvoting: Gives a quantitative consensus on whether the resource still exists.
- Comments: Gives qualitative information about the resource.
Contact Us/Feedback Page (no screenshot)
A dedicated page for users to get in touch with the team behind the Tabangay Ta Initiative, share their experiences, provide updates, or offer suggestions.
Gathering Ground Truth (User Feedback Insights)
To address the needs of affected communities, we established a dedicated Facebook page, which quickly reached 400,000 people and garnered features on local news channels. This platform became the primary communication channel for many. Our interactions on Facebook and Messenger unearthed the challenges residents faced.
Feedback was instantaneous: every update on the WebApp was met with gratitude and urgent suggestions.
Our decision to use Facebook as the primary channel for user engagement proved invaluable. It provided us with a direct line to our users, making feedback instantaneous. Then again, Facebook is the Philippines’ internet. This not only expedited our iterative process but also ensured our platform was consistently aligned with the real-world needs of the affected communities. Here are some of the significant insights we gathered:
- Visual Clarity through Emojis 🛜💻📍: Feedback indicated a preference for visual cues in button groups. Given that images could hamper loading speeds, especially for 3G users, we turned to emojis utilizing UTF. This ensured not only faster loading times but also resonated with our Filipino user base. As the world’s biggest social media users, the Filipino community found emojis familiar and engaging. This decision exemplified our design philosophy for this project: prioritize clarity over creativity, especially in a crisis context.
- Real-Time Updates: A recurring feedback was the need for real-time availability of resources. One poignant example was of users traveling to a water station, only to discover it had run out. This highlighted the importance of ensuring our platform’s data remained current and accurate.
- SMS Sharing Through Clipboard: Recognizing that not everyone had cellular data access, some users requested a “copy to clipboard” feature. This allowed them to easily share resource details with loved ones via SMS, ensuring even those without internet connectivity could receive crucial information.
Making an Impact
Within days, the app transformed into a vital resource hub. We received 1,235 resource updates from contributing victims, demonstrating the app’s crowd-sourced nature. We assisted 6,601 victims and raised an impressive 340,900 pesos.
I also had the honor of co-leading the dev team of 11 and the rebrand, successfully making Tabangay Ta more accessible. In tandem, I spearheaded the creation of social media graphics that played a pivotal role in our impact metrics. Our efforts culminated in donating 34 generators to eight cities across the Philippines and achieving over ~500,000 or about half a million visits. All in the span of two weeks!
Learning Through Adversity
The journey underscored pivotal design lessons:
Usability Over Aesthetics
In crises and a fast-paced world, the design and development teams must work hand-in-hand to emphasize the value a product brings through function.
Embrace New Experiences
Beyond the skills I acquired, the endeavor fostered remote friendships and a profound learning experience for the value of communication. This project affected lives. As such, I was extra cautious with my efforts — overcommunicating with the team even — as I went. Specifically, I learned to work with different time zones.
My contributions
Again, the developer has already released a V1 version of the Web App. So I worked on implementing features while simultaneously doing design because time was of the essence.
1. Social Media Design and Management (Throughout the Project)
Establishing and maintaining a strong social media presence to engage with users and raise awareness about the Tabangay Ta Initiative.
Activities:
- Designing social media graphics, including posts, banners, and infographics, to communicate project updates, impact, and calls to action.
- Regularly posting on social media platforms to provide real-time information and updates.
- Utilizing the power of social media to reach a broader audience and garner support (especially for fundraising).
Tools Used: Figma for Graphic design and Meta Business Suite
2. Additional Features Development
I spearheaded the implementation of features coming from feedback with Bubble.io. Christmas was right around the corner at that point, so I had to work harder to ensure everybody gets their noche buena.
Activities:
- Developing real-time update features based on user feedback.
- Ensuring the platform is accessible, responsive, and user-friendly.
Tools Used: Bubbl.io (end-to-end).
3. UI/UX Design
After the major priorities were done, I revisited the user interface (UI) and user experience (UX) of Tabangay Ta.
Activities:
- Discovering ways to use less cellular data through design since I was not well-versed with the technicalities at the time (spoiler: the use of UTF+8 emojis)
- Designing straightforward UI/UX in parallel to the founder-developer (Stephen) who is improving an already-built barebones prototype.
Tools Used: Figma for collaborative design and prototyping.
Throughout the project, our cross-functional team worked collaboratively to ensure that the design, development, and social media aspects of the Tabangay Ta Initiative aligned seamlessly to address the urgent needs of the disaster-stricken communities and provide a lifeline of support during a critical time.
The Tabangay Ta Initiative reinforced that design isn’t solely about aesthetics or trends. It’s about discerning real-world challenges, empathizing with the human element, and devising solutions with lasting impact. Through adversity, the resilience of communities and the power of design and collaboration provided a guiding light.
Return to Portfolio / Next Case Study
