San Francisco Unified School District
Powering San Francisco’s first-ever virtual enrollment fair
In close collaboration with the school district, we helped San Francisco parents navigate the city’s complex school lottery by understanding which of the 100+ schools will best meet their child’s needs.
Bringing an already complicated process online
San Francisco, like other large American cities, assigns children to public schools via a complex lottery system rather than by proximity. This means that parents from a wide variety of backgrounds are responsible for populating applications with a prioritized list of schools for their children. 2020 made this process even more challenging, as everything from enrollment fairs to applications moved online for the first time.
The San Francisco Unified School District (SFUSD) knew they needed to offer parents an easy, self-serve way to research schools that met their child’s needs. Then, they needed to empower them to find out more about each school, so they could prioritize their options.
While we were already established website support partners for SFUSD, this was our first project with the Educational Placement Center (EPC), led by their new director, Lauren Koehler. Lauren brought us many ideas for ways other districts were using out-of-the-box solutions to support parents in the school selection process. However, as these failed to meet SFUSD's accessibility and analytics needs, she tasked us with building a custom School Finder tool.
Lauren’s vivacious energy and ambition to improve this experience for parents drove this project, while their rapidly approaching first-ever virtual enrollment fair drove the two-month timeline. Luckily, we also had the support of EPC’s Executive Director Jeff Kang, Online Communications Coordinator Joyce Tsai, and Marketing Specialist Susan Hsieh to get it done.
"The Educational Placement Center is currently undergoing many shifts - from paper applications to online applications, from in-person appointments with enrollment counselors to phone and video appointments. We realized that with the new online application, which many families complete on their own from home, we needed a new way to help families create a list of schools for their application without talking to a counselor."
Understanding Parents and How They Approach the Lottery
We began by understanding as much as we could about how parents approach the lottery and their current pain points along the way. Luckily, Lauren and her team were in close contact with SFUSD counselors, who had the most interaction with parents navigating this process. We were able to leverage their insights with a collaborative user journey sketching workshop.
We learned that, though parents have a wide variety of approaches to creating their prioritized list of schools, most fall into one of three informal groups:
- Data-driven parents, who build detailed spreadsheets and conduct in-depth independent research
- Word-of-mouth parents, who seek information from their community about schools and could benefit from more support
- Unfamiliar parents, who seek the most guidance from SFUSD counselors, and are sometimes assigned to schools without knowing the lottery system exists
With the help of Lauren and her team, we outlined the parents’ user journey, the process they take from being aware the lottery exists to completing their application. We documented key actions and known pain points within each phase. This allowed us to focus our solution where it would make the greatest impact, the narrowing and ranking phase, while keeping the big picture in mind.
Designing a Tool to Make the Lottery Easier for Parents
Armed with the insights from EPC and our knowledge of SFUSD’s existing Drupal 8 site, we created mockups to visualize how we could make this process easier for parents. We added thoughtful filters to help narrow schools along with vertical cards to help compare them to each other.
Our mockups allowed the SFUSD team to envision our approach and gather feedback from counselors and parents before the tool was built.
After reviewing the mockups, counselors requested attendance area schools (geographically-assigned priority placement elementary schools) be added, along with a way for parents to easily find help and connect with them.
We designed a user feedback study for Joyce from SFUSD to lead with a select group of parents. Based on their feedback, we clarified the difference between language programs for English-learners and English-speaking students and made the option to switch between the map and card view more obvious.
We updated the prototype (seen on the left) after reviewing it with parents. For instance, the “Show Map” button became more visibly prominent on the live site (seen on the right).
"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."
Building the School Finder into SFUSD’s Existing Drupal 8 Site
Filters need data
We created filters to prioritize how parents think about schools, rather than how SFUSD does. Filters don’t work without data, and much of the data needed for these new filters did not exist on the current Drupal 8 site. First, we added a field to the school content type, so each grade level could be added individually, rather than the previously-entered grade ranges. Next, we added fields to the special education program taxonomy, so their fourteen special education programs could be simplified to six within the tool. Finally, we added two fields to the language program taxonomy, so each could be identified with the language(s) spoken along with the required language fluency for each program. We wanted to make sure that parents who may not be fluent in English could easily find schools that accommodate their child’s current fluency. The new filtersis created a mountain of content entry work, which Lauren and Joyce from SUFSD completed quickly with an army of dedicated counselors to help.
The SFUSD team collaborated in Google Spreadsheets to map literacy requirements for language programs.
Including the attendance area schools within the tool proved to be even more of a challenge. We learned that the data to match each San Francisco address with its attendance area school was manually maintained in a spreadsheet. So, we recommended that SFUSD host the data on Carto, so they could own and update it in a single location that we could access from the site.
Progressively Decoupled Drupal
Though we knew the SFUSD team wanted a familiar and consistent content editing experience, we also knew that Drupal needed a boost to get this project done right. We wanted greater control over the data itself, how it was manipulated, and how it was presented to the end user. We determined that a headless application within their existing Drupal site would best serve their needs.
A progressively decoupled Drupal approach allows internal users to update content via a traditional content management system (CMS), then renders that content for site visitors via a JavaScript application.
We chose to build with knockout.js, because it had the functionality we needed, while also being open source, pure JavaScript, small and lightweight, fully documented, dependency-free, and supported by all mainstream browsers.
Creating a Robust, Yet Accessible, Table within a Carousel
We knew formatting schools in a vertical card format would be key in providing a side-by-side comparison between schools, yet were also aware of accessibility limitations of existing carousels.
SFUSD’s commitment to building an inclusive tool, along with the robust data we wanted to display for each school, eliminated the viability of existing carousel options. So, we built a custom HTML table presented as a carousel interface for this project. It allowed for robust cell data to be displayed in each panel and for sections to be expanded or minimized across all schools with a single click.
From Over 100 Schools to the Best for Each Child
The School Finder had more than 3,000 views per month in its first few months, with visitors spending an average of three minutes using it to filter schools. An SFUSD parent noted, “It is really helpful for both caregivers and students." An SFUSD counselor noted, "This makes it easier to help parents find schools that meet their needs close to their homes."
"This will transform the way our team is able to counsel our families. We’re so grateful for all your work on this."
"I wanted to say how really awesome this tool is. We’re really happy with the way it looks - so clean."
"Thank you for the breakneck speed you worked."
