PCCC

Raising alerts about fire safety

Research and design a social good app using ‘mobile-first’ principles

Timeline

Aug 2023 - Oct 2023

Platform

Native app

My role

Researcher & designer

Project overview

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.

🌏

You can design for change

✨

🌏 You can design for change ✨

Situation

Fire accidents in Southeast Asia

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.

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.

‘Mobile-first’ principles

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.

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

Research findings

I 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+)

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.

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.

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.

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: Phuong Duong

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: Tuan Hoang

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 goals

  • 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 a gamified experience

  • PROVEN Reality App: expertly crafted to provide real-time training

  • CFA Victoria with fire safety: Providing videos and descriptions of fire plans and prevention for apartment buildings

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

  • Create content in both written and interactive forms to enhance accessibility

  • Keeping design, layout, and information simple and easy to understand as well as reducing loading time

Planning

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

Wireframe

Paper wireframes

Lofi user testing & iteration

Usability study 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.

Findings after round 1 testing

  • User flow is not good enough for users yet

  • Two main options in homescreens are difficult for users to use and navigate

  • Sign in/up page is preventing users from moving forward in the app

  • Direction for user after completing a task is not good enough

  • Buttons and navigation are not good enough

Insights after round 2 testing

  • Homescreen design will be updated and improved.

  • Navigation and flow to go back to homepage need to be improved.

  • The button design and the way of displaying information on homescreen need to be improved for better user flow.

  • The direction and the way of naming buttons will be updated.

  • The registration form for users needs to be fixed.

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.

Styleguide

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 codes to differentiate the two main learning courses.

Final design

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.

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.

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.

Full report for this case study

Thank you

Thank you for spending your precious time viewing my case study ‘PCCC’ and understanding more about my work. I also have a longer version of this case study where I include the more detailed process of empathising with users and several usability studies. If you are interested, click button to view more.

Explore more

Yum.

Catering app

Crocotoon

E-commerce site