COLAB23 PORTFOLIO

Lifeline

Gamifying disaster safety. Starting with tornadoes, we make preparedness interactive, educational, and fun.

Developer:
AnnPortfolio
Developer:
Brad McEwen
Developer:
VictorPortfolio
Developer:
-
Portfolio
Mentor:
Keyuri

Product Experience

Problem Space

Natural disasters such as tornadoes, hurricanes, earthquakes, floods, and wildfires are increasingly frequent and devastating events that affect millions of people worldwide. Despite the increasing risks, a significant proportion of the population remains unprepared and unaware of how to properly respond to these catastrophes. The gap in preparedness can result in loss of life, severe injuries, and massive property damage, accentuating the need for comprehensive, accessible, and effective disaster preparedness solutions.

Problem Background  

Research from polls conducted by the American Red Cross show that around 60% of Americans are wholly unprepared for a disaster of any kind, but with the effects of climate change, the likelihood of an extreme weather event is only growing. 75% of the world's tornadoes happen in the United States, underscoring the need for Americans to understand and prepare for the likelihood of experiencing this natural disaster.

Our primary customers are individuals and families living in natural disaster-prone regions. The problem we’re addressing is the lack of preparedness and awareness regarding natural disasters. Due to time constraints, we are focussing solely on tornado safety and preparedness.

Research Insights

To validate the need for our product and gain a deeper understanding of the problem space we conducted four user interviews with participants who have lived or currently live in tornado-prone regions.

Interview Takeaways:

  • 75% of participants were unprepared for and surprised by varying effects after a tornado had passed through, like the widespread effects of power outages and loss of communication.
  • 3 of 4 participants acknowledged they learned how to respond in the event of a tornado from lived experiences and practicing tornado safety drills at school.
  • Half of participants interviewed don’t currently have an effective action plan despite knowing they should because they don’t think a tornado will affect them.

User Pain Points

Through insights gathered from our interviews we narrowed down two pain points to address with our MVP.

  1. Unawareness of Disaster Affects: The effects of tornadoes can go far beyond knocking down buildings. Damages from high winds can cause loss of power to communities for days or weeks - limiting their access to purchase items with credit cards, getting gas from the gas pump or refrigerating and cooking their food. Through our interviews we discovered that 75 % of our participants were surprised and unprepared for different effects of tornadoes or post-tornado environments. While they may have known what to do during a tornado they weren’t as prepared for what happened afterward. Providing users with an immersive experience can equip them with more knowledge of the external effects of tornado damage to be more prepared for future scenarios.
  2. Ineffectiveness of current tools: Current tools and methods often do not provide hands-on, experiential learning, making it hard for the information to be retained. Information provided from public service announcements and flyers can be easily forgotten because people are removed from the reality of the situation. While school drills may be effective for that specific situation, the information is less relevant for a tornado situation one may face in their home. 75% of our participants acknowledged that they learned about tornado safety through real-world experience. People are more likely to remember and act upon what they learned if they can engage with the information in a more interactive and immersive manner. The "ineffectiveness" also speaks to the outdated nature of some of these tools and methods, which may not have kept pace with modern learning styles or technological advancements. 

Solution Explanation

To help better prepare individuals living in disaster-prone areas we created an immersive storytelling game experience to educate users on best preparedness and safety practices during natural disasters. We focussed on three main features for our MVP:

  1. Tornado Safety Game: Providing people with an online immersive educational experience creates a safe space to learn and make mistakes about how to react in a natural disaster. By placing users in the experience they can more closely relate to how they should respond and retain more safety and preparedness knowledge.
  1. Account Creation: Users have the option to create an account in order to save their progress throughout this game version and others. They also use this account to place their name on the leaderboard.
  1. Leaderboard: To add fun and incentive to continue playing, users can boost points to climb up the standings. They can get friends involved and compete to see who is a natural disaster safety aficionado. 

Lo-Fi Mockups

Hi-Fi Mockups

Homepage
Question Response


Leaderboard

Design Learnings

Placing our product in the hands of users provided valuable feedback on ways we can continue to build upon our MVP. All of the existing features we tested had great feedback with a 100% completion rate. There weren’t many updates we could make to our existing MVP within the time constraints, but there were some suggestions on how to add to our product to make it more engaging down the line.

Positive Feedback:

  • “I really love the graphics and illustrations. The high contrast made it really easy to see and find buttons.”
  • “I learned to stay away from windows during a tornado and to get under something sturdy for protection if one is near.”
  • “It’s an entertaining way to learn about safety in tornadoes and a good way to put yourself in a situation and learn interactively, rather than just reading an article from the local news.”

Pain Points and Suggestions:

  • 2 users would like to see why other choices are wrong after selecting the right choice.
  • 2 users wanted a progress bar to see how far they were through the game.
  • 1 user suggested it would be helpful to also have a storyline for what a family should do in this situation, rather than just one person.

Implementation Details 

Technical implementation

Where is it hosted?

  • Frontend: Netlify
  • Backend: Render

What is your tech stack?

  • Frontend: React, TypeScript, Scss
  • Backend: Node, Express, MongoDB

High level journey of a request

User Interaction: The user navigates to the home page, selects a specific game and proceeds to play the game. Users can choose to log in to keep track of their progress.

Request Processing:

For logged in users

  • The system receives a request to start playing the game.
  • It verifies the user's session for authentication and authorization.
  • It retrieves the user's latest progress on the database.

For non-logged-in users

  • The system receives a request to start playing the game.
  • It retrieves the initial prompt from the database.

Business Logic:

  • The system navigates users through the selected game.
  • It updates the user's scores depending on the right or wrong answer.
  • User's progress gets updated as they play the game.
  • Logged-in users have access to a leaderboard which displays the top 10 users.    

Data Access:

  • The system queries the prompt database to retrieve prompts based on a user's interaction.
  • The prompt database gets updated as users navigate through the game.
  • Scores also get updated depending on whether or not the right answer gets selected.    

External Integrations:

  • The system integrates socket.io to enable bidirectional interaction between the server and client.
  • With socket.io, events get emitted depending on a user's action.
  • To get a prompt - getPrompt event gets emitted
  • To get the next prompt - getNextPrompt event gets emitted    

Error Handling:

  • The system handles errors efficiently and displays appropriate error messages to users should something go wrong

Logging and Monitoring:

  • The system logs the requests and error messages for auditing and monitoring

Technical challenges

What was the hardest part of development?

The most challenging aspect of the development process revolved around optimising interactivity and ensuring a seamless user experience during gameplay. We encountered several hurdles in this area. For instance, we faced delayed latency between request and response lifecycles, which affected the real-time feel of the game. Additionally, fine-tuning the game's performance to run smoothly on a wide range of devices presented a significant challenge. This required us to identify and address performance bottlenecks. 

Through extensive testing, user feedback, and iterative improvements, we were able to make substantial progress in reducing latency and enhancing performance. While we've made significant strides, ongoing development efforts continue to address and improve solutions to these challenges

Does your app have any scaling issues?

The application efficiently handles the current workload. However, as we consider adding more games, adjustments will be needed in the existing codebase. These adjustments would be aimed at optimising performance and ensuring the seamless addition of new games. Additionally, we might need to evaluate and potentially alter the current database schema to accommodate the requirements of the expanded game library.

What are some key takeaways?

  • User-Centric Approach: Throughout the development process, we prioritise the user experience and continuously gather feedback to drive iterative improvements.
  • Ongoing Development: Our commitment to addressing challenges and improving the application remains a core aspect of our development strategy.
  • Scalability Assessment: The application has demonstrated good scalability in handling the current workload, but we are mindful of potential challenges as we plan to add more games.
  • Codebase Adjustments: To support the seamless addition of new games, adjustments in the existing codebase will be necessary. These adjustments are primarily focused on optimizing performance and improving code clarity.
  • Database Schema Evaluation: We may need to evaluate and potentially alter the current database schema to accommodate the requirements of the expanded game library.

Future Steps

From speaking with users we gained valuable insight about what features they would like to see us develop into the game. For future iterations we would consider adding the following features:

  1. Progress Bar - During testing, 2 users expressed they wanted to know how much progress they’ve made through the game so far. 
  1. Hover Explanation - 2 users indicated after selecting the correct answer they wanted to know why the others were wrong, if they were between two choices. We’re excited to develop this feature to further enhance the learning value of our product.
  1. Additional Storylines - 1 user suggested a storyline for what a family should do in a disaster situation may differ from what 1 person does and it would be helpful to navigate both scenarios.

Learnings

Product Manager Learnings:

Saint

  • I have learned that fostering open and effective communication within our team is critical. This aligns with both the designers’ and developers’ insights, emphasizing the need for clear dialogue to ensure everyone is on the same page.
  • Recognizing the constraints and technical feasibility early on, as the designer indicated, is vital in setting realistic expectations and in the decision-making process for feature prioritization.
  • How to bridge the gap between various team functions, ensuring that there is a continuous and iterative feedback loop that contributes to a cohesive and well-executed project lifecycle.

Designer Learnings:

Sarah Payne

  • I grew my communication skills working within a cross-functional, agile team.
  • Collaborating with developers on technical constraints and feasibility is crucial for building a successful product.
  • Creating a responsive website goes beyond designing for two screen sizes. Working with developers is essential to fine-tuning the customer experience through different devices.
  • Prioritising design features and adjusting project scope is key to launching an MVP within a tight deadline. 

Developer Learnings:

Ann

  • Writing reusable code really saves time
  • Communication is very important when working in a diverse team
  • I improved my time management skills.

Developers Learnings:

Victor

&

  • I've learned that effective communication is paramount during the development of a product. 
  • It's essential to maintain awareness of team progress and to adapt when things don't go as planned. 
  • Being open to alternative solutions and knowing when to seek help ensures a smooth and productive development process.

Full Team Learning

As a cross-functional, agile team, we've embraced the importance of effective communication. It allows us to work seamlessly, understand technical constraints, and prioritize design features while adjusting the project scope when necessary.

We've collectively realized the significance of time management and adaptability in building a product within a specified time frame.

Monetization plan 

1. Premium Access Subscription: Imagine an app that doesn't just fade into the background after one use, but grows with you, informs you, and keeps you ahead of the curve. Our Premium Access Subscription isn’t just a service; it's a lifelong educational partnership. For the user dedicated to disaster preparedness, this is an indispensable resource. Continuous updates, advanced levels, and exclusive content keep our subscribers engaged, informed, and ready. It's not just an app; it's a commitment to safety and knowledge.

2. Special Levels or Disaster Scenarios: Now picture a gaming experience that not only challenges but enlightens. Special levels designed to simulate rare and different natural disasters are not just a game, they're an immersive educational experience. With our limited-time offerings and special editions, users can test their mettle against the whims of nature, transforming every rare scenario into a unique, high-stakes puzzle. This is more than a game; it’s a virtual trial by fire.

3. Disaster Preparedness Kits: But what about when the screen goes dark? Our branded disaster preparedness kits are there. Merchandised at the pinnacle of user engagement—right after they've conquered a level—these kits aren't mere products; they're lifelines. In the comfort of your home or the chaos of an emergency, our kits stand as a testament to the preparedness our app instills. This isn't just merchandise; it's peace of mind in a box.

5. Educational Licenses for Schools and Organizations: Education is evolving, and so are we. With our educational licenses, schools and organizations gain a tool that transforms the abstract into the tangible. This is more than an app; it's a curriculum for survival. With bulk licensing, we offer a resource that's scalable, impactful, and urgent. We're selling more than licenses; we're forging a new standard in safety education..

6. Insurance Company Partnerships: Finally, let's talk about value. Real-world, hard-hitting value. Insurance partnerships are a game-changer. They bridge the gap between virtual preparation and real-world application. Completing levels earns users not just points, but actual discounts on insurance. We're not just incentivizing gameplay; we're rewarding foresight. This isn't just a feature; it's a revolution in risk management.