Chevron iconBack to top.
A mock-up of the SafetyNet app.

SafetyNet App Prototype

A disaster prep app prototype that prioritizes inclusivity, accessibility, and community engagement.
Briefcase icon
Context
Class Project
Person in circle icon
My Role
UX Designer, User Researcher
Hourglass icon
Timeline
March-June 2023
Paintbrush icon
Tools Used
Figma, Google Forms

Design Process

SafetyNet's design process.SafetyNet's design process.
A mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile appA mockup of a mobile app

My Impact

Cross circle grid with filled left circle icon
Championed inclusive design, ensuring user-centricity from concept to prototype, promoting accessibility for diverse user personas.
Location with magnifying glass icon
Optimized navigation and information architecture, enabling swift and intuitive access to the app’s essential functions.
2 persons icon
Collaborated seamlessly with an agile team to efficiently deliver a scaleable foundation for future iterations.
understand

Problem Space

Even the highest rated disaster prep apps leave much to be desired. Unintuitive UI, confusing navigation, and convoluted information presentation result in a frustrating user experience, hindering users from adequately preparing for natural disasters.

User Personas

We developed two user personas to understand the problem space from diverse socioeconomic perspectives.

Primary User Persona

A persona avatar of a man with short, dark hair.
Joseph
Part-time custodian
Lives in low-income housing
"I need affordable disaster prep supplies that focus on the essentials, keeping my family safe without stretching my budget."
Motivations
To provide for his family in case of an emergency
To find affordable solutions to disaster preparedness
Challenges
Can’t afford comprehensive prep kits; needs to know what’s essential
Many disaster prep items are out of his budget
Behavior
Spends time on his phone while taking public transportation

Secondary User Persona

A persona avatar of a woman with long, wavy hair.
Martha
CEO of Fortune 500 Company
Lives in a luxury apartment
"I want to make sure my family back home is prepared for emergencies, despite us living on opposite sides of the country."
Motivations
To ensure the preparedness of non-local family members
Values convenience and delegation of preparation tasks
Challenges
Meeting high standards of comfort
Behavior
Delegates preparation tasks to personal assistant
research

User Research

My team conducted eight usability tests of the FEMA app, one of the most widely used for disaster preparedness.
The Federal Emergency Management Agency logo

User Research

The Federal Emergency Management Agency logo
My team conducted eight usability tests of the FEMA app, one of the most widely used for disaster preparedness.

Research Insights

Half of representative research participants deleted the app after the usability test.
Screenshots of the FEMA app with callouts describing user research insights.Screenshots of the FEMA app with callouts describing user research insights.Screenshots of the FEMA app with callouts describing user research insights.
ideation
How might we offer inclusive disaster preparedness solutions tailored to users' financial capacity, ensuring readiness for any emergency?

User Flow

A representative user flow.A representative user flow.

Information Architecture

SafetyNet's information architecture.SafetyNet's information architecture.

Wireframes

Home Page
Wireframes of UI for the home page.
Prep Checklist
Wireframes of UI for the Prep Checklist feature.
Settings
Wireframes of UI for the Setting screen.
user testing

Interactive Prototype

We conducted usability testing for our mid-fidelity interactive prototype, addressing three key topics to validate our design direction.
Pyramid icon
Clarity of visual hierarchy
2x2 square grid icon
Simplicity of UI
iPad and iPhone icon
Overall user experience

User Testing Insights

A mock-up of the SafetyNet app with callouts describing user insights.A mock-up of the SafetyNet app with callouts describing user insights.A mock-up of the SafetyNet app with callouts describing user insights.
implementation

Final Iteration

We addressed pain points identified during prototype testing and implemented the visual principles outlined in the design system for SafetyNet’s final iteration.
View Interactive Prototype
reflection

What's Next?

If I were to work on V2 of SafetyNet, there are a few key features I would prioritize.
Location icon
It’s unclear that list items are filtered based on the user’s location. Providing explanations for their inclusion could promote user confidence.
Bulleted list icon
List items should serve as suggestions only.  Users should have the ability to customize their lists.
Message icon
SafetyNet could be more social. Allowing users to add friends and react to their goal completion could encourage a stronger community mentality.
Other case studies
A mockup of the Hourglass app on an iPad
Hourglass Productivity Timer
Product Design, 3D Modeling
An arrow pointing right icon
A mock-up of the Green Slate website.
Green Slate Redesign
UX Research, Iterative Testing
An arrow pointing right icon
Made with
in Seattle
© 2024 Addison Pann