Building Attendance & Mood Tracker for nonprofits
The Boys and Girls Club of Conejo Valley kept their doors open during the frightening and unclear start of COVID-19 in their branches around California. A feat that demands respect for the organization, as many people feared for their lives at the early stages of the pandemic and the club was a huge aid to parents having to continue their full-time job to make ends meet.
To help make those in the club lives easier, I helped develop a platform that allows the use of technology to track attendance and mood, something very important across all parties involved in the club during uncertain times. Moods across children are a particularly important aspect to capture, it is a great indicator of seeing what kid enjoys what activity, and how their overall day or week is doing. This is the foundation of the problem we are aiming to solve: administrators are not able to efficiently track a high number of kids’ moods, and our QR code emoji tracker solves this problem.
We developed an app that uses a QR scanner to verify a student’s ID, taking them to a user flow that then captures how their feeling with a number of emoji choices. The administrators are then able to capture this data as a whole and make adjustments to consistently improve their services for the children.
With developing for children, the room for error is low as you need special insight on how children respond to technology, you need the special interface that really clicks with them. I had no previous experience with children so that was the main concern off the bat. This was one of my fears when I was developing the success page and how I solved this problem.
I made an idea to include a random dog picture generator at the end of the child’s user flow which was a great idea in allowing children to actually look forward to using the application — it could get tedious having to put an emoji response multiple times during the day. Kids could lose patience and therefore the accuracy of the results could get worse over time. Having that perfect ending for them to look forward to is perfect to get them interested and happy.
There Will Be Roadblocks, but We Will Overcome Them
We split out our group of 7 into a backend and frontend department. I felt particularly proficient in the back-end as it was still fresh in my memory so I opted in to join Front-end. After completing the base components (administrator dashboard, check-in/checkout/activity check-in page, QR scanner page emoji dashboard, and success page), I worked heavily on managing state through the user flow.
The current user flow in order:
- Select Club
- Administrator Dashboard
- Administrator type of check-in/out
- Kids QR Code scanner
- Kids emoji board
- Kids success page
The user stories:
- As a super admin, I want to be able to see data for all clubs.
- As a club director, I want to be able to see data for my club.
- As a club director or admin, I want to be able to import a CSV file of data.
- As a Youth Development Professional (YDP), CD, and Super Admin, I want to be able to log in to perform core application functions.
- As a CD or Super Admin, I want to be able to generate an ID card depending on my scope.
- As a CD or Super Admin, I should be able to assign roles.
- As a member, I want to be able to leave an emoji reaction.
- As a YDP, I want to be able to select what activity I am scanning for.
My main contribution was managing the state of the emoji so it transitions to the backend as smoothly as possible, as well as the complete creation of the success page.
As do many groups, we had a couple of big issues that were huge roadblocks to our progress, but I call it a great opportunity to learn. The most recent one was determining how the choosing the right models in the backend to best achieve our goal in creating the best app possible. We started off with an idea that we could separate the reactions in a particular activity and member reactions in check in/check-out. This was a disaster as it would be a huge problem for future groups to scale, as well as, missing a huge opportunity to capture data. Separating activity reactions from checkin/out reactions was the easiest route to take, but had huge issues because activity reactions would not take into consideration the kid who reacted to the activity, rather it was just a collection of anonymous reactions to a selected activity. Thanks to our Backend, we transitioned towards the highroad and took the difficult yet scalable route which is to create a Member Reaction that starts with the kid, then adds the type of check-in afterward. This way we look at data firstly from the Kid, rather than the other way around. It makes sense because the priority of the application is to track kids. By doing this, we leave the organization a lot of opportunities to collect data and find patterns to improve their organization.
“As do many groups, we had a couple big issues that were huge roadblocks to our progress, but I call it a great opportunity to learn.”
Another technical issue we came across was finding the most effective way to manage state to go through the whole user flow based on what we were given. Unfortunately, the group before us left us with a very dysfunctional application when creating the foundation of the application. Pretty much took the opposite road of the problem we had earlier, but as I said, this becomes a great opportunity to learn. The application as it stands required deep refactoring so we are able to manage state. We chose the simplest but effective way for the application’s state to pass through the user flow using prop drilling. We had another issue regarding the state. During our last product meeting, we were advised to move the QR code scanning from before the check-in process to after. This brings a lot of issues as we first declared state on QR code scanning which was the earliest component where state was needed. Now we have to move state to the middle of the user flow.
HOW WE SOLVED THE PROBLEM:
We refactored it so there are four states that pass through the app, tasks (type of check-in), student id (id associated unique to each kid), reaction (the emoji the kid chose), and activity (separating check-in/out from activity-based check-in).
THE LIGHT AT THE END OF THE TUNNEL
We have developed a successful application that tracks how kids are feeling at a certain type of day or activity, it can also serve useful in attracting attendance, as well as a way to gather data that would overall promote happiness in the student and the club.
Our features include:
- QR code scanner
- Dashboard to download reports of student data
- Emoji mood tracker
I am very thankful for having worked with a great team of personalities to develop a meaningful and useful application for an organization that deserves one. Our application leaves room, most importantly, for future development and scalable operations. We have developed a foundation and shipped two features, but did it very well. We have given the club an opportunity to gather reports at a mass, to allow data science to seek patterns and solve issues that are currently trouble the organization. In addition to tracking the emotions and moods of the children, future development could include the basis of more ways to track the feedback of children outside of the limited emoji structure. It could be an option for students to use the app and set forth more detailed issues that are troubling them or requests to make the club better. Obviously, the sky is the limit to transform the application into something bigger to support the children. A technical challenge that could pop up is that currently, the state is limited in the features we developed. If we would transform the app to something much bigger, a state management tool such as redux would be better. The feedback I received from my peers was to be more transparent about my schedule, I am the only one working outside of North America so there were some moments that I could have been more transparent about my off-hours for dinner and be there for my team as best as I can. This project was a great learning experience working on a real-life problem with real stakeholders who are depending on me, it was a great lesson in that regard. Being responsible for something that is real and outside of school allowed me to be more strict with my obligations in a team environment.
I am very thankful for having worked with a great team of personalities to develop a meaningful and useful application for an organization that deserves one.
Here is a video of the application user flow.
