FloodNavigator

I co-founded and led the design of FloodNavigator, a web app that provides real-time, crowd-sourced flood information to communities in Ghana.

My Role
0-1 design of the entire product, including all pages and other UX frameworks.
I worked alongside the UX researcher who helped facilitate these frameworks and other exercises.
Team
1 Product Designer
1 Product Manager
1 UX Researcher
1 Data Analyst
2 Developers
Tools
Figma, Figjam, Dovetail, Zoom, Slack, Notion
Timeline
5 Months (Jan 2025 - May 2025)
Impact
Qualitative Feedback
After 4 usability tests, users responded positively to the prototypes, confirming the design was intuitive and highlighting a clear need for the product.
02 MVP
The designs were implemented by the development team, validating the UX process and resulting in a functional tool now supporting real-time flood reporting.
(Best viewed on mobile device)
Visit FloodNavigator
Problem

Ghanaians typically rely on social media or word-of-mouth to share flooding information, but these methods are often unreliable and not location-specific.

Without real-time, location-specific flood info, locals often walk long distances to check if roads or gutters are passable. A centralized, map-based app would help communities share and view trusted flood updates to stay safe.

HMW help communities in Ghana, Africa share accurate flood updates during rainy season in order to keep each other safe and informed?
Process
Exploratory Research
We started by interviewing residents of Ghana, Africa

To better understand the problem space, the team conducted several interviews with locals. Through the interviews, we discovered the following.

Findings
Floods can often prevent locals from getting to work or school.
Locals don’t trust or can’t depend on weather forecasts, but they do care about where floods occur.
Locals find notifications, recent updates, and photos would be most useful in a flooding tool.
UX Workshop
We ran a 90 minute, participatory design workshop to better understand how locals share flooding information with each other
Goal
Learn how residents of Accra describe floods, what information they need, and what they value in a flood-related tool.
Participants
3 current UC Berkeley students from Accra, Ghana
Methodology
3 primary activities‍
Critical Incident Sketching
Participatory Design Sketches
Values Sorting Exercise
Critical Incident Sketching
Participants sketched or wrote about a past flooding experience, then shared reflections on feelings, impacts, and key details with each other.
Findings
Flood Severity is subjective, and differs for everyone
Flooding is frequent and disruptive, even with light rain
Participatory Design Sketching
Similar to crazy-8's, participants brainstormed flood-related solutions in quick 1-minute sketches, then shared ideas with the group.
Findings
Trash buildup is a major cause of flooding
Misinformation about waste disposal contributes to the problem
Values Sorting
Participants sketched or wrote about a past flooding experience, then shared reflections on feelings, impacts, and key details with each other.
Top 3 User Values
Accessible
Usable
Simple
Key Design Decision: Collect Observed Conditions Instead of Flood Severity
From the workshop, we discovered that flood severity differs from person-to-person. We wanted to allow users to make their own, informed decision based on observed conditions.
Usability Testing

After iterating on the designs based off the insights from the workshop and cross-functional reviews, the UX Researcher and I conducted four moderated usability tests with locals from Ghana.

These sessions revealed several key areas for improvement in the app’s usability and reporting flow.

1. Users were unsure where their report location was on the map.
Users noted that they successfully reported a flood, they were unable to tell where their report was on the map.

To better communicate this, I added an image of the report to better communicate this.
2. Users may need to submit a report at a later time, when they are safe.
Through testing, users shared that they might need to adjust the observed time of a flood, as they may not be in a safe place to report it immediately.

A secondary button was added to allow them the flexibility to do this.
3. Users want clearer filtering options and extrinsic motivators to encourage them to submit flood reports. 
As a solution, I redesigned the observed criteria to be more clear and added a feature to allow users to filter by these criteria.

A "# of likes" was also added to socialize report submissions and encourage repeated reports
Feature Prioritization
Considering that we only had a few weeks to complete the project, the UX Researcher and I created a matrix to begin prioritizing other features alongside the feedback from the team and usability tests. This allowed us to design any critical or important features before our deadline.
Final Designs
Google Material Design 3
Because 79% of Ghanaians use Android phones, the team decided to incorporate Google's Material design system for our UI components with the goal to make navigation and usability easier for our users to understand. This made it quick & easy to build out the interface once the mid-fi designs were ready.
Image source: https://m3.material.io/blog/material-3-figma-design-kit
Flood Reporting Pages for Quick and Easy Reporting Flow
Creating an efficient way for locals to report a flood by confirming its location and adding a photos and other details to help provide information to others.
Aggregate User Reports to Inform Others About Latest Flood Conditions
Once a report is submitted, other users can either view or add information to the existing report.

Takeaways

The Design Process Can Be Messy at Times

While I aimed to follow a structured design process, real-world constraints like technical feasibility and time limitations often required flexibility. Throughout the project, the team had to make several pivots, and adapt in order to move the project forward. It was important for me to consider the users' needs despite these pivots.

Be Considerate of Cultural Differences When Designing for Different Cultures

While working on this project, I learned that cultural context shapes how users interpret visuals, language, and interactions. I adapted by asking more questions, validating assumptions with locals.

Special Thanks

A Warm Thank You!

A special thanks to the wonderful Ghanaian community at UC Berkeley for being so open to supporting this project and providing valuable first-hand feedback through workshops, surveys, or simply sharing your experiences along the way!
Prev Project
Back To Project Page
Next Project