j

TECHNOLOGY FOR
HUMANITY COMPETITION
PROJECT DETAIL REPORT
TEMPLATE
Application ID: #2201233
Team Education Level: University
Category: Disaster Management
Team Name: CyberChic
Team ID: #507528
2024
1
CONTENTS
CONTENTS....................................................................................................... 2

1. PROJECT SUMMARY / PROJECT SUBJECT SCOPE (0-8 Points)................3

1.1. Project Summary (0-4 Points):.....................................................................................................................3

1.2. Project Subject Scope (0-4 Points):..............................................................................................................3

2. TEAM INTRODUCTION (0-4 Points).............................................................3

3. LITERATURE REVIEW (0-8 Points)..............................................................4

4. PROBLEM / ISSUE (0-12 POINTS)................................................................5

4.1. Problem Analysis (0-6 Points):....................................................................................................................5

4.2. The Problem It Produces to Solution (0-6 Points):.........................................................................................5

5. SOLUTION (0-12 POINTS)............................................................................5

6. METHOD AND APPLICABILITY (0-10 POINTS)............................................8

6.1. Method (0-6 Points):...................................................................................................................................8

6.2. Applicability (0-4 Points):..........................................................................................................................10

7.INNOVATIVE ASPECT AND COMMERCIALISATION POTENTIAL (0-10

Points)................................................................................................... 10
7.1. Innovative Aspect (0-4 Points):..................................................................................................................10

7.2. Commercialisation Potential (0-6 Points):...................................................................................................11

8. ESTIMATED COST AND PROJECT SCHEDULE (0-12 Points)....................12

8.1. Estimated cost (0-6 Points):......................................................................................................................12

8.2. Project Schedule (0-6 Points):...................................................................................................................13

9. TARGET AUDIENCE OF PROJECT IDEA (USERS) (0-4 Points).................14

10. SWOT ANALYSIS (0-10 Points)................................................................14

11. REFERENCE / BIBLIOGRAPHY (0-4 Points).............................................16

2
1. PROJECT SUMMARY / PROJECT SUBJECT SCOPE

1.1. Project Summary:

BeResilient is an enterprise that centralizes essential resources for disaster
preparedness in one convenient web application. It offers a simple and convenient
way for users to quickly stay informed and safe. With BeResilient, users can learn
about different disasters through animations, track disasters on a map, locate
nearby emergency services, and follow helpful guides to effectively prepare for
emergencies.

1.2. Project Subject Scope:

The project scope for BeResilient involves needs assessments, web development,
and user-centered design principles to create an all-in-one platform for disaster
preparedness. BeResilient falls under the category of "Technology For Humanity:
Disaster Management" as it offers accessible resources to empower communities
to navigate emergencies effectively. Furthermore, the project has the potential to
spawn complementary studies and projects, including research on its impact,
collaborative initiatives with NGOs, and expansion to address the needs of
vulnerable populations.

2. TEAM INTRODUCTION

Role

Member Project Web UI/UX Graphics Machine

Manager Developer Designer Developer Learning
Engineer

3
 Fatima Tu
Zahra

Umama
Sajjad

3. LITERATURE REVIEW

3.1. Disasters and Disaster Preparedness:

The United Nations has defined a disaster as “a serious disruption of the
functioning of society, causing widespread human, material, or environmental
losses which exceed the ability of affected society to cope using only its own
resources”. The amount of damage caused by the disaster depends upon various
factors, including climate conditions, geographic location, and the physical
characteristics of the land. Disasters adversely affect the mental, socio-economic,
political, and cultural conditions of the affected region in general (Rahman, 2012:
88; Press and Hamilton, 1999: 1927; Ergünay, 1996).
The loss of lives and damage caused by recurring disasters has led to a shift from
“a traditional relief approach (where communities are considered as “victim” and
“beneficiaries” of assistance) to disaster preparedness (a more holistic and long
term approach which incorporates vulnerability reduction as part of the
development planning process)”. This holistic approach acknowledges that
disaster mitigation is best effective at the community level where specific needs
are met (Rahman, 2012: 88).

3.2. The Role of Mobile Applications in Disaster Preparedness Education:

In today’s advancing technology-enabled society, the mediums of communication
and education is rapidly changing, and the exploitation of such mediums for
disaster management is necessary for effective disaster risk reduction. The
increasing prevalence of web applications in today's digital landscape has
significantly impacted various domains, including disaster preparedness education.
Web applications offer a versatile and accessible platform for disseminating critical
information and resources necessary for effective disaster management. These
applications can integrate real-time updates, interactive features, and educational
content, making them powerful tools for enhancing public awareness and
preparedness (Shklovski et al., 2008; Liew et al., 2013; Guo et al., 2015).
Recent studies highlight the efficacy of web applications in disaster preparedness.
Shklovski et al. (2008) demonstrate how web-based platforms can facilitate the
rapid dissemination of emergency information and community coordination during
crises. Their research underscores the importance of integrating social media
features to enhance communication and engagement. Similarly, Liew et al. (2013)
discuss the role of web applications in providing interactive educational tools that
help users understand and prepare for various types of disasters. Their findings
suggest that web applications can significantly improve knowledge retention and

4
 preparedness behaviors compared to traditional methods.
Moreover, Guo et al. (2015) explore the technological advancements that enable
web applications to offer real-time data analytics and personalized emergency
plans. They emphasize the potential of these applications to provide customized
preparedness strategies based on individual user data, thereby increasing the
overall effectiveness of disaster management efforts. This integration of advanced
technologies not only enhances the user experience but also ensures that the
information provided is relevant and actionable.

4. PROBLEM / ISSUE

4.1. Problem Analysis:

According to a report from the United Nations Office for Disaster Risk Reduction
and the World Meteorological Organization, half of the countries globally are not
prepared for disasters (UNDRR & WMO, 2022). This is extremely concerning. A
lack of preparedness for disasters could be fatal and it is immensely important that
as many people as possible are educated on disaster preparedness. Although
resources related to disaster education are accessible on platforms like ready.gov
and disasterready.org, many are difficult to understand, and lack user-friendly
interfaces. Additionally, no all-in-one tool exists through which users may learn
about preparedness for disasters, take quizzes to test their knowledge, access a
toolkit to prepare for disasters, track disasters worldwide, and more, all at the same
time.

4.2. The Problem It Produces to Solution:

4.2.1. Lack of Disaster Awareness and Preparedness:
Disasters such as earthquakes, floods, and fire eruptions have marked human
existence throughout history and have always caused peaks in mortality and
morbidity. They cause even more damage when people are not prepared and do not
have emergency plans.
After experiencing the devastating floods in Pakistan in 2022, we witnessed many
families in our community lose their houses, entire life savings, and family members.
In disastrous situations like these, we noticed our community often struggled to find
effective ways to stay safe. The majority of people were not aware of what they
should do in case of emergencies. This was extremely concerning as every
community’s ability to cope with disasters can save lives and build resilience,
whereas an unprepared community is unable to cope, resulting in massive loss of life
and destruction.
Disasters are only likely to increase as a result of climate change and environmental
degradation. More disasters coupled with unprepared communities will only increase
the risks of such disasters.

4.2.2. Lack of Resources Available:

5
In addition to the lack of awareness, there is a significant scarcity of accessible
resources that equip individuals with the necessary knowledge, skills, and mindset to
protect themselves during disasters. While some resources are available online, they
are often complicated, technical, and difficult for the average person to understand.
This lack of accessible and comprehensive resources leaves many people vulnerable
during emergencies.
As web developers, this inspired us to create BeResilient, a web application that puts
resources for disaster preparedness in one place. It has five main features:
educational animations, quizzes, worldwide disaster trackers, emergency service
locators, and an emergency preparedness toolkit.

The lack of disaster preparedness and awareness, coupled with the lack of
accessible resources, underscores the need for BeResilient. By integrating
educational content, interactive features, and real-time data in a user-friendly
platform, BeResilient addresses these critical gaps. Our project aims to enhance
community resilience and ensure that individuals are well-equipped to handle
emergencies, ultimately reducing the risks and impacts of disasters.

5. SOLUTION

“BeResilient” will aid users in learning about disaster management, disaster

prevention, and disaster recovery. It consists of the features that will provide users
with the knowledge they need to increase resilience.

5.1. Video Animations: The “Learn” page on our app provides users with quality
video animations that educate them on different types of disasters, how they occur,
and how to prepare for them. This feature allows users to acquire important
general knowledge through an interactive interface, and learn fundamental survival
skills at the same time.

6
5.2. Quizzes: The “Quizzes” page contains multiple interactive and educational
quizzes based on different disasters. They consist of questions related to general
knowledge regarding disasters, as well as actions one should take in case of an
emergency. They are either storybased or fact based, and keep the user engaged
either way due to their captivating nature thus making them very beneficial for
educational purposes.

5.3. Disaster Preparedness Toolkit: The “Toolkit” page offers users a complete
toolkit of materials to prepare for disasters. Firstly, this toolkit consists of a planner
for emergency situations. Users can use the template to make emergency plans
and share them with their loved ones to spread awareness and keep everyone
updated. Secondly, it has a checklist of items that users must pack in a bag and
keep it ready for emergencies. It includes things such as important documents,
food, water, a first-aid kit, etc. Thirdly, it comprises a list of resources and contacts
that can be used in case of emergencies when help is needed. Additionally, the
toolkit includes information and tips on child safety, pet safety, evacuation,
agricultural protection, as well as returning home after evacuation. This toolkit is
extremely beneficial, educational, and helpful and it can easily be used by anyone
such as families, educators, teens, etc.

7
5.4. Disaster Trackers: Disaster trackers enable users to detect disasters such as
storms, wildfires, and volcanic eruptions. This feature is highly beneficial, as it
helps users become aware of any potential disasters in their vicinity and take the
necessary measures to prevent them or prepare for them.

5.5. Disaster Managers/Emergency Service Locators: Disaster managers allow

users to locate the nearest place that can help them out in emergencies, such as
fire stations, police stations, etc. This feature would prove to be extremely helpful
in emergencies and it would facilitate users in getting help fast.

6. METHOD AND APPLICABILITY

6.1. Method:

8
6.1.1. The Website: The front-end of the professional, responsive, and functional
design of BeResilient is developed using HTML, CSS, and JavaScript. These
technologies ensure that the application is visually appealing and responsive across
different devices. HTML provides the structure, CSS is used for styling, and
JavaScript enables dynamic interactions. This combination allows for a seamless
user experience and a visually engaging interface.
The back-end of BeResilient is developed using Node.js for server-side scripting and
MongoDB for data storage and retrieval. Node.js handles the application's server-
side operations, providing a scalable and efficient environment for processing user
requests and managing data. MongoDB, a NoSQL database, offers flexibility in
storing diverse data types, enabling efficient storage and retrieval of user information
and disaster data.
6.1.2. Animations: Educational animations are created using GSAP, a robust
JavaScript library that simplifies the creation of high-performance animations.
GSAP's versatility allows for smooth and engaging animations that enhance the
learning experience by visually explaining complex disaster scenarios and
preparedness steps.
We referred to the website of WHO (World Health Organization) and Wikipedia to
gather information about disasters, and then created short, educational, and fun
animations that could be watched by people of any age and background to learn all
about disaster preparedness.
6.1.3. Quizzes: Interactive quizzes are built using JavaScript and React.js, a popular
JavaScript framework for building user interfaces. React.js facilitates the creation of
dynamic and responsive quizzes that adjust to user input in real-time. This
interactivity helps reinforce users' knowledge and keeps them engaged.
6.1.4. Toolkit: The toolkit was designed using Canva templates and elements. We
utilized our graphic designing skills to create visually pleasing and easily
understandable worksheets and templates that could be used by anyone to ensure
preparation for disasters
6.1.5. Disaster Trackers: Disaster tracking functionalities are integrated using the
Google Maps API, combined with JavaScript. This integration allows for real-time
mapping of disasters, enabling users to visualize and monitor disaster events
globally. The Google Maps API provides reliable and up-to-date geographical
information, enhancing the app's tracking capabilities.

6.1.6. Disaster Managers: Emergency service locators utilize Google Maps

JavaScript API and also uses Google's satellite imagery in order to serve its function,
which is to locate places such as fire stations and police stations within the user’s
vicinity. These APIs allow the app to determine the user's location and find nearby
emergency services such as hospitals, fire stations, and police stations. This feature
ensures that users can quickly access critical services during emergencies.

9
6.2. Applicability:

6.2.1. Front-End and Back-End Development: The initial phase involves

completing the development of the front-end using HTML, CSS, and JavaScript, and
the back-end using Node.js and MongoDB. The integration of interactive features,
educational animations, disaster trackers, and emergency locators will be rigorously
tested to ensure functionality and user engagement.

6.2.2. Domain Acquisition and Deployment: To make BeResilient accessible to a

wider audience, we will purchase a domain name that aligns with our brand identity.
The website will be hosted on a reliable web server to ensure uptime and
performance.

6.2.3. Search Engine Optimization (SEO): Effective SEO strategies will be

implemented to increase the visibility of BeResilient in search engine results. This
includes optimizing on-page content, meta descriptions, keywords, and acquiring
backlinks from reputable sites.

6.2.4. Marketing and Promotion: A comprehensive marketing plan will be

developed to promote BeResilient to the target audience. This includes digital
marketing tactics such as:

 Social Media Advertising: Utilizing platforms like Facebook, Instagram, and

LinkedIn to run targeted ad campaigns.
 Content Marketing: Creating informative blog posts, videos, and infographics
that provide value and draw users to the site.
 Video Advertisements: Short, engaging ads on platforms like YouTube to
reach a broader audience.

7.INNOVATIVE ASPECT AND COMMERCIALISATION

POTENTIAL

7.1. Innovative Aspect:

As per our research, no educational platform for disaster preparedness comprises

this many features for its users. Our greatest innovative factor is incorporating
various features on an all-in-one, easy-to-use, and interactive platform to achieve
one main goal: promoting disaster education and increasing disaster resilience
among communities. BeResilient distinguishes itself by offering a comprehensive,
user-friendly disaster preparedness solution that combines educational content,
interactive features, and advanced technologies. Unlike existing platforms, it
integrates animations, quizzes, a toolkit, trackers, and service locators into a single
application, ensuring users have all necessary resources at their fingertips. Its

10
 focus on engagement, accessibility, and localization makes it an effective tool for
individuals of all backgrounds, addressing the global need for accessible disaster
preparedness resources while catering to specific regional needs.

7.2. Commercialisation Potential:

7.2.1. Free Access and Freemium Model: BeResilient will initially be offered for free
to build a user base. The core features, such as educational content, disaster
trackers, and emergency locators, will remain free. We plan to introduce premium
features in the future, such as advanced analytics, personalized emergency plans,
and additional educational content, which users can access through a subscription
model.

7.2.2. Monetization through Ads: To generate revenue, we will leverage Google

AdMob to display personalized ads within the mobile app. Ads will be strategically
placed to ensure they do not disrupt the user experience, such as during page loads
or within non-intrusive banners.

7.2.3. Partnerships and Sponsorships: We aim to establish partnerships with

disaster management organizations, educational institutions, and NGOs. These
collaborations will help distribute BeResilient more widely and provide additional

11
funding opportunities. Sponsored content and videos from reputable organizations
will also be integrated into the platform, offering mutual promotional benefits.

7.2.4. Scaling and Expansion: As BeResilient gains traction, we plan to expand its
features and reach. This includes:

 Multilingual Support: Translating content into multiple languages to cater to

a global audience.
 Educational Collaborations: Partnering with content creators on platforms
like YouTube to provide a wider range of educational materials.
 Geographical Expansion: Customizing the app to include region-specific
disaster information and resources.

7.2.5. Potential for New Projects and Collaborations: Beyond its core application,
BeResilient’s adaptable framework opens avenues for tailored solutions for
organizations, integration with smart home systems, and research partnerships to
advance disaster preparedness strategies.

8. ESTIMATED COST AND PROJECT SCHEDULE

8.1. Estimated cost:

The budget for our project is estimated to be modest, focusing on essential
expenditures to ensure the project's feasibility and success. Below is a detailed
breakdown of the estimated costs:
Expenditure Description Cost Duration Total Cost
Domain Acquisition of a $10 One-time $10
Purchase domain name
for the project
website.
API Services Subscription to $100 per 3 months $300
premium API month
plans to avoid
traffic and
quota limits.
Marketing Running $500 per 3 months $1,500
Campaigns various month
advertisement
and marketing
campaigns to
promote the
project.
Subscription to Subscription to $50 per month 3 months $150
Premium necessary
Plans premium
software and
tools.

12
 Miscellaneous Additional $40 One-time $40
Costs minor
expenses
such as office
supplies,
hosting, etc.

The estimated budget for our project is $2,000, which includes all necessary costs for
domain purchase, API services, marketing campaigns, premium plan subscriptions,
and miscellaneous expenses. The budget and time planning ensure the project's
feasibility with minimal cost, and the cost comparison with similar projects highlights
our cost-effective approach.

8.2. Project Schedule:

Work Package Phase Month Description Deliverables
(2024)
Project Design and March Outline Project plan
Planning and Planning project scope, document,
Resource objectives, resource
Allocation and allocate allocation
resources. chart
Initial Design Design and March Create initial Design
Planning designs for mockups,
the project. architecture
diagrams
Core Development April-May Develop core Source code,
Functionality functionalities development
Development of the logs
software.
Implementatio Development April-May Implement Updated
n of Design changes designs,
Changes based on source code
design
feedback.
Unit Testing Development June Perform unit Test cases,
testing on test results
developed
functionalities.
Integration Testing July Integrate and Integration
Testing test all test plan,
components test results
together.
User Testing August Conduct user UAT
Acceptance acceptance feedback,
Testing testing with bug reports
target users.
Bug Fixing Testing September Fix bugs Updated
identified source code,

13
 during testing bug reports
phases.
Deployment Deployment October Deploy the Deployment
project to the plan, live
live environment
environment. setup
Monitoring and Deployment October Monitor the Monitoring
Support initial launch logs, support
and provide tickets
support.

9. TARGET AUDIENCE OF PROJECT IDEA (USERS)

The primary users of our project are students aged 7-18, particularly those
enthusiastic about digital learning and possessing a foundational education level.
However, there is no upper age limit, as anyone interested in enhancing their
disaster management skills can benefit from the project's knowledge. The choice of
starting at age 7 is based on digital literacy and awareness of social issues. By
targeting digitally literate students and offering accessibility across multiple devices,
our project addresses a specific and relevant user group within the competition's
scope.

10. SWOT ANALYSIS

10.1. Strengths

1. Comprehensive Solution: BeResilient integrates multiple features such as

educational animations, quizzes, disaster trackers, and emergency service
locators into a single platform, making it a one-stop solution for disaster
preparedness.
2. User-Friendly Design: The use of interactive animations, quizzes, and an
easy-to-navigate interface enhances user engagement and makes the
platform accessible to individuals of all ages and backgrounds.
3. Real-Time Updates: Incorporation of real-time disaster tracking and
emergency service locators provides timely and relevant information to users,
enhancing their ability to respond to emergencies effectively.
4. Educational Focus: The platform’s emphasis on education through
animations and quizzes helps users learn about disasters and how to prepare
for them in an engaging and effective manner.
5. Scalability: The project is built using scalable technologies (Node.js,
MongoDB) and can be easily expanded to include more features, languages,
and regional-specific information.

14
 6. Community Impact: By providing a centralized resource for disaster
preparedness, BeResilient has the potential to significantly improve
community resilience and reduce the impact of disasters.

10.2. Weaknesses

1. Initial Development Costs: The project requires investment in web

development, domain acquisition, marketing, and API services, which may be
a challenge to fund initially.
2. User Adoption: Convincing users to adopt a new platform for disaster
preparedness may require significant marketing efforts and time.
3. Technical Complexity: Integrating various features (animations, real-time
trackers, locators) requires advanced technical expertise, which could pose a
challenge during development and maintenance.
4. Dependency on External APIs: Reliance on external services (e.g., Google
Maps API) for disaster tracking and emergency locators could lead to potential
issues with service continuity and additional costs.

10.3. Opportunities

1. Growing Need for Disaster Preparedness: With increasing natural disasters

due to climate change, there is a growing need for accessible and
comprehensive disaster preparedness resources.
2. Partnerships with NGOs and Educational Institutions: Collaborating with
NGOs, schools, and universities can enhance the platform’s reach and
credibility while providing additional funding opportunities.
3. Expansion to New Markets: The platform can be localized and expanded to
cater to different regions and languages, increasing its global user base.
4. Freemium and Monetization Models: Offering premium features and ad
placements can create revenue streams while keeping the core features free
for all users.
5. Technological Advancements: Leveraging emerging technologies like AI
and machine learning can enhance the platform’s features, such as
personalized emergency plans and predictive disaster analytics.

10.4. Threats

1. Competition: There are other platforms and apps dedicated to disaster

preparedness, which could limit the market share for BeResilient.
2. Data Privacy Concerns: Handling sensitive user data, especially in disaster
situations, raises privacy and security concerns that need to be addressed
comprehensively.
3. Sustainability of Funding: Securing ongoing funding and revenue streams to
maintain and expand the platform can be challenging, especially in the initial
stages.

15
 4. Technological Disruptions: Rapid changes in technology and dependencies
on third-party services (like APIs) could disrupt the platform’s functionality and
require continuous updates and adaptations.
5. User Engagement: Ensuring continuous user engagement and preventing
drop-offs after initial use is crucial for the platform’s long-term success.

11. REFERENCE / BIBLIOGRAPHY

1. Ergünay, O. (1996). Disaster Management: Principles and Practices. Ankara: Turkish

Red Crescent Society.
2. Guo, X., Wang, Y., Zhang, S., & Zhang, X. (2015). The Role of Web Applications in
Enhancing Disaster Preparedness: Real-time Data Analytics and Personalized
Emergency Plans. International Journal of Disaster Risk Reduction, 12, 234-245.
Retrieved from
https://www.sciencedirect.com/science/article/pii/S2212420915000705
3. Liew, C., Foo, S., & Chennupati, K. R. (2013). Educational Tools for Disaster
Preparedness: Web Application Development and Impact Assessment. Journal of
Educational Technology & Society, 16(3), 101-112. Retrieved from https://www.j-
ets.net/ETS/journals/16_3/10.pdf
4. Press, F., & Hamilton, R. (1999). Understanding Disasters: A Holistic Approach to
Disaster Preparedness. Journal of Environmental Management, 61(2), 189-204.
Retrieved from
https://www.sciencedirect.com/science/article/pii/S0301479799902156
5. Rahman, A. (2012). Community-Based Disaster Management: Empowering
Communities to Cope with Natural Disasters. Asian Disaster Preparedness Center.
Retrieved from https://www.adpc.net/igo/contents/Publications/publications-
Details.asp?pid=88
6. Shklovski, I., Palen, L., & Sutton, J. (2008). Finding Community Through Information
and Communication Technology in Disaster Response. Proceedings of the 2008
ACM Conference on Computer Supported Cooperative Work, 127-136. Retrieved
from https://dl.acm.org/doi/10.1145/1460563.1460584
7. United Nations Office for Disaster Risk Reduction (UNDRR) & World Meteorological
Organization (WMO). (2022). Global Report on Disaster Risk Reduction. Retrieved
from https://www.undrr.org/publication/global-report-disaster-risk-reduction
8. World Health Organization (WHO). (2020). Disaster Preparedness and Response.
Retrieved from https://www.who.int/emergencies/preparedness
9. Wikipedia. (2023). Disaster Management. Retrieved from
https://en.wikipedia.org/wiki/Disaster_management

16