PORTFOLIO MENU




BACK HOME



COSMISTACK ASP LAB COMPASS H&B CAFE CSSA









LAST UPDATED: 11/04/25
COMPASS OVERVIEW




ROLE
Volunteer Developer
DATE
Jan ‘23 - Jun ‘24
TEAM
SF Civic Tech

STACK
Next.js, NextAuth, CSS, Typescript, postgres, Figma


COMPASS GITHUB







DESIGN DEVELOPMENT



COMPASS
Introduction
Open source work for Project Compass.
I joined the project as a volunteer, primarily contributing to the design decisions and building out components in the frontend of the application. I worked on a team alongside other volunteers whose roles spanned from ux researchers and designers to product managers to engineers.












 Project 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 who work with students with disabilities, namely case managers and paraeducators (aka para professionals). The open-source application aims to digitize and streamline the staff’s 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 both analyzing and keeping track of their students' progress.

The volunteers consisted of researchers, designers, developers, and product managers. I joined the project as a (primarily frontend) 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.








1.   The Prospective Users’ Problems


Due to a lack of funding, there’s no centralized digital application for SFUSD staff in this field, namely case managers and paraeducators. Much of their work is on paper and individually managed, making it hard to organize tasks especially over time. It also makes it hard to analyze and visualize a student’s progress.




CASE MANAGERS
Case managers primarily deal with managing the process of IEP goal creation, task creation and delegation, and analysis of student progress. Most of this work therefore is done with their desktops or laptops. 


PARAEDUCATORS
Paraeducators primarily deal with data collection and aiding students with tasks. Since they are involved with students directly, most of their work is done on mobile devices or simply on paper. 







2.   The Two Face Solution


Taking into account the various user journeys, the application was designed to have 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 (such as access to private information) and differing tasks.




HOW DOES IT WORK?
The application 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. The paraeducators can keep track of their asigned tasks, and upload corresponding supplemental materials. With the data being collected digitally, accessing and organizing information becomes infinitely easier. The stored data can then be visualized in meaningful ways to the case managers, opening up new opportunities for staff to access, analyze, and visualize their students’ progress.










3.   So... what did I contribute?



Much of what I worked on (either individually or in collaborative sessions) had to do with the translation of design elements and components into the web app’s frontend. Including:

  •  the setup of the dashboards
  • a responsive sidebar
  • CSS variables
  • modal component
  • ideation of data visualizations and other design components