A Volunteer Management System for NAMI

Inspiration:

While looking through the prize tracks, I found that there were NPOs we could design for. I am very passionate about using Computer Science for good. There are so many negative ways to use coding and when I saw that there were NPOs in need of our help, I immediately knew that was what I wanted to do.

What it does:

This project is meant to simplify the process of managing volunteers and everything related to volunteers from keeping track of training to tracking volunteer hours.

How we built it:

First, I started by making some lo-fi sketches and interviewing a director at NAMI Yolo County. I took into account her user needs and then proceeded to begin making a Figma prototype. As I designed, I got feedback from her. After this, I began to code the frontend which is where I began to run into issues since I had never coded frontend before. I did a lot of user research in the beginning by interviewing the NAMI director and going back to ask her opinion on my designs and on features she would like to have/would benefit from.

Challenges we ran into:

Taking a Figma prototype and actually coding it. I've made figma prototypes before but I have never coded the frontend. Coding the frontend proved more challenging than expected as it was difficult to figure out what exactly to code in order to get the desired results. Often, things would be off by a few centimeters. I also struggled figuring out how to get sets of text side by side. I also struggled with taking on too much scope. I did a little design a little frontend and kept going back and forth between everything. I wanted to implement all the things I had pitched to the NAMI director, but as a one person team, there really was not time for it. Overall, figuring out how to code the frontend for the desired end result, and taking on to much scope with such limited time.

Accomplishments that we're proud of:

I learned to code frontend! I learned html and css for the most part, and a little javascript but that will be the next thing I tackle in my learning to code frontend journey.

What we learned: I learned to do frontend code.

I have never really used css, html, or javascript before for a project and this hackathon gave me the opportunity to do that.

What's next for A Volunteer Management System for NAMI:

The front-end code needs to be completed and then the backend, however if this project were to seriously get picked up, the next step would be to get feedback from the target users (the management at NAMI). I would then return to Figma prototyping and make those prototypes more fleshed out, interactive and extensive. Then, I would get feedback on those prototypes. Afterwards, I'd jump back into the frontend and code the figma designs once they are actually complete. Then I would have the management at NAMI to try it out. After, I would either adjust according to their needs, or if everything looks good, I would finally begin to work on the backend.

To try the project: ##

Launch the index.html file on Live Server.

Built With

• css
• figma
• goodnotes
• html
• javascript