Flood Navigator | UX Case Study

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 01

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!