Project Compass with SF Civic Tech
An overview of my involvement with Compass - a nonprofit and volunteer driven project founded within SF Civic Tech.
Role
Full Stack Engineer
Timeline
Jan 2023 - Current
Team
Compas Volunteers
Tools
Next.js, PostgreSQL, Typescript, NextAuth, Figma
What is Compass?
Compass is a nonprofit and entirely volunteer-led and sustained project founded within the volunteer brigade, SF Civic Tech (formally known as Code for SF). The project was started with the goal of aiding staff within the SFUSD whose work are focused on students with disabilities, namely case managers and para professionals (aka paraeducators). The application aims to streamline their current "nondigital" process of data collection on what is referred to as a student's IEP - Individual Education Plan. In other words, it would allow staff to have an easier time keeping track of their students' progress.
Check out our github here.
How am I involved?
I joined the project as a full stack engineer with an added interest in product design and UI/UX design. I was looking to broaden my understanding of overall web architecture, in addition to getting familiar with the best approaches and methods to take for designing a product. I've gotten the added benefit of learning from and working with some incredibly talented people, and I couldn't be more grateful to this project for giving me the space to make meaningful contributions and grow through creating!
ABOUT
The Users & The Problem
Due to lack of funding, there’s no digital application that is geared towards managing the process of IEP goal creation and task delegation for case managers, nor the process of data collection for paraeducators. Much of their work is done on paper, which also doesn’t allow for much room or ability to analyze and visualize a student’s progress.
Thus, the application has two faces - one for case managers (desktop-first), and one for paraeducators (mobile-first). For a split user base, considerations had to be made regarding limitations and differing tasks.
Case Manager View
Para Educator View
The Solution & User Flow
This application is intended to digitize and help streamline their current processes. It gives case managers a dashboard where they can create IEP goal sheets for their students. They can create tasks and assign them to various paraeducators within the application. This allows them to collect data digitally, which is then stored in a database. That stored data is visualized in meaningful ways to the case managers, resulting in their students’ progress to be easily accessible and analyzed.
WORK
Organization
We use Slack and Github projects to discuss, create, and pickup tickets to work on for building out the application.
Tech Stack
Next.js, NextAuth, Typescript, PostgreSQL, Docker
Pull requests I’ve made / worked on:
- Initial setup of the case manager dashboard and user, as well as the general file structure.
- Setup of the CSS structure and the continuous incorporation of the design system.
- Creation of the sidebar and its mobile adaptation (hamburger menu) for responsive design.
- Minor CSS Fixes
- IEP Student Modal (current)
Design component I'm working on:
I’m currently working with another UX designer on finalizing the mockups and direction for the data visualization portion of the application. Our primary question: how can we visualize data in meaningful ways for both the CMs and paras? To find our answer we had to understand how they currently analyze data and how they present it in ways that demonstrate a student’s progress.
Current objectives:
- Determine the best ways to visualize and handle outlier data
- Explore whether data be displayed at varying hierarchical levels in the IEP
- Test the inclusion and generation of varying graph types
Mockup of the data table I'm working on for the data viz
THOUGHTS
I've worked with a lot of new tools and concepts
Working on this project has given me so much valuable insight into working on cross-functional teams, contributing to open-source projects, getting familiar with schema setups and Typescript, and the importance of understanding the end user and how the application is continuously meeting their goals.