Bits of Good is a rapidly growing, student-run non-profit serving the Atlanta non-profit community with pro-bono custom software. To support this growth, I helped create a centralized management system where student information could live over the semesters.
Along with my good friend and fellow designer Star, I designed a centralized management system where student information could live over the semesters. Having this information handy would help engineering leadership within the organization facilitate team placements, organize and present membership data externally, and conduct outreach more easily.
As a Product Designer at Bits of Good...
Currently, keeping track of member information is difficult
Upon receiving this project, Star and I met with our clients, two representatives from engineering leadership, to discuss their needs and preferences. We discovered four key pain points amongst both general members and exec:
Currently, all information regarding member status, current and past project assignments, and developer preferences live in a mess of various Google Forms, Excel Sheets, and AirTable forms.
Bits of Good members have no way of updating their own information- they must reach out to a leadership representative to indicate that they are interested in switching projects or working with a different tech stack, which is manual, time-consuming work
Aside from the official Bits of Good Slack or Discord channels, which many members do not check regularly, finding contact info for individual members is difficult and hinders outreach and clear communication within the org
There is no centralized location where exec members can note or read about particular members' behaviors or contexts- leading to situations where important member information is not communicated fully throughout the various departments within Bits of Good. Interestingly, this has led to situations in which underperforming members have been able to switch departments and remain a part of the organization
TLDR; the current workflow for keeping track of member participation is tedious and inefficient, and has led to a lack of proper communication amongst executive members of the organization.
“Currently, we track members in the club by having a roster Google Sheet for every semester. A developer’s tech preference can sometimes be tracked by a form, but those don’t exist for every semester. We want a centralized place for all of this information to live.”
Role & Timeline:
Product Designer
September - November 2022
Scope and Deliverables
High-fidelity UI designs
A new way of managing volunteer information
The two key features that Star and I needed to create were:
The member-view page, where members can update certain information and view other information. Members can edit their own contact information, upload a profile photo and select a different tech stack preference. Members can view, but not edit, their department, current and previous projects, their current and previous roles within the organization, and their current member status
The admin-view dashboard, where members of the engineering executive board can view and edit all member information. Executive members can edit member contact information, department, current and previous projects, tech stack preference, current and previous roles, and member status. In addition, executive members can edit and view notes about each member in a field that members cannot access.
There appeared to be a good bit of complexity regarding what each member type could and could not access or edit, so Star and I worked with product and engineering to whiteboard the exec dashboard feature as well as example data types.
Preliminary designs
Member View Screen
I began by conceptualizing a page where it was clear that there were certain fields members could edit, and others that they
could only view. I created low-fidelity wireframes in Figma with a split-screen view and we both played around with grays and whites to highlight edit-able versus view-only fields:
One of my favorite parts of being a designer at Bits of Good is being able to give and receive feedback from other talented designers within the organization! During our weekly design critiques, Star and I were able to receive helpful feedback on our low fidelity concepts. One key, common piece of feedback that we received is that, to make our platform worth using for Bits of Good members, we should reduce user steps as much as possible.
Moving from low to mid-fidelity designs...
Two iterations of the executive-view dashboard, alongside a side panel for editing member information! The second is updated with categorical colors and a search bar.
Executive-view Dashboard
Using the low-fidelity sample dashboard entry my team mapped out earlier, I got to work designing a dashboard screen that would clearly and concisely display member information while allowing filtering by semester and CSV/additional data uploads. Upon clicking on any data entry, the user would access a pop-up screen and be able to edit a particular member's information.
Putting everything together...
My team was able to both design and implement the management system in just one semester! We showed off our product and demo at the organization’s Demo Day, and we’ll be preparing our product for final hand-off to our client and the product maintenance team at Bits of Good. Next semester, engineering members and leadership at Bits of Good will be using the platform to track member status and information.