NDinfo

Designing A Mobile App To Prioritize Safety And Preparation
NDEmergency mobile app mockup on 2 iPhones

summary

NDinfo is an emergency apps for natural disasters. It allows users to learn about certain natural disasters and receive alerts for impending dangerous events.

People often panic when a natural disaster comes up. This application will allow users to learn about such natural disasters beforehand, during, and after the emergency to prepare for important next steps.

view figma wireframe

role

Solo UI/UX Designer, UX Researcher

tasks

UI/UX Design, Competitive Analysis, Mobile App Design, Typography, Wireframing, Information Architecture

tools

Figma, FigJam, Goodnotes

time

October 2024 - November 2024 (2 months)

why was NDinfo created?

As you grow up, you tend to pay more attention to the news around you and your family. More wildfires and hurricanes have become present in recent times and people need to stay prepared for these situations. In case of an emergency, NDinfo wants to help protect users when it comes to times like these.

challenge

When a natural disaster is on its way or about to occur, people often panic without planning what to do next.

goal

Create a mobile application that provides useful information regarding natural disasters. Inform and assist users with any steps they need to take during such an emergency.

solution

Preventing users from the last minute planning, this application will warn users when a natural disaster will possibly occur soon (when possible). Additionally, the software will inform users of the next steps they should take before the disaster occurs.

empathizing with a natural disaster situation

Understanding how users will come across this app calls for a storyboard. Coming up with a possible situation about how someone discovers NDinfo helps us brainstorm features that will be helpful for the users.

A storyboard showing someone's experience with a hurricane

observing our competitors

I decided to choose two other apps with similar goals and analyze their features to help push NDinfo towards the right direction.

FEMA

A personalized disaster resource to help plan, protect, and recover from any natural disaster.

important features:
  • pages are easily accessible from nav bar
  • user can input multiple locations to get alerts from
  • shows DRCs nearby, as well as throughout the states
disadvantages:
  • most buttons lead to an external page instead of within the app
  • not customizable to user's needs

American Red Cross Emergency

All-hazard weather safety app that monitors, alerts, and helps prepare for any scenario.

important features:
  • mimics short-form content (helps when users don't want to read)
  • live maps providing areas that are being impacted by certain weather conditions (hurricanes, rain, snow, wind speed, etc.)
disadvantages:
  • confusing navigation and workflow
  • to-do list and toolkit has an unclear purpose

how will people use this mobile app?

In order to understand how people will come across NDinfo, we have to analyze these competitors to figure out how we can stand out in a group of them.

utilizing a user journey map

Continuing from our storyboard, this user journey map goes into the different reasons that a user may need this app. We are able to take a users pain points and expand these ideas to create opportunities from them.

A journey map of a person's experience during a hurricane and descriptions of how NDinfo's mobile app can better their experience

how we started designing

what does NDinfo's app look like?

Lastly, I designed some mid-fidelity wireframes that highlight the app's main features: the natural disaster information page and a page where users can buy supply kits straight from NDinfo.

reflections

This was a short project and due to time constraints, the app wasn’t finished—though I felt that it would’ve made a strong impact to its users. With this challenge, I was still able to learn a lot about empathizing with users and some steps to do so.

successes

  • empathizing with users through journey maps and storyboards
  • creating new features to stand out from other apps (supply kits based on the natural disaster)

challenges

  • brainstorming scenarios to create storyboards for the first time
  • understanding how workflow charts work

key learning

  • storyboards, user journey maps, and workflow charts (first time making these)
  • downloading competitor apps to analyze their strengths and weaknesses

next steps

  • designing more pages and creating high-fidelity wireframes/prototypes to demonstrate how users can use the app
  • figuring out the target audience and conducting usability testing on potential users

view my other works

works
Café Juliet
Coding A Website From Scratch Using HTML & CSS
UI/UX Design, UX Research, Responsive Design, Competitive Analysis, Information Architecture
view work ⇀
Cafe Juliet responsive website mockup on a laptop and 2 iPhones
Asian American And Pacific Islander Club @ CSI
Boosting College Club’s Instagram Engagement By 25%
Social Media Marketing, Graphic Design, Typography, Layout, Instagram, Canva
view work ⇀
Asian American Pacific Islander Club Instagram Posts and Stories on 3 iPhones