Mobile App
Case Study
UX/UI Design
May 2023
Prep Pal
Plan Prepare React
Disaster Preparedness App
Plan Prepare React
Plan Prepare React
Plan Prepare React
Plan Prepare React
Plan, Prepare, and be able to react in an event of a disaster
Plan Prepare React
Plan Prepare React
Plan Prepare React
Plan Prepare React
Plan Prepare React
Project overview
Problem
In the face of increasing natural disasters and unforeseen emergencies, individuals and communities lack a comprehensive and user-friendly solution to effectively prepare for, plan, and respond to such events.
​
Existing disaster preparedness resources are often fragmented, outdated, and difficult to navigate, hindering individuals' ability to make informed decisions and take proactive measures to protect themselves and their communities.
There is a pressing need for a modern and intuitive disaster prep app that consolidates relevant information, provides personalized guidance, and facilitates efficient communication to empower users in their preparedness efforts and enhance overall resilience in times of crisis.​
Problem
Solution
Solution
To address the aforementioned problem, we propose the development of a comprehensive and user-centric disaster prep app, called "PrepConnect." PrepConnect aims to revolutionize the way individuals and communities prepare for and respond to disasters by providing a centralized platform that offers accessible information, personalized guidance, and seamless communication.
Design process
Design process
I applied the Stanford d.School Design Thinking Process, a five-step approach to foster innovation and achieve impactful solutions, throughout the development of my project. By adhering to this process, I successfully devised and implemented a highly effective solution.
1. Empathize
Research Phase
During the research phase my group (3 classmates from my IMD 363 class) and I decided to explore existing apps. The primary objectives of this research were to evaluate the features, functionalities, and user experience of various disaster prep apps and identify an app that closely aligned with our project goals.
​
Through this evaluation process, we were able to shortlist a select few apps that showed promise in meeting our project's objectives. These apps included "Disaster Alert", "FEMA", "Citizen", and "Hurricane: American Red Cross". We installed and tested each app, taking note of their features, functionalities, and overall user experience.
​
After careful evaluation and analysis, the FEMA (Federal Emergency Management Agency) app emerged as the most suitable candidate for our case study because it aligned with our project goals.
Research Phase
Interviews
Design process
Interviews
Following the research phase, our group proceeded with user testing to gain firsthand insights into the usability and effectiveness of the FEMA app for disaster preparation. A total of eight users were recruited for the testing process, representing a diverse range of demographics, including different age groups, geographic locations, and familiarity with technology. The user testing phase aimed to assess the app's user experience, identify potential pain points, and gather valuable feedback for further improvement.
​
Each user testing session was conducted in a controlled environment to maintain consistency and minimize distractions. Participants used their phone and were given a specific set of tasks to perform within the FEMA app. These tasks were carefully designed to evaluate different features and functionalities, including downloading the app, finding an article that teaches them something new, and setting an alert for Honolulu, Hawaii.
​
The team came together after the interviews were conducted and summarized the findings and identified key insights and pain points.
Key insights & Pain points
Key insights & Pain points
Some of the key insights the team found were:
-
Five out of the eight participants wished there was a search bar
-
Four out of the eight participants said they would delete the app
-
One out of eight participants disabled some of the alert preferences
Some of the pain points the team identified were:
-
The absence of a search bar
-
The images looked like ads and weren’t helpful to the users
-
The articles on the app were not helpful and users had trouble accessing them in the first place​
-
The absence of a filtration system or order to the articles
-
Users have to click through article to read the full thing
2. Define
Identified user needs
Identified user needs
Understanding and meeting the needs of the target users is paramount in the development of a successful disaster prep app. Through user research my group came up with 13 user needs and ideated possible solutions. The user need that I decided to focus on is:
"I need to be able to find nearby emergency services, shelters, and disaster relief so that I know who to contact and where to go in the event of a disaster. A solution to my problem should deliver local resources in both list and map views."
Persona
Persona
To better understand the needs and motivations of our target audience, I developed a persona named Jason Hall. Jason represents a typical user who would benefit from a disaster prep app, providing valuable insights into the specific challenges and goals my app aims to address.
3. Ideate
Information Architecture
Information Architecture
The information architecture of a disaster prep app plays a crucial role in ensuring users can easily access and navigate through the wealth of information it provides. In the case of my disaster prep app, I prioritized the following aspects of information architecture: Clear and logical organization, intuitive navigation, and consistent design and visual cues.
User Flow Diagram
User Flow Diagram
The user flow diagram visually illustrates the sequential steps and interactions that a user takes within the disaster prep app, depicting the navigation paths, decision points, and key actions, providing a clear representation of the user journey.
Sketches
The sketches of the screens showcase a visual representation of the app's interface, illustrating the layout, placement of elements, and general design direction. I find this step helpful because I am able to ideate designs with a pen and paper without having to worry about the smaller details.
Sketches
4. Prototype & 5. Testing
Wireframes
Wireframes
During the prototyping phase, I created wireframes to establish the basic structure and layout of the disaster prep app. Wireframes serve as a visual representation of the app's interface, focusing on functionality and content placement rather than visual design. They played a crucial role in refining the user experience and ensuring a user-centric design approach.
​
The wireframes allowed me to outline the key screens and interactions within the app, providing a clear and systematic representation of the user journey. The wireframes went through several iterations based on feedback from fellow classmates and our professor, Vu Chu. I refined the wireframes, incorporating suggestions to improve usability, clarity, and efficiency.
High-fidelity Prototype
High-fidelity Prototype
In the high-fidelity prototyping stage, I focused on creating a visually appealing and realistic representation of the disaster prep app. This stage involved translating the wireframes into high-fidelity prototypes that closely resembled the final product. The wireframes provided a solid foundation for the high-fidelity prototypes. They guided the visual design process, informing the placement of visual elements and other design details. The wireframes acted as a reference point, ensuring that the final design maintained the intended functionality and user flow established during the wireframing stage.
​
During the high-fidelity prototyping stage, we paid close attention to the visual design elements, including color palettes, typography, and iconography. The color green was intentionally chosen for its association with safety and calmness, aligning with the app's goal of providing users with a sense of security during disaster situations. This color choice was implemented consistently throughout the app to reinforce the message of preparedness and safety.
​
Additionally, we focused on creating a visually appealing interface that complemented the app's functionality. We added realistic imagery and refined the placement of elements to create a polished and professional appearance. Transitions and animations were also incorporated to enhance the interactive experience, providing users with fluid and engaging interactions within the app.
​
g
Future Steps
Future Steps
Moving forward, my next steps involve conducting additional rounds of user testing and further refining the high-fidelity prototype based on the feedback received. User testing plays a vital role in ensuring that the app meets the needs and expectations of our target audience.
By observing users interact with the prototype and gathering their insights, I can identify any usability issues, navigation challenges, or areas for improvement. This iterative process allows me to make informed design decisions, fine-tune the user interface, and optimize the overall user experience. I will carefully analyze the user feedback, iterate on the prototype, and make necessary adjustments to enhance usability, clarity, and effectiveness. This iterative cycle of user testing and refinement will continue until I achieve a highly intuitive and user-friendly disaster prep app that fulfills the needs of our users and provides them with a seamless and empowering experience.