Flood Navigator | UX Case Study

Overview

Ghana sees 170 days of rain annually. Just 30 minutes of rainfall can flood streets.

As part of our Masters level capstone project, we built FloodNavigator, a tool for residents to report and share flooding information with each other.

The Economic and Social Impacts of Urban Flooding

In economic loss due to flooding, 2013-2023

Experience mobility disruptions in 2021

Saw water enter their home in 2021

My Role

I led the end-to-end design of key features, user flows, and design system, including onboarding and other key pages.

Product Design

UX/UI Design
IA, Wireframing, User Flows
Prototyping, Usability Testing
Design System
Visual Design

Tools

Figma
Figjam
Dovetail
Slack
Notion

Status

Developed

Timeline

5 Months

Team

1 Product Designer
1 Product Manager
1 UX Researcher
1 Data Analyst
2 Developers

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.

View FloodNavigator Web App

Best viewed on mobile

Process

Exploratory Research

A complex ecosystem of stakeholders

Exploratory interviews with 5 ride share drivers and 5 commuters in Accra led us to better understand who is impacted by flooding and how.

Those most directly impacted

Their needs

Are there floods nearby?
Are there floods on my way?
Will there be floods later?
Do I need to change my plans to stay safe?

Their motivations

Safety of self, loved ones, and property
Continuing life safely with and around floods (adaptation)

Feature Prioritization

The UX Researcher and I created an impact/effort matrix to begin prioritizing other features alongside the feedback from the team. This allowed us to design any critical or important features before our deadline.

UX Workshop

To better understand how locals share flooding information with each other, we ran a 90 minute, participatory design workshop

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

Ideation & Iteration

I began designing many different ways to report floods, asking users about water depth, severity, even traffic conditions.

Collect Observed Conditions Instead of Flood Severity

Before

Flood report would ask users about flood severity, but we learned that this is subjective from person-to-person.

After

Ask users about observed conditions so people can make their own, informed decisions.

Informed By

Participatory Design Workshop

The UX researcher and I held a workshop with students from Ghana to learn how residents share flood information. The activities were designed to help everyone collaborate openly and showed us how communities share and support each other during floods.

Users may need to submit a report at a later time, when they are safe.

Before

Before completing the form, users were asked to confirm only the location of the flood.

After

Flood location and time observed were asked to gather a more accurate report.

Informed By

Usability 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.

Increased visibility of system status

Before

Users were unsure where their report location was on the map.

After

Redesigned the visual hierarchy while still allowing users to share the report with others.

Informed By

Usability Testing

Users noted that when 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 location of the report.

Designed extrinsic motivators and added filters

Before

Users were clicking on tags as an attempt to filter by the conditions

After

Using Google Material Design guidelines, I added the ability to filter by observed conditions and added "# of likes" to a users' report

Informed By

Usability Testing

During usability testing, users confused the observed conditions tags for filters. They also noted that they would like more motivation to submit reports.
‍
As a solution, I added a separate section for filters and introduced a “# of likes” feature to make reporting more social and rewarding.

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.

Simple Onboarding Flow

Onboarding was essential for this project as it gave new users context about the value proposition of the product

Reporting a Flood

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.

Viewing Submitted Reports

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.

Challenge your own design assumptions

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.

Takeaways

The Design Process Can Be Messy at Times

Challenge your own design assumptions

Special Thanks

A Warm Thank You!