SafetyNet
Promoting Community Resilience Across Socioeconomic Strata through User-Centered Design
An App Prototype Case Study
On This Page
Problem
Existing disaster preparedness apps inadequately support users with low socioeconomic status in preparing for the worst with confidence.
Project Goals
To create a user-centric app prototype that allows those from all walks of life to be prepared, no matter the circumstances.
To help those in need gain access to vital disaster preparedness essentials at no cost via a Community Exchange.
My Role
Product Designer
UX Researcher
Research
User Research and Competitor Analysis
My team and I began the design process by observing potential users’ interactions with five highly-rated disaster preparedness apps, FEMA being the primary focus. They spent 10 to 15 minutes getting familiar with the app and completing a series of tasks, like finding an article or updating notification preferences.
Areas observed included user dislikes, successful or enjoyable aspects of their interaction, and instances where they encountered obstacles.
Feedback indicated concerns with some apps’ website-like structure, excessive preference customization, and irrelevant article suggestions based on user location.
Unintuitive, website-like layout, overwhelming preference options, and irrelevant article suggestions in the FEMA app
Ideation
Mapping a User Flow
With user needs identified and a design direction to guide us, we created a user flow to map user interactions with the disaster prep app. One of the key focuses was to ensure easy access to the Community Exchange feature, which was achieved by incorporating multiple entry points.
A user flow demonstrating an interaction with SafetyNet
Information Architecture
Next, we designed the app's information architecture. Our main goal was to create an intuitive navigation experience that would fulfill the user's need for decluttering and simplifying the UI, which had been identified during the user research process.
SafetyNet’s information architecture
Prototyping
Wireframes
We then proceeded to prototyping, starting with a comprehensive set of wireframes designed to intuitively present information and reduce cognitive load through effective visual hierarchy.
Homepage Explorations
To-Do List Explorations
Mid-Fidelity Prototype
Next, we developed a mid-fidelity interactive prototype in Figma based on insights from another round of user testing, which emphasized expected ease of use, intuitive UI design, and logical hierarchy,
Kits, To Do, and Settings mockups in the mid-fidelity interactive prototype
User Testing
Refinement
Through user testing of the interactive prototype, we obtained actionable insights and identified notable pain points, which included:
Differentiating between multiple users' Kits proved challenging.
Several user testers were unaware they could swipe the home screen to access additional content.
Users highlighted the necessity for larger, more thumb-friendly buttons and toggles.
There was insufficient spacing between visual elements throughout the app.
The Final Iteration
Finishing Touches
Finally, I incorporated solutions to address the pain points identified in the last round of user testing and added a touch of visual flare for a more realistic experience.
Interactive Prototype
Feel free to explore the interactive SafetyNet prototype below, or access it via the Figma project. Enjoy!
Reflection
Challenges and Insights
SafetyNet’s life cycle made clear a few major insights that I’ll carry with me throughout my product design career. Standout takeaways include prioritizing user needs over trendy visual elements, continuously incorporating user feedback to support an iterative design process, and highlighting the importance of providing intuitive navigation to reduce cognitive load.
The Future of this Design
Future success metrics for SafetyNet include continuous monitoring of user feedback, the resolution of pain points and bottlenecks, and improving user confidence through goal specification and completion.