The Problem and Inspiration
Based on the current COVID-19 pandemic, research was done to identify these core issues:
1) Lack of indoor activity ideas and motivation to come up and maintain a new daily routine with healthy, beneficial activities.
2) Lack of understanding of general rules of self-isolation that sometimes leads people into acting in a way that puts others in danger.
3) People who test positive on COVID-19 may have issues recalling their close contacts for the past two weeks which can also put other people in danger.
Based on these conclusions, I decided to build an app that would act like a swiss knife for those situations and set the following goals for the app:
- High-quality look and feel
- Delightful UX
- Can be installed and used today (no fictional scenarios or pre-requisites for usage) *Light & performant
- Scaled down to mobile UI to speed up design & development process, but easy to scale up if needed
I've come up with this design that you see today with a working backend.
What it does
The following features are incorporated into the app:
Activity tracker with gamification elements - Users earn points by completing tasks (custom or suggested tasks). That way they're encouraged to find new and healthy activities while indoors.
Close contacts list- users can maintain list their close contacts with contact details. They can also use Twilio's programmable SMS to send a message to them in an emergency.
Tailored experience dependant on the situation - Recommend different activities for users based on the following criteria: if they are in a mandatory self-isolation or not and if they live alone or not.
Chatbot assistance - Users can get informed about self-isolation rules. Currently with very basic chatbot flow, but with wide possibilities for extending it, depending on the config in the Twilio console.
Indepth Feature Details
Activity tracker with gamification With most outdoor and social activities not being an option for most people for time being, people need new activities in their day in order to maintain mental and physical wellbeing. Homebound encourages users to include new and healthy activities and develop healthy routines.
Users are able to assign themselves various tasks and activities and complete them without any limits imposed. When the user completes the activity, they are awarded a random number of points. This is where gamification comes in. There are also many interesting opportunities for expanding this feature further (leveling system, achievements, streaks, etc.).
Close contact tracker It’s important for a person that tested positive for COVID-19 to recollect their close contacts within the past two weeks. Accuracy can make a massive difference in the prevention of spreading the virus. Companies are looking into automatic close contact tracking using our own mobile devices, which makes the future look like something out of a dystopian movie.
With HomeBound, I wanted to give users a simple tool to keep track of their close contacts with complete control over their data. If a user ends up testing positive for COVID-19, having a complete and accurate list of close contacts for the past two weeks would prove invaluable to the medical staff.
This is also where our Twilio API integration comes in, with Twilio’s programmable SMS functionality, users will be able to send a quick message to their close contacts to warn them and tell them to stay put and keep a distance from their close contacts. I've integrated the API using Firebase Cloud functions so I kept all backend functionality there.
Tailored experience When the user signs up, they are asked if they have been assigned mandatory self-isolation and if they live alone. Based on that data, we can be careful not to include activities in a recommended list that might cause harm to others.
Meet Couchy - the chatbot! It's important to keep the users informed and provide a simple way to answer their questions during these times. I've integrated Twilio's Autopilot and Chat functionality using Firebase Cloud Functions. Even though it currently features a basic flow, it has the potential to be extended with an extensive knowledge base and multiple possible flows (checking symptoms, self-isolation rules, recommended activities, news, stats, etc.).
Please note that chatbot integration may have some edge cases present due to the complexity and time required to iron out all the bugs. But it still cool, though, and it works! :)
How its built
I built HomeBound with React for frontend and Firebase Firestore for the backend. I also integrated Twilio functionality using Firebase Cloud functions for extra flexibility and security.
Firebase Firestore database is structured to be scalable and performant and is protected by a strict set of rules. Only authenticated users are able to create new data nodes. Users can read and update the data that only belongs to them.
As for frontend, I used the following:
- React with custom hooks
- Redux for global state
- PostCSS build with postcss-preset-env and cssnano *nreact-circular-progressbar for score
- react-hook-form for forms
- react-toastify for global messsages
