Raising awareness about fire safety
Research and design a social good app using ‘mobile-first’ principles
Aug 2023 - Oct 2023
Native app
Researcher & designer
My role
Timeline
Platform
Situation
As cities in Southeast Asia continue to grow, they're constructing more of these compact "mini" apartment buildings. These structures have a tube-like shape and are all about squeezing in as many living spaces as possible. Unfortunately, they often neglect essential features like fire exits and staircases.
On September 12, 2023, a devastating fire broke out in one of these buildings in Hanoi, Vietnam. It was a heart-wrenching tragedy that claimed the lives of 56 people. There were multiple factors at play in this terrible incident, but the lack of proper fire escape plans and the ability to exit the building swiftly were among the critical reasons why so many lives were lost.
🌏
You can design for change
✨
🌏 You can design for change ✨
Initial thoughts
Overcoming the overcrowding issue in cities like Hanoi and elsewhere in Southeast Asia may not have a quick fix. However, a valuable principle of social good design is this: "You can't revolutionize society overnight, but you can design for change." One way to make a difference is by developing effective training and educational programs that teach people how to prevent fires and how to safely escape from them. This approach has the potential to save lives in the long run.
What to create
In UX design for social good, the focus is on creating platforms that address real-life challenges people face every day. These platforms also give people access in multiple ways when needed because the regular way may not work.
Introducing 'PCCC' (in Vietnamese means prevent and stop fire), an interactive platform designed to offer information and facts about fire incidents in complex apartment buildings and homes. This platform ensures that everyone can access basic and important knowledge about fire safety anytime and anywhere, empowering them with life-saving information.
Progressive enhancement approach
According to Insider Intelligence article and data, there are 96.1% of internet users on smartphones in Viet Nam (second highest among Southeast Asia countries). As an economically growing country, the people in Viet Nam would not be able to afford larger screen devices (like desktops, laptops, or tablets). Smartphones are more of an approachable way to access the internet and digital information. Because of this reason, I decided to develop the ‘PCCC’ app from the smallest screen size possible (native app) and progressively move upward to bigger screen sizes (responsive web).
Note: In this case study, I present only the first half of the project which is native app development process.
Design process
Research
Ideation
Wireframes creation
Lofi — User testing and iteration
Mockup development
Going forward
Research
Define goals
Assess community awareness and knowledge regarding fire safety.
Examine current trends of information-seeking behaviors online among individuals.
Identify the trusted platforms where people seek assistance and information about health and safety topics.
Determine if search engines like Google or social media platforms are sufficient for accessing fire safety information.
Figure out how long it takes for individuals to learn and remember fire safety facts
Define target audiences
Who? Students, families, full-time or part-time workers who live in apartment complexes
Where? Residents who live in big cities in Southeast Asian countries
Age? From 16YO to 30YO
Sex? Both male and female
Research questions
Do you know about any fire drills before? Have you ever experienced one at the workplace or at the building you live in?
How would you find more information about fire safety topics?
Would you trust Google search results or videos on social media about fire safety topics?
What would you do if you are in a a fire incident in a building?
Research findings and design decisions
Findings:
After user research in the local area where I am based (Melbourne City), I drew up some useful information:
Fire drills are often held at schools and workplaces (usually once every 3 months).
Participants are quite familiar with the steps of fire exit procedures. Even though it was not complete and precise yet, it would still be enough to save lives.
I also conducted some user research on residents in Viet Nam virtually to obtain more precise information about fire safety and living situations.
The people who live in building apartments are basically aware of fire safety and fire drills.
The worried groups are residents in old-fashioned and under-development buildings.
They are too busy with making a day-by-day living and would not be able to acknowledge the fire safety.
Image of apartment complexes where fire exits are not considered. Windows are covered by ‘tiger cage’ (fences to prevent robbery) which makes it impossible to escape the building in case of fire.
(Image source: Vietnam+)
Design decision:
Based on two rounds of distinct user research—one conducted in a developed country and the other in an economically developing country—it has become evident that fire safety knowledge is essential for everyone, regardless of their background and needs. The PCCC app is designed to serve as a platform not only for those who have access to fire safety education at school or work but also for individuals who lead busy lives and may lack the resources to readily access this critical information.
Users’ pain points
After compiling the results of several rounds of studies from existing catering services and real-time users, there are some main users’ pain points to focus on:
Financial pain point
Low living conditions with no training in fire safety and fire drills.
A free and low-cost solution to provide accessible education for the people would improve this problem.
Process pain point
Some users would give up on the learning process if the platform is too complicated.
Steps and layout should be straightforward for users to access and understand the given facts
Product pain point
Users may require time, money, and paperwork to access the current products offered by private companies or councils.
A platform that is free of cost and available to anyone at any time would significantly enhance the learning process for users.
Support pain point
Lack of information and training for fire safety from building owners and council due to low cost of living.
Educating and promoting the platform for users to use and spreading the word could raise awareness of fire safety training.
Persona 1:
Busy small stall owner who needs help with learning fire safety
Narative:
Phuong Duong
58
Finish secondary school
Living by herself
Small stall owner
Old apartment complex
Enough living funds
“I know I need to run”
Basic smartphone
Want to learn more about fire safety in her own pace to save her life in case of fire
Name
Age
Education
Family
Occupation
Living condition
Financial status
Fire safety facts
Internet platform
Goals
—
—
—
—
—
—
—
—
—
—
Time sensitive due to her work, knowledge about smartphone is low, can’t afford a better living condition
Frustration
—
Phuong is a small stall owner at the market who works 7 days a week. She lives by herself in a small room at an old apartment complex in Ho Chi Minh City. Ms Phuong spends most of her time at the stall so she would like to learn about fire safety in her own free time at home. She requires a basic and straightforward learning experience because she is not too familiar with using smartphones.
Persona 2:
Busy small stall owner who needs help with learning fire safety
Narative:
Tuan Hoang
36
Finish high school
Living with family
Automobile shop worker
Mini apartment building
Enough living funds
“I need to use staircases”
Basic smartphone
Want to learn more about fire safety in an easy way and to do it together with his family
Name
Age
Education
Family
Occupation
Living condition
Financial status
Fire safety facts
Internet platform
Goals
—
—
—
—
—
—
—
—
—
—
Too busy with work and life to attend classes at councils
Frustration
—
Tuan is an automobile shop worker who works 6 days a week. He is living with his family in a mini apartment building on the 6th floor in Ha Noi. He spends most of his time at work and would like to have an easy way to learn fire safety in his free time at night. Tuan also wants to teach his family about fire safety facts.
User journey map
Primary user story - Phuong Duong
“As a small stall owner who lives in a poor ling condition, I want to learn about fire safety to dave my own life in case of fire”
Secondary user story - Tuan Hoang
“As a busy worker who lives in with family of two small children, I want to learn about fire safety to teach my kids and save my family incase of fire”
Problem and vision statements
Problem statement:
It is crucial for everyone to learn fire safety no matter of background and living conditions. It is a need to create a platform to effectively educate and train people.
Vision statement:
‘PCCC’ app will let users of under-development buildings prepare themselves better for fire situations by educating and reminding them about fire safety and fire prevention.
Hypothesis statement:
If the fire safety app is designed and planned effectively, then the residents at under-development building apartments could understand then prepare better for fire accidents and situations.
Primary persona:
A hardworking stall owner has to make ends meet every day who wants to learn about fire safety in an easy and free method to save her own life in case of fire
Secondary persona:
A father of two children who works full-time needs to learn about fire safety in his free time at home. By this means he could save his family and educate his children about fire safety as well.
Ideation
Competitive audit report
Competitive audit goal
Understanding the effectiveness and possibilities of fire safety facts and training through online platforms.
Figuring out how an app can help educate users with fire safety knowledge in a simple and straightforward way.
Key competitors description
Ed App: mobile-first design training app with gamified experience and editable content. This app includes courses like understanding fires, fire prevention techniques, fire safety evacuation plans, and assessment.
PROVEN Reality App: expertly crafted to provide medical students with a simulated diagnosed environment that delivers real-time training. This training can eliminate the need for real patients or mannequins. It lets students access top-notch training anytime and anywhere.
CFA Victoria with fire safety: Providing videos and descriptions of fire plans and prevention for apartment buildings, You can understand about planning for a fire or emergency, responding to a fire and maintaining escape routes, and fire fighting equipment.
How competitors position themselves
Ed App is primarily an educational app for everyone that can be edited to match the needs of a business or an organisation. It offers a free online platform that can be accessed anywhere. Ed App also offers abilities to bring education to anywhere in the world including remote areas.
PROVEN Reality App is a virtual reality educational and training app that can be used on the Meta platform in single-user game mode. It is cost-effective and time-efficient.
CFA Victoria with fire safety wants the users to be prepared and ready for fire and emergency situations to reduce harm and danger while living in Victoria, Australia.
How competitors talk about themselves
Ed App describes itself as a free online training platform. It enables thousands of teams around the world to rapidly upskill each day.
PROVEN Reality App describes itself as a real-time and high-quality training environment with professionalism.
CFA Victoria is a volunteer fire service operating across the state of Victoria, australia. With their skilled team, they reduce occurrences and impacts of fire.
Competitors’ strengths
Accessible on any devices and platforms using web app-oriented design, interactive and gamified experiences, engaging content and information, modern and user-friendly layouts, and remote users accessible
Ed App
VR environment centered design, real-time and high-quality training, downloadable content, offline training at home, cost-effective, personalised learning
PROVEN VR App
Informative and precise information, text and video training included, offering plans and responses toward fire and emergency situations, accessible on any devices, and state-wide support.
VFA
Competitors’ weaknesses
Lacking of professionally created content, limited to a group of users possibly, required internet access, not extensive enough, lack of screen reader capability.
Ed App
Only supporting Meta OS so far, requires payment for more extensive training, accessible only with VR glasses and equipments, offers in limited languages.
PROVEN VR App
Could be too long for young people to read through the provided text, requires internet access, has not been updated since 2021, app designs and contents are often not brand-consistent
VFA
Opportunities to apply for PCCC app
Includes professional opinions and guidance to improve contents
Accessible content across devices for basic training using web app development
Improve brand-consistent content
Implicating some gaming experience to engage users
Create content in both written and interactive forms to enhance accessibility
Provide downloadable content for users with limited internet
Keeping design, layout, and information simple and easy to understand as well as reducing loading time
‘How might we’ questions
Change the process
How might we educate users about fire safety without being there?
How might we keep users from fire without being there 24/7?
How might we call for help (like fire trucks) without making a phone call?
How might we let people know about the fire without a fire alarm?
Remove the bad
How might we teach the literacy residents about fire safety in South East Asia?
How might we keep users using the app until they finish the course using their smartphone?
Go after adjective
How might we keep the learning experience less boring?
How might we keep fire safety facts and fire drills less unfamiliar and serious?
How might we keep fire less dangerous and harmful in tall buildings?
Crazy 8 activity for overall design
8 minutes for 8 ideas for the overall layout of PCCC by answering the questions ‘How might we keep the learning experience less boring?’ and ‘How might we educate users fire safety without being there?’
Wireframes creation
Information architecture for PCCC
The app contains 2 main teaching courses to prepare users for fire situations at home. They focus on planning for prevention and solutions toward fire incidents at home.
Sitemap for PCCC
Paper wireframes
Digital wireframes
Digital frames of PCCC app (from left to right): welcome screen to guide users through the app, log-in screen, homescreen with 2 learning courses, main modules of each learning course, quiz to engage with users.
Lofi- user testing and iteration
Usability study for low fidelity
Research goals
The purpose of this study is to test the user flow and information load of the app. It is also necessary to understand how users react to buttons and menus. With the results of the study, it will be possible to improve the layout and design of PCCC app to enhance experience of users learning fire safety.
Research questions
How long would users be able to complete the tasks and receive the information they need?
How often would users have any difficulties while navigating the app (get stuck)?
Would users understand the meaning and purposes of the app?
Would users complete the tasks to achieve the goal and not feel confused or overwhelmed?
How often users participate in quizzes?
Key Performance Indicators (KPIs)
User error rates: Understand how many users would get the meaning of the task or a button wrong.
Drop-off rates: Understand how often users give up on completing a task to receive information/knowledge.
Conversion rates: Understand success rates of given tasks within the app to receive information
System usability scale (SUS): Understand how many users would use this app to learn about Fire Safety in buildings
Participants
two rounds of testing, 5 males, 7 females, 2 non-binary persons who are between 25YO to 45YO, university students or office workers. 6 of them are from Southeast Asia.
Participants would be or not be familiar with fire safety and fire drills.
Limitation: the test can’t be carried for real users in economically developing countries yet.
Findings round 1
User flow is not good enough for users yet, an insight is: user flow of the product needs to be fixed and improved for better usability.
Two main options in homescreens are difficult for users to use and navigate, an insight is: the design of 2 main options in homcescreens needs to be updated and improved for better user flow.
Sign in/up page is preventing users from moving forward in the app, an insight is: options and explanation of sign-in and sign-up needs to be improved for better user flow.
Direction for user after completing a task is not good enough, an insight is: a congratulation screen or completion message needs to be included after completing a quiz for better user interaction.
Buttons and navigation are not good enough, an insight is: the design and layout of buttons need to be fixed and improved for better user flow throughout the app and create better consistency.
Findings round 2
Most users are not familiar with home screen design, an insight is: homescreen design will be updated and improved.
Navigation and flow to go back to homepage are not easy for users, an insight is: navigation and flow to go back to homepage need to be improved.
Button design and the way of displaying information in homescreen are not clear enough for users, an insight is: button design and the way of displaying information in homescreen needs to be improved for better user flow.
Direction and the way of naming buttons are confusing the users, an insight is: direction and the way of naming buttons will be updated.
The registration form is not clear enough for users yet, an insight is: registration form for user needs be fixed.
Lofi iteration
After 2 rounds of usability testing for the lo-fi prototype, I made some changes according to participants’ feedback and suggestions. I decided to run multiple tests at this phase to save time and effort for later mockup development. It was informative for me to improve the overall design of the app to enhance user experience. My average system usability scale provided by users was increased from 5 to 8.
Sign-up and welcome screen messages have been added to guide users better from the beginning.
A tutorial was added to guide users on how to use the app home screen and layout of home screen redesigned.
Message and status to notify completion of a module added. The app also directs users to the next learning module or back to the main menu so that users can navigate better throughout the app.
Mockup development
Style guide
To choose colour theme and font family for PCCC app, I answer the question ‘How might we keep fire safety facts and fire drills less unfamiliar and serious?’. Using a minimalist and human-centric design font would help reduce the formal look and stiffness of fire safety facts yet keep the information nicely displayed. Colour theme should soothe the eyes of users and also create enough contrast for usability. It acts as colour code to differentiate 2 main learning courses.
Final design
Welcome screen process until home screen with tutorial for users
Course 1: Fire safety and prevention from start to complete message
Course 2: Fire evacuation in case of fire at your building from start to complete message
Going forward
Impacts
After the creation of the mockup design, I ran a usability test with five participants and received positive feedback. There were 4 out of 5 users rated the app 9 out of 10 based on the app’s ease of use and comprehensive colour choices. This initiates the hope of implementing fire safety education for people who live in old apartments in Southeast Asia cost-effectively and remotely.
What I learned
Developing an app for social good helped me notice the importance of accessibility in UX design. For PCCC project, I have input some considerations to assist neglected groups of people who might interact with the app in real life such as the illiteracy group, vision impaired group, elders, and digital illiteracy group. The inputs I have implemented in the app are screen-reader function, WCAG Color Contrast Check, app tutorial, and explanation together with written and visual forms.
Next steps
Create an ecosystem for PCCC app using responsive web design. If possible, create a version of the app on a smartwatch OS.
Apply more accessibility considerations for the app such as multi-language function, kid and adult versions for the app, etc.
Create handoff document for developers.