COLAB14 - Web App

Beacon

Beacon is a web app designed to help people plan for the long-term care of their estate. Beacon can help you navigate all the questions you didn’t know to ask around the sensitive topics of your end-of-life care and passing

Problem Background  

In the year 2022, there have been over 2 million deaths in the United States. 

However, when analyzed, only about 30% of Americans had completed any pre-planning before the end of their life, leaving their family members and those around them to take care of their afterlife affairs. (source: https://www.prb.org/usdata/indicator/deaths/table)

This means around 70% of Americans were left behind with the monumental endeavor of organizing logistical, personal, financial, and other tasks to fully handle the affairs of someone who’s passed. 

While death is inevitable, the way we deal with it is not always a pleasant experience. For many people, planning for end-of-life affairs can be confusing, difficult, and overwhelming.

But, does it have to be?  

Research Insights

To better understand what was helpful and challenging when going through the process of handling someone’s end-of-life affairs, we conducted interviews with people who had someone close to them pass away within the last year. 

Through our interviews we learned that when a loved one dies, the biggest challenges people faced were:

  • confusion about what to do or what's important
  • difficulty locating the deceased person's information or accounts
  • feeling overwhelmed while making decisions for someone who has passed.

For those who have personally gone through this process of needing to collect and make decisions, three factors were repeatedly cited as instrumental to a positive experience:

  • Having a centralized location for all information
  • Having someone guide you in the process (friend, family, funeral home, etc.)
  • Talking to your loved one regarding plans before they pass

Thus we discovered, when a loved one passes away unexpectedly, it can be comforting to have a guide to help navigate the process. And, our research shows that those who organized and pre-planned had a more positive experience overall with handling affairs after the passing.  

Problem Statement

Driven by both personal experience and our initial research, we landed on our product statement. 

How might we provide a resource of the most common tasks needed to complete when a loved one passes so that it helps organize and guide the people handling the affairs of the person who has passed?

Landing on the Solution

We wanted to create a resource for people to proactively plan their or a loved one’s end-of-life affairs. We want the people left behind to feel less stressed about the tasks they need to do after the death and more focused on taking care of themselves and processing their grief. 

We hope our solution will help to create a more positive experience for everyone involved. And, we believe that having these proactive conversations not only creates organization and allows better financial decision-making, but also builds connections between everyone involved. 

Solution Explanation

Our solution was to create a webapp that provides an organized list of the most common tasks needed to complete after someone passes away. We organized the list into categories and provided a space to check things off and add notes. After going through and filling out the documentation, you are able to email a PDF version of the checklist to yourself for storage or to share with those who may also need the information. 

For our first launch, Beacon will have a few set features:

  1. A personalized onboarding experience to help you connect with who you will be preplanning for. 
  2. An organized visual dashboard to help you decide what area to focus on first. 
  3. The ability to save progress and notes, so you can continue to come back to the webapp over time. 

In the future, or if more time was available we would have liked to have completed the following features as well:

  1. Link to a secure storage platform such as Google Drive or Dropbox for sensitive information
  2. Ability to Email/print the PDF of your checklist from the webapp
  3. The ability to have multiple users in one account, so you can share the information and resources completely online. 

Lofi & Hifi Mockups

Iterative Design Learnings

One of the most important and interesting parts of building this product was our user testing of various prototypes. It was very eye opening to see how people reacted to what we initially thought were “good” ideas. This really helped to nail down why doing user testing and showing people prototypes is integral to having a good product and user experience. 

Here are a few of the user insights that created some of the largest changes to our design. 

We were surprised by the strong reaction to the name “Left Behind” and the logo. Our users had very strong negative connotations with the words “left behind,” and how that would deter them from selecting our product. So we changed the name and the logo. 

We originally thought muted pastel colors were more empathetic to someone going through a particularly challenging time. However, our users noted that for pre-planning and with dealing with such a sensitive topic, uplifting and colors associated with positivity were more encouraging. As we wanted our users to “want” to be in the product, we adjusted the colors after receiving this feedback. 

We knew that a checklist of tasks needed was the core feature of the product, but we were not expecting people to feel as overwhelmed by the list as they stated. As this is not what our intended goal of the product is (it’s actually the opposite), we explored various other ways and decided to make tiles with visual icons to help make the navigation of the checklist and topics a bit more intuitive. 

Implementation Details 

Our site is currently being hosted on our frontend developers local device and the website Vercel. 

The technologies we used in building our product called Left Behind (renamed Beacon) are categorised into two(2). Which include:

  1. Frontend (Client Side)
  2. Backend (Server Side)

Frontend Technology stacks and tools include:

  • Javascript- The language of the web.
  • Next js - A react js framework for production applications (https://nextjs.org/)
  • Redux - This will be used for app wide state management of the project. (https://redux.js.org/)
  • Tailwind CSS: A CSS framework with utility classes. (https://tailwindcss.com/)
  • Framer Motion / Gsap : Animation frameworks to give a better user experience. (https://www.framer.com/motion/) (https://greensock.com/gsap/)

Backend Technology stacks and tools include:

  • Typescript - To make the product more robust 
  • Express: A framework that helps interact with the server efficiently.
  • MongoDB: To store user data. We are using MongoDB because we are saving some details and database details might change sometimes. So MongoDB allows us to easily modify our database even if we have already created an initial database setup
  • Redis (Optional): It's an in-memory DB used for caching and makes queries more efficient when you want to request the same resource faster.
  • Heroku: This is a cloud platform as a service for the deployment of products to be able to have access to it over the internet. It’s one of the easy deployment services and allows free deployment of up to 5.

Technical challenges

  • What was the hardest part of development? The hardest part of development was deployment and getting the front end and the back end to communicate seamlessly throughout all the design changes. Keeping up the needs to adjust the endpoints and make sure they matched the UI designs. This caused some changes in the data structures and additional reevaluations of the code and troubleshooting which slowed down our deployment of the end product. 
  • Does your app have any scaling issues? Our webapp will not have any scaling issues. Each page is built dynamically, and the setup of the app is loosely coupled so that each section of the app can be updated or deleted without causing the app to break down.
  • What are some key takeaways? Abiodun: I had to learn new data structures to make the webapp more efficient. I was able to learn how to really make things more accessible and how to make sure there wouldn’t be any memory leaks or security leaks.  Ekong: Usually build with react, so having to get used to a different system (next.js) was fun because it has its own peculiarities, so it was nice to learn something new. 

Future Steps

At the beginning of this journey, we had thought of continuing on with our product. However, as we near the end of these 8 weeks, real-life and jobs have started to creep in. We are currently in the process of understanding what everyone’s capacity is for continuing this product and whether or not additional help may be needed. 

For now, after demo day, we will all be celebrating our teamwork and the completion of an amazing and successful product journey.

Learnings

Product Manager Learnings:

Amanda Henderson

As a product manager, I have learned that communication is key. It is the cornerstone of a good team, and it's not just about being able to talk to the team. It's about being clear, concise, and honest with your team members so that they know what you expect from them. It also helps them feel empowered and confident in their ability to do their job well.

I also learned a good team culture where people feel comfortable being themselves, sharing ideas, and working together towards common goals is important. When everyone has respect for each other and feels like they're part of something bigger than themselves, amazing things happen!

Finally, remembering that even though things may change along the way (and sometimes drastically!), it doesn't mean that you've taken a wrong turn or missed an opportunity—it just means that now is not the time for whatever it was you were originally planning on doing! Keep working towards your end goal by finding new ways forward; there are plenty of them out there!

Designer Learnings:

Ed Parks

As a product designer, I’ve learned that there are some things you just can’t do without. For example:

A good product manager is indispensable. We started using Jira, sprints, and daily stand-ups for our team. It made us more efficient and helped us to prioritize the right features to work on.

I also learned that continual testing and revising your work is essential to creating a successful product. We ended up changing the name of our product after strong user reaction to the old name.

Finally, I learned that it's important to start development early in order to allow time for revisions and testing.

Developer Learnings:

Ubon-Abasi Ekong

I’ve learned a lot from this experience and working with this team. First, when you have a team of people who all want to learn and grow together, it makes success all the more enjoyable. It was great to see our product grow week over week. 

Second, good communication is essential for team success. It's important for everyone to be on the same page when you're working together. I was surprised at how helpful it was to simply ask someone what they understood from something I'd said or written. I can then go back and explain things in a way that's clearer or more precise—this was a very important lesson for our designer and developer handoff sessions in making sure that we were understanding the same thing. 

Lastly, I learned that it's important to be adaptable—because things will go wrong, and they'll often go wrong unexpectedly. What I learned in my time with this team was how to properly understand and work through the roadblocks that you've never expected would happen (and then fix them!).

Developers Learnings:

Abiodun Alao

&


This experience has taught me a lot about myself as a software developer.

I was able to learn how to better communicate with a team, especially one that is global and in so many different time zones. It was also very important for me to learn how to work with new people, both from other team positions and from other countries. I believe this will help me in my future career as a software engineer.

I was also able to implement new things including: 

  • New data structures - Learning how to create one module that will have all the data and can send the requests from that one module rather than multiple modules, which would slow the server down.
  • Typescript - I used to run from learning typescript because it was very static, you had to give it explicit commands. It’s not as dynamic as javascript, but through this project, I was able to become more familiar with it.

Full Team Learning

We have learned so much during our time here at Co.Lab. It has been an incredible journey that has taught us so much about the process of creating a product and how the process differs from what we expected.

We've learned that there is no one way to create the perfect formula for success, but there are many ways to get there. We've also learned how wonderful it is to have a mentor who can guide you through roadblocks with their experiences and will help you grow as an individual by asking the hard questions.

We’ve learned how to connect and communicate with diverse co-workers from different time zones and communities and how to do so in a way that is respectful but still allows you to have the space to be yourself and voice your opinions and ideas. 

Finally, what we love most about this program is that many of the experiences we had here will be very similar to what we will have in a real job, so this was an opportunity for not only doing the work but then having something to show that we can do the work (which will be great for resumes and interviews)!