Human Services Coalition — Designs to Democratize Housing

Timeline: Fall 2022, 3 months

Team: Cornell Hack4Impact — Designers: Jenn, Michelle, Mika, Project Manager: Amanda, Tech Lead: Eric, Developers: Louis, Kaden, Amy, Jiho, Daniel, James, Rhea

Goal: The goal of this project is to build a marketplace platform for Section-8 voucher users and service workers to easily find affordable housing in Ithaca.

Client: Human Services Coalition Ithaca

Important Terms

Section-8 vouchers: The housing choice voucher program is a federal program that assists low-income families, the elderly, and the disabled in finding affordable, safe, and sanitary housing in the private market. A housing subsidy is paid to the landlord directly by the Public Housing Agency on behalf of the participating family. The family then pays the difference between the actual rent charged by the landlord and the amount subsidized by the program. To be eligible for this program, people must show effort of search, thus a proof of search feature will be necessary for our design.

Fair Market Rent (FMR): FMR is used primarily to determine the payment standards for Housing Choice Vouchers. Ithaca’s FMR area is more expensive than 94% of other FMR areas.

The Problem

The process of finding affordable housing in Ithaca is extremely difficult. With the constant flow of students from Cornell University and Ithaca college, vacancies are uncommon and leases are relatively high compared to other nearby cities. The Human Services Coalition aims to help people find affordable housing in Ithaca and they asked for our help to create a solution.

Currently, when low income people look for housing they are paired with a service worker from HSC or partner organizations. Together, they will browse through different websites and call landlords around Ithaca to try to secure a lease, but they can’t do that well because:

1. Landlords don’t like Section-8 voucher users. When landlords find out that the renter will use a voucher to pay for rent they will no longer want to lease it to them and cut contact.
2. There are so many different websites to search through to look for housing in Ithaca.
3. Some of the websites still host unavailable listings so it is difficult to view what homes are actually available.

The Solution

A platform that displays available rentals for the homeless population where Housing Choice vouchers can be used. These rentals will be scrapped from housing sites on the internet or added to the platform directly by HSC staff or Tompkins County landlords. The platform will allow HSC staff to monitor eligible rentals and filter through these listings based on certain criteria.

User Research

After multiple interviews with outreach workers and employees from the Human Services Coalition, which included past members of the homeless community we found the following insights:

1. The primary use case will have admin users sit with non-admin users to search through housing listings on a laptop.
2. Factors such as location, proximity to public transportation, and school district are key in a users’ decision-making.
3. Admins will need to be able to manage profiles and look through search histories for proof of search. Admins will also need to add new users, update FMR values, extend profiles, edit and delete listings.

Competitor Research

After user research, we decided to look at what other websites and we discovered the following insights:

1. The map view is a useful tool that helps user’s learn about the property’s location, surrounding landmarks, schools, malls, and public transportation.
2. A rating system is helpful for users to learn about the quality of the property and the landlord
3. A comprehensive filter system is necessary for users to easily narrow down their housing search

Information Architecture

When creating new profiles, we asked our client what information they would want to gather other than the essential information seen above. They informed us that they won’t be using the site for that purpose but we could add the following non-required data inputs for our forms: First Name, Middle Initial, Last Name, Preferred Name, Gender, Race, Ethnicity, Birthdate, Email, Address, Phone Number, Preferred Contact Method.

Task 1: Create an easy-to-navigate user interface that helps users easily narrow down their search.

• Emphasize Filter System: sticky filter system on the left side of the screen with bubble pop-ups that can be deleted at the top of the screen
• Create a design that is easy to use: familiarity and traditional design features should be in mind

Final User Flow:

Key Takeaways:

This is the final design for the user side, where they have access to the landing page, listings, and their recently viewed listings. Some key design choice we made for this included:

1. Adding the search bar as a filter, in our earlier designs we placed the search bar in a separate place (on the opposite side or with the bubble filters). However, in our final design we decided to place in it the filter sidebar because the search bar acts as a filter for addresses. With the developers, we also decided that the search bar would only be for addresses because users can specify the other information through the filtering options already.
2. Adding a map to the listing page rather than the homepage. This allows for users to view more listings per screen but still have access to the map when they click the listing.
3. Location of filters and visual hierarchy. We decided to add the filters on the left side of the page because it is a common design practice and we stacked the filters based on importance.

Task 2: Design features that can help admin easily manage the site’s listings and users

Admins need to be able to manage profiles and look through search histories for proof of search. Admins will also need to add new users, update FMR values, extend profiles, edit and delete listings.

Edit and Delete Listings:

Update FMR Values:

Manage and Create Profiles:

Key Takeaways:

1. Button UI is important. We spent a lot of time playing around with the colors for each button but we realized that a certain color should match a certain emotion. Thus, we chose orange for call to action because it is the most vibrant color in our branding. Meanwhile we chose a blue outline for our cancel/destructive buttons.
2. Feedback is important to let users know that an action is complete. We designed several banners such as “FMR values successfully updated!,” “User successfully deleted!” and more. We also designed feedback for the filtering system, where users can see their chosen filters on the top of the page and they can easily remove that filter by clicking the x in the bubble.
3. Information hierarchy should be well thought out. It should take into account design standards and levels of importance to guide users through the webpage.

Task 3: Branding and UI Kit

Our client gave us 3 colors and 2 fonts to work with for the branding of the website.

Original UI Kit

And after multiple iterations we created the following brand UI kit:

New UI Kit

This project wouldn’t have been possible without the wonderful PM, Tech Lead, and Devs who worked so hard to turn our designs into a real product. We also would like to thank the other designers on Hack4Impact Cornell who gave us such valuable feedback during our weekly design crits.