SFDS

In 2019, I moved back into the public sector and took on a role doing design for the San Francisco Digital Services (SFDS) Housing team. This group supports the Mayor’s Office of Housing and Community Development (MOHCD), its DAHLIA housing portal which residents use to find and apply for affordable housing, and the back-office software that underpins the matching of applicants with available units. The hallmark of my time there? Research-driven product development. This work embodied a key design value for me: building with, not building for.

One major project I took on was a redesign of the “lease-up” feature in the DAHLIA Partners app, where leasing agents working for housing providers move through lists of housing lottery winners to match households with available apartments, while reporting back to staff at MOHCD. Our PM and I interviewed a number of leasing agents, many of them on-site at their offices, to understand their pain points. At the same time, we spoke at length with MOHCD staff tasked with monitoring and supervising these agents, to understand their needs. This produced a map that encompassed the work of our interviewees, the system, and residents seeking housing.

A long winding journey: Research and the resulting map helped us understand pain points for all parties. [View full map as a .pdf in a new window]

The complexity of the process for all involved—MOHCD staff, leasing agents, and the SF residents working with both—was clear. We identified two main themes for improvement. First was leasing agent efficiency. These folks had hundreds of applications to work through, with multiple interactions with residents and granular status updates reporting back to MOHCD. The second was reduction of errors, especially in reporting. MOHCD needed to ensure a steady stream of high-accuracy information about each lease-up.

Bulk actions proved important to increasing leasing agent efficiency.

We addressed leasing agent needs via introducing bulk actions and filtering to the applicant list. In our research, we found that agents worked with multiple applications at once. In the existing system this meant lots of repetitive tasks, things that would be better wrapped into a single bulk action.

Filtering on key attributes helped leasing agents manage hundreds of applications.

Filtering was key to managing large numbers of applications that shared common attributes—these lists could run into the thousands! Being able to find the right applications without needing specifics on which to search saved time and aggravation, and tied in with bulk actions to reduce total time spent in the app for leasing agents.

Keeping key actions front-and-center within a lengthy form reduced errors and kept MOHCD staff up-to-date.

For MOHCD, greater leasing agent efficiency was good—faster processing times meant less waiting time for residents—but accuracy was even better. We helped decrease errors and increase detailed reporting by making it simpler for leasing agents to track progress and update applicant statuses. Via a sticky sidebar in the application view that offered a subtle reminder to agents to save frequently and brought status updates and comments front-and-center, rather than leaving them buried at the end of a long page, we ensured a clean transfer of information to MOHCD staff.

A new popover component supplied status history information without requiring a dive into the detail view.

In addition, we helped both agents and staff via a new UI component: a popover that showed status history at the list level. Now both parties could easily see the latest updates without having to dive into individual detail views. This saved time and ensured everyone stayed on the same page regarding each application at every step of the process. All of these new features were extensively prototyped and tested with our users to ensure the most usable outcome.

Having a component library allowed us to deliver value to agents and staff as quicly as possible.

Worth noting is the component library I maintained for the Housing team, managed via Figma (design) and Fractal (HTML, CSS). This design system in miniature allowed us to move fast while maintaining UI consistency across the platform. Using existing components tested in the real world and thoughtfully updating the library as required allowed us to implement the design changes here quickly, improving the lease-up process for all parties with lightning speed.

Investing in components gave us increased velocity. Investing in research pointed us to solutions that reduced toil and increased accuracy across the board. Also, and as importantly, research allowed the SF Digital Services team to create even stronger relationships with its stakeholders both within SF City and County government and in the community. A commitment to building with our users, rather than just building for them, enabled our success.

 

← Back to Work