Oakland Genesis Soccer Club — a project recap
Breaking barriers in youth education, sports, and mentorship with the OGSC web portal
Oakland Genesis Soccer Club is a Bay Area-based nonprofit organization that provides socially and economically disadvantaged youth aged 13–18 with free transportation, academic support, and professional soccer coaching. They aim to break the inequities present in youth sports and education by providing three main programs:
- Transportation: OGSC provides free and safe transportation to and from team practices and games.
- Academic Support: OGSC provides free academic support and advising for its players. This includes tutoring, SAT and ACT exam preparation, college application support, scholarship and grant application support, counseling, and navigating the college athletic and recruitment process.
- Competitive Soccer: OGSC provides free access to licensed, professional coaches. They prioritize personal development over athletic development to create an environment that will foster passion for one’s work.
This year, Blueprint worked with OGSC to build a web portal that allowed the nonprofit to keep track of students’ individual progress, analyze student growth to provide personalized support, and communicate with all people involved in OGSC’s programs.
The Problem
Previously, OGSC used various online services to track player progress and communicate with players, parents, donors, and mentors. This fragmented system proves to be cumbersome and difficult to provide personalized services for all program participants. Important information also became difficult to keep track of, often lost across numerous platforms with confusing permission structures.
The disjointed flow of operations created significant overhead for staff. The lack of a cohesive communication platform prevented players, parents, donors, and mentors from receiving information in a timely manner.
The Solution
Blueprint built a web application that allows OGSC admin to track player progress and centralize communication all on a single platform. This site also allows mentors, donors, and parents to log on and view the progress of specific players in real-time. Our app was built using React, TypeScript, and Next.js on the frontend and Prisma.js and PostgreSQL on the backend.
User Research and Design
One main challenge in developing this project was making an accessible platform for all the different users involved in OGSC’s program. To provide a well-rounded experience for players, several people are involved in each player’s personal, academic, and athletic development. From our conversations with several people from OGSC, we found five main users who would use the platform:
- Admin: Administrators managing OGSC logistics, player profiles, and user permissions.
- Players: Student participants (typically aged 13–18) in OGSC.
- Parents: Parents or Guardians of OGSC players.
- Mentors: Volunteers for OGSC who act as mentors for the players.
- Donors: Donors for OGSC who regularly check in with the general progress of their sponsored players.
Each user has their own unique roles and responsibilities in OGSC, which translates to being involved in different aspects of players’ participation in the program. For example, mentors document and view progress notes on the players that they’re assigned to mentor. To preserve player privacy, only admin and mentors of said player can view and edit these progress notes. Similar permission structures apply to the other user roles based on what player information is relevant to their involvement in the program.
Previously, OGSC’s operations primarily relied on Salesforce for Nonprofits to record student information and progress, Excel to share data, and Squarespace to contact its organization members. From our interviews with OGSC admin, we found that the spread of operations across these disjointed platforms made it difficult for OGSC to retain important pieces of information, which were often lost across numerous platforms with confusing permission structures. This incomplete picture on players’ progress prevented OGSC from providing personalized support for each student’s specific needs and evaluating program effectiveness.
From our user research, we realized our app needed to focus on 2 key functions:
- Data management: It’s important that the abundance of program data be easy to manage and navigate for all users.
- Growth visualization: The platform should allow users to visualize participant growth over time.
Tracking Player Progress with Player Profiles
To track player progress, each player in OGSC has a profile that tracks their progress throughout their participation in OGSC’s programs. Player profiles showcase a bio of the player’s background and interests, engagement score (admin evaluation of the player’s academic and athletic progress), academic progress, attendance, physical wellness, highlight moments, and notes written by the player’s mentor figures.
Depending on their role and relationship to the player, certain users can have permission to add, edit, or delete data in each of the player’s profile entries. Users may also view graphs and charts visualizing an overall summary of players’ engagement scores, academic progress, and attendance over time.
Adding Members to the OGSC Platform
Method #1: Inviting Users
Admin can directly add users and invite them via email to join the OGSC platform. The email directs the invited user to create an OGSC account.
Method #2: Requesting to Join
Users can also sign up for an OGSC account and wait for their account to be approved or declined by an OGSC admin, who can view all users who requested or were invited to join the OGSC platform.
User Viewing Permissions
Admin may assign certain players to a user so that these users may view relevant information about a player throughout their participation in OGSC. For example, parents may view their children’s bio and highlights, mentors may view these pages and their assigned players’ progress notes, and donors may view the overall engagement of certain players they sponsor to view their impact on the program.
Viewing All Members through the Users Dashboard
Admin can view all users of a certain role on the OGSC platform. Each user has a corresponding profile that the admin can edit or deactivate when necessary.
Technical Overview and Challenges
Throughout development, we learned the importance of reducing and reusing, rather than redoing. We found that less is more for both the design and implementation of our project.
To establish consistent styling that could be reused throughout our app’s components, we used Tailwind CSS, a utility-first CSS framework that provides flexible constraints when styling our front-end. We built our components to the constraints of Tailwind’s style guide and wrote our global style guidelines in a single file. This eliminated the need to constantly create and keep track of multiple stylesheets. Although it initially took time to establish what each component would look like according to Tailwind’s guidelines, we were able to reuse these components throughout the entire app and easily restyle them whenever necessary.
We also built our player profiles after considerable time and discussion speccing out how our backend would store profile data. As a result, our Player Profiles are built intentionally to enable a simple workflow that allows adding or deleting a field within the player profile. This allows OGSC admin to easily update what parts of a player’s progress they wish to track.
Building reusable code also creates good patterns. When implementing pagination on our users dashboard, Shannon wrote a hook that wraps all custom effectful and stateful logic, making it easy for other team members to page through any remote data source — our tables for users, invites, profiles can all be paginated using one hook.
Sometimes when patterns are generic enough, other projects can even reuse them for their own use cases. Due to similar aspects of our projects, our NBJC team was able to reuse our authentication implementation for their own app.
Final Reflections
The unique, extensive nature of OGSC’s program and our project taught us the importance of keeping the big picture in perspective, from understanding your feature’s role in the product to planning before starting to code. Several discussions on the our project’s design reminded us to measure twice, cut once — big tasks are more manageable by taking a step back and breaking it down into different tasks.
“Always ask why. Why is this feature important, how will it be used in the final product, what other things does it connect to? I learned not to just copy code but to understand the meaning behind it. Propose ways things can be made more ergonomic for future development or how things can be made more accessible for users.”
Below is a snippet of Joy’s spec for implementing authentication in our user login/sign-up process. Planning before implementing helped save time and break things down into more approachable tasks. In addition, the existence of a spec allowed for other team members to align on how authentication would integrate with other developers’ features and give their own input.
We’re excited for OGSC to start using our project starting August, during which the nonprofit will welcome its upcoming cohort of players! Special thanks to Matt and Cody, our nonprofit points of contact, for being such amazing people to collaborate with throughout the entire process of building this app, whether it was providing feedback for our user wireframes or sharing updates on their program operations. We learned a lot working on this project, and we appreciate the time and energy our team and nonprofit partners have given to support each other the entire way!
Meet the Team!
- Erin Song (she/her): Project Leader (fa 20)
- Sydney Bui (she/her): Project Leader (sp 21)
- Rachel He (she/her): Designer
- CJ Grey (he/him): Developer
- Ethan Lee (he/him): Developer
- Joy Dong (she/her): Developer
- Shannon Hong (she/her): Developer
- Kenny Chi (he/him): Developer (sp 21)
To learn more about Blueprint and our projects, visit our website and follow us on our Facebook page!
All of Blueprint’s work is open-source because we believe in building technology that makes us more open and connected. You can view the OGSC app and the rest of our projects on our Github.
Special thanks to Sydney Bui, Ethan Lee, and Frederick Kim.
