Sector(s)

Team Members

LilyBerman, mikemccaffrey, cspin, jason.blanda

Project Team

SFUSD's Educational Placement Center

Lauren Koehler (Director, Educational Placement Center, SFUSD)
Joyce Tsai (Online Communications Coordinator, SFUSD)

This will transform the way our team is able to counsel our families. We’re so grateful for all your work on this​​​​​.Lauren Koehler, Director of the Educational Placement Center at SFUSD

Visit the site

Visit the site

Organizations Involved

Community contributions

Kalamuna’s work on this project contributed to the Drupal community through the use of existing modules and by sharing insights into progressively decoupled solutions. Additionally, the team provided feedback on accessibility improvements related to carousels and contributed to discussions around managing complex content relationships in Drupal.

The San Francisco Unified School District (SFUSD) faced the challenge of helping parents navigate its complex school lottery system, which requires them to select from a list of over 100 schools for their children. The COVID-19 pandemic made this even more difficult as the entire enrollment process shifted online.

SFUSD needed a tool that would allow parents to easily research and compare schools on their own without requiring in-person assistance. They turned to Kalamuna to build them a "School Finder," a user-friendly tool that could be integrated into SFUSD’s existing Drupal 8 website that would empower parents to confidently select schools while also reducing the support burden on the school district.

Describe the project (goals, requirements and outcome)

The primary goal of the School Finder project was to create a tool that would simplify the school selection process for parents. It needed to provide an easy way for parents to compare schools based on a range of criteria, including location, grade levels, special programs, and more. SFUSD also wanted the tool to support their first-ever virtual enrollment fair, making it even more urgent for the site to launch in a timely manner.

The project had a tight two-month timeline, during which Kalamuna worked closely with SFUSD’s Educational Placement Center (EPC) to gather insights from stakeholders, conduct user research, and prototype solutions. The team identified three main types of parents who would use the tool: those driven by data, those relying on word-of-mouth recommendations, and those unfamiliar with the school system who needed extra guidance.

grade, home address, start time, special education, language programs, current fluency, arts & enrichment programs, athletic programs, etc

Using this research, Kalamuna designed filters that matched typical school criteria for parents, such as proximity and special education programs and then built the School Finder as a progressively decoupled application, combining Drupal for data management with a JavaScript front end for fast, responsive filtering. This ensured that parents could view all relevant information on one page and quickly adjust their search criteria without reloading the site.

The School Finder launched in time for the virtual enrollment fair, and its impact was immediate. It received over 3,000 views per month in its early months, with parents spending an average of three minutes using it to filter and compare schools. The tool empowered parents to confidently make decisions, while SFUSD staff reported that it made it easier for them to support families remotely.

We were lucky to be able to partner with Kalamuna, who approached the redesign with a fresh perspective and curiosity about what parents wanted and needed. The team helped us sort through our long lists of needs and wishes, and went above and beyond to create a design that reflected the diverse ways that our families create school lists."​
Lauren Koehler, Director of the Educational Placement Center at SFUSD

To build the School Finder, Kalamuna used Drupal’s robust content management system to organize and standardize information about each school. Key challenges included handling the complex relationships between schools, grade levels, and special programs, which were managed through Drupal’s taxonomy and content types. The team added custom fields to the school content type, allowing grade levels and special programs to be individually tagged and filtered.

overlapping squares showing the frontend in in front of drupal

A progressively decoupled approach was used to provide a fast, responsive experience for parents. This involved using Drupal as the back end to store and manage data while a custom JavaScript called Knockout.js was selected for the front end. This framework was chosen because it provided the necessary functionality while being open-source, small, fully documented, and supported by all mainstream browsers​. The Views and Views Data Export modules were used to generate JSON feeds for the front-end application, allowing parents to filter schools without triggering expensive database queries.

SFUSD’s commitment to accessibility was central to the project. Kalamuna built a custom HTML table within a carousel to ensure that parents could compare schools side by side without sacrificing accessibility standards.

Why Drupal was chosen

SFUSD was already using Drupal 8 for its entire online ecosystem, including individual school home pages. When they sought a solution to help parents explore and compare schools, they evaluated third-party platforms but found them too costly and inflexible for their needs. To adequately prioritize SFUSD needs, Kalamuna proposed leveraging Drupal's existing content architecture and customization capabilities to build a custom solution.

Drupal proved to be the ideal choice for the district because it allowed SFUSD to keep the School Finder tool fully integrated with their existing website, while also providing the flexibility to create custom filters and data displays. The platform's open source nature aligned with the District's values and ensured long-term adaptability. Additionally, Drupal's ability to manage complex relationships between content types and taxonomy terms made it perfect for handling the intricate data required for the School Finder tool.

Technical Specifications

Drupal version:

Key modules/theme/distribution used:

Why these modules/theme/distribution were chosen

Views and Views Data Export were critical to aggregating and serving the complex data required by the School Finder tool. They allowed Kalamuna to generate a comprehensive JSON feed for the JavaScript front end, ensuring fast filtering without taxing the Drupal back end. A Custom Carousel was essential for meeting accessibility requirements while providing a rich comparison experience for parents. The entire solution was built to be accessible; behind the scenes it was styled as cards, which screen readers can read as tables line by line.