With the support of Exygy, San Francisco Digital Services and the San Francisco Mayor’s Office of Housing and Community Development launched a major update to their affordable housing portal. The portal, DAHLIA, helps housing seekers find affordable rental and ownership housing. Exygy supported this launch with engineering resources and shared components. This launch marks a continuation of our work on DAHLIA that began with its inception in 2015.

The goal of this launch was to bring DAHLIA one step closer to removing AngularJS – a now deprecated web development framework – from our public-facing application and replacing it with a newer framework: React. This new framework allows the DAHLIA team to both develop with greater velocity and utilize the newest web technologies available, resulting in new features being deployed quicker and with higher impact. This migration has been an ongoing project; we have already migrated the home page and listings page, and the next phase was the Listing Detail page and Get Assistance pages. Below, we describe the new capabilities thanks to this launch.

A Fully Rebuilt, Accessibility-Focused Listing Detail Page

The defining feature of this release is the completely rebuilt Listing Detail page. This page - built entirely using React - placed accessibility at the center and leveraged Exygy’s shared component library: Bloom UI-Components. 

From the backend to the user interface, every aspect of the Listing Detail page was carefully considered to ensure that we were able to support a wide range of listing types. When a housing seeker first visits the page, they will notice that listings can now support multiple listing images, allowing them to browse photos of the listing they are applying for. Scrolling down, they will see the rebuilt pricing table. 

Rebuilding the pricing table was one of the most complex tasks with the Listing Detail rewrite due to the number of different listing types we needed to support. Recognizing this, the pricing table is assembled in the code with a much more atomic style. Now, when a new listing type or pricing table style is introduced the DAHLIA team can make those changes and get them to housing seekers quicker.

Every bit of information on the pricing table user interface was carefully considered to ensure that everyone who was eligible knew that they were. For example, the table headers quickly help housing seekers identify if their income qualifies them for the listing.

The pricing table is just one of many features on the Listing Detail page. Scrolling further down, housing seekers will be able to quickly determine more eligibility requirements, preferences, and features of the listing. All of these features were built with accessibility at the center, ensuring that everyone is able to find a home.

For the team building DAHLIA into the future, this redesign was built with flexibility in mind. Previous versions of the Listing Detail page were rigid and used outdated technology. This update changes that. With React and Typescript, the team is able to launch features, build custom listing types, and introduce new preferences at a far quicker rate.

In summary, every aspect of the Listing Detail page was carefully considered to ensure that DAHLIA is getting listings to the public quicker than ever while empowering housing seekers with the most up-to-date, relevant information. 

Intuitive and Actionable Get Assistance Pages

The rebuilt “Get Assistance” pages were another feature of this release, and they play a vital role in the application. There are times when a housing seeker needs more support than what DAHLIA is able to provide, and the Get Assistance pages help them find other sources of support.

There are four pages in total: Housing Counselors, Document Checklist, Additional Housing Opportunities, and a main Get Assistance landing page.

The Housing Counselor page features new information and a filter allowing housing seekers to quickly find counselors that support their individual needs.

The Document Checklist page works alongside the Listing Detail page to quickly inform applicants of what documentation they need to submit in order to claim a preference. \

Lastly, the Additional Housing Opportunities page supports users by directing them to other housing resources that are available from the City as well as outside organizations. 

All of these pages feature more up-to-date information that is both intuitive and actionable. These pages support one of the core values of the DAHLIA team: There should be no “dead ends” when seeking support for critical services.   

Infrastructure

One of the main reasons for this upgrade was to move away from AngularJS, a framework that was officially sunsetted last year. The framework utilized technologies and languages that were unfamiliar to most engineers. This was a significant point of friction for feature development.

Now, the updated pages leverage React and Typescript,  an architecture that is robustly supported by the engineering community. Behind the scenes, old dependencies and patterns were also replaced, resulting in improvements to the applications build and test systems. 

An application is only as good as the infrastructure that it uses, and DAHLIA is no different. These technologies serve as the bedrock of the application, and allow the DAHLIA team to build into the future, faster.

A Future with No Dead Ends

This update represents a massive investment into the future of DAHLIA, and further unlocks the potential for this critical application. With it now launched, the team can now begin supporting new listing types and preferences that will help more individuals find housing. Building upon the infrastructure improvements, the team can now accelerate the removal of AngularJS from the rest of the application and launch new features with greater velocity.

At Exygy, it has been a hugely rewarding experience working with the SF DAHLIA team. Everyone on the team is committed to supporting the people of San Francisco, and now, empowered by this update, they can provide that support even better. 

If you’d like to learn more about our work on DAHLIA, check out our case study “Reimagining the Affordable Housing Process in San Francisco.” 

If you’re interested in Exygy’s broader efforts to digitize access to affordable housing, explore exygy.com/housing.