Mary Francine Delos Reyes

UI/UX designer with a background in Computer Science and Engineering.

about me

︎    ︎    ︎   

Mary Francine Delos Reyes

UI/UX designer with a background in Computer Science and Engineering.

︎    ︎    ︎  


Human-Centered Research Design Course

UX design, UI design, Research

Figma, paper

Jan 2023 - May 2023

Designing a mobile app platform from scratch that increases the resilience of Merced to flooding.

View Prototype ︎︎︎


Merced, a city in the heart of California, is recently devastated by historical floods and in urgent need of interventions to increase its resilience to natural disasters. We aim to develop a specific solution that enhances Merced's flood resilience within a timeframe of three years. By applying engineering and design principles and skills, the solution will minimize financial costs to individuals affected by floods.


We began our research by making some assumptions. We believed that a spatial sensor connected to a mobile application, which could provide users with information about upcoming weather conditions and warn residents about water levels in certain areas, would be a good starting point to learn more about flooding. However, we discovered that developing such a sensor would take longer than our intended timeframe, so we decided that designing an application would be more feasible.

To gain deeper insights into the recent flooding and its impact on people, we conducted additional research. We analyzed news articles, explored engineering solutions, and conducted interviews with Merced residents to understand their experiences, concerns, and the specific needs related to flood resilience. Being a local in Merced and personally affected by the flooding, it was challenging to navigate within the city without knowing the proper procedures for dealing with natural disasters, particularly flooding.

What specific vulnerabilities make a city less resilient to flooding?

To address this issue, we conducted interviews with three Merced residents. Although their responses varied, a few common themes emerged, providing us with a foundational understanding:

Key Findings

Many people are unaware about procedures and protocols related to flood preparedness and response.

Lack of knowledge on how to help community including local businesses.

Need for better urban planning and infrastructure design to minimize impact.

These insights emphasize the importance of effective communication, proactive preparedness actions, and thoughtful city design in improving flood resilience and minimizing potential damage caused by flooding. They also led to adjustments in our team's initial ideas for the application, incorporating both participants' input and our own concepts into the prototype.

To cater to the needs of our users, we created user personas for the application, including residents, learners, and donors who seek an all-in-one solution for flood preparation and aftercare. Our research indicated that previous flood-related applications were either outdated or users simply relied on their device's default weather app.

Looking ahead, we chose to empathize with Merced residents, aiming to raise awareness and motivate them to utilize our application. Our ultimate goal is to foster resilience within the community and successfully accomplish our objectives.

Defining the Problem

Our persona, David, represents a Merced resident who faces difficulties in preparing for, during, and after floods due to insufficient communication from the city. He experiences confusion regarding logistics and struggles to find comprehensive information about natural disasters, particularly flooding. David requires an all-in-one application that provides accurate representation and detailed information on flood-related matters. However, he hasn't come across a single web-app site that fulfills his needs in this regard.

Solution Ideation

Our team suggests creating a cost-effective mobile application called Floodcast, designed and developed within a shorter timeframe. This free-to-use app will offer essential flood preparation resources to users. By incorporating Apple API maps and other features, Floodcast will help users assess flood risks and track water levels.

To determine the most effective features for my users, I created a unique value proposition that directly addressed the needs and frustrations of my persona:

Use a live map to show different warning levels

See different resources including news

View the water levels in a certain street

Checklist to prepare, during, and after a flood

Assist in donating to flood victims

We have identified a list of essential features to begin the development process.

How should we plan and organize our design?

I created a simple version that accounted for user choices and outlined a clear path to follow. This helped me structure the app's content effectively.

I brainstormed and sketched some ideas in Figjam.

By starting with loose sketches, I could explore concepts that I might not have otherwise considered.

We can assist David in accessing a wide range of resources for Merced preparations, including news and accurate, up-to-date information.

We will collaborate with Merced Sun Star newspaper to source news content and updated storm information.

I sketched rough solutions that addressed persona needs from various perspectives.

Sketches into wireframes for all the essential screens using Figma.

The main user flow involves viewing specific streets on our live map to check for flooding. I created a wireframe for the basic version, considering user choices and establishing a clear path. This helped in structuring the content within the app more effectively.

Transferring all sketches into polished wireframes of all the main screens in Figma. 

I recognized that collaborating with the newspaper could be achieved by simply using their own website link.

I split the sections into storm preparation, during a flood, and aftercare. I considered whether to present them as checklists or informative content for the users.

This served as a strong foundation to build upon. I developed a minimal basic prototype and incorporated a donation process to ensure secure and authentic payments.

Branding and UI

I began the visual design phase by gathering references, conducting research, and seeking inspiration for the brand's overall look and feel. It was crucial for me to capture the essence of Merced, aiming for a visually appealing yet professional and clean quality that exudes a sense of warmth and familiarity.

Our logo draws inspiration from an aquarium being showered with rain clouds, symbolizing a flood, and incorporates a bell to represent notifications and alerts.

Credits: Image by upklyak on Freepik, Photo by Thula Na on Unsplash, Photo by Rahul Viswanath on Unsplash, Photo by Nazrin Babashova on Unsplash, Photo by Merced Community Outreach, Created on 99designs by Luz Viera Studio

As I explored various ideas and color combinations, I developed a preference for a monochromatic palette of greys and white, with a subtle pop of color. Integrating Apple's Human Interface Guidelines for familiarity and usability was important to me. I also used feather icons for minimal and clean feel. These elements came together to form my style tile.

Usability Testing

Initially, I conducted testing on a light mode version, which I submitted as our final presentation for the course. During the Innovate to Grow event, while presenting our project, I received valuable feedback. However, the challenges I faced due to lack of time during the event I wasn’t able to obtain interviews or any statistics to showcase as an accurate factor. I did however received feedback after each demo. The feedback ranged from suggestions to include a dark mode version, additional pages or features, ensuring consistency in page design, and overall usefulness of the application for Merced residents. This feedback guided my exploration and testing of color palettes, type pairings, and layouts.

The Prototype

In the final version of the high-fidelity design, I made some adjustments and added more pages to enhance the user experience and flow of the application. The donation page was redesigned with a scrollable layout to ensure consistency and reduce unexpected behaviors.

In the full primary flow, users can view alerts in specific areas of Merced, access resources including checklists for flood preparation, and contribute to the Merced community through donations.

In Conclusion

My key takeaway from this project is the importance of gathering feedback to identify any missing features and adjust the designs based on user demand. I also realized the value of conducting testing in earlier stages to guide future plans and ensure a seamless design process. Although there is always room for improvement, I consider the app ready for development. By encouraging residents to provide feedback using the prototype, I can conduct further research and enhance the app based on their reviews.

Through empathizing with more users, I gained a deeper understanding of the community's challenges and the desire of locals to offer support. However, sharing high-quality video content remains a significant hurdle, especially considering the cost of acquiring valuable lessons and skills.

Developing this application inspired me to envision greater accessibility for my city and surrounding areas. A fully functional app could promote resilience and raise awareness about natural disasters, particularly flooding, in Merced.

Ultimately, no product is ever truly finished...So, who's ready to join me in developing this?

*I do not own copyright to photography or illustrations. All the credit goes to the original creator. Please reach out to if you have any questions.