Redesign of the Government's Homelessness and Supportive Housing Website

Designed for desktop and mobile, to help users find the right shelters and services for their needs.

Tools

Sketch

Adobe Illustrator

Adobe Photoshop

Project type

Product design / Concept, research, high-fidelity prototyping, UX/UI design, usability testing

Content design

My role

Website UX/UI

Mobile UX/UI

Other roles

Solo project with website UI/UX review from UI/UX Designer, Ryanne Zertuche

Overview

The problem

On the Government’s Homelessness and Supportive Housing website, users can’t find the right shelter information and resources for their specific needs, adding frustration to an already stressful situation.

The solution

A website redesign with increased accessibility to help different types of users quickly locate services and shelters specific to their needs, with an increased understanding of the shelter reservation process. 

The deliverables

Acknowledging this stressful time for users, I designed for:

• Empathy, clarity, and ease of use: Revised information architecture, used supportive tone and language
• Transparency: Created a shelter database for users to view all of their options

• Inclusion: Created a qualifying questionnaire to right-fit users with services and shelters, a live chat option to offer support, and designed with WCAG Accessibility Standards

• Readability: Mobile UI design for developer-handoff efficacy

I wanted a more impactful solution than just empathy alone

Prior to this project, my audiovisual installation on homelessness successfully achieved my goal of inspiring empathy from my audience. After the show, however, I realized that empathy wasn’t actionable enough in solving the problem of homelessness.

So I dove deep in secondary research on homelessness

I started with the most comprehensive data—an annual Government-led statistical survey on homelessness in San Francisco that defined the problem, the people, and the causes—and found some surprising insights.

I also reviewed 7 publications covering problems associated with homelessness, such as increased health risks, and potential solutions to homelessness.

Insight #1

Inadequate housing can shorten a person’s lifespan by 36 years.

Insight #2

The no.1 cause of homelessness is job loss, while the no.1 barrier to employment is having no permanent address.

Insight #3

If there are homeless shelters in San Francisco, why are there at least 5,180 unhoused?

But I wondered, how do users feel—are they actually getting the help they need?

Research insights led me question the quality of homeless shelters, so I reviewed all 1,272 user reviews of homeless shelters in San Francisco to identify possible pain points.

I also knew that speaking directly with users would provide a deeper level of insight & empathy. A bit daunting at first, but I mustered up the courage to guerrilla interview 5 people in San Francisco.

“This place treats the homeless like they are less then human...I stood outside for five hours once, before I just left. This is the main shower place for the homeless, but they will make you wait outside in the cold and the rain for hours before you can take a shower.”

—User review of a homeless shelter

“You really have to hustle just to get your basic needs, to eat, to sign up for a shelter bed, it’s constant running. It creates this dependency where you’re not able to do anything other than pursue meals and a place to sleep.”

—Excerpt from a guerrilla interview with a person experiencing homelessness

I found that user reviews reflected pain points of homeless shelters, & guerrilla interviews revealed the fractured process of reserving a shelter

...but wait. Is this problem really important?

This problem matters because it has a business impact

Homelessness costs taxpayers money. Malcolm Gladwell wrote in a 2006 New Yorker article about “Million-Dollar Murray”, a homeless man living on the streets of Nevada who cost the state and taxpayers $1 million in unpaid emergency department and medical costs. (1)

An economic impact

Google has a total of 135,300 employees. Imagine the economic potential of 151,278 people. (2)

And a social impact

The homeless suffer from poor quality of life reduced to fulfilling only physiological needs of food and shelter.

"A guy complaining about a homeless person said, 'homeless people are like pigeons, you just have to act like they don't exist'."

—excerpt from an interview with Thomas, experiencing homelessness

Now that we know the impact of this problem, let's uncover opportunities to improve the user's shelter reservation experience with a journey map

I discovered 5 main pain points, but the Government’s website was the most important and feasible problem to solve

Usability testing—with individuals ranging in age and technical ability—validated the Government's Homelessness and Supportive Housing website as confusing, frustrating to navigate, and the shelter reservation process unclear.

As the initial interaction for someone entering homelessness, the website can set the right expectations and save users time and travel (solving another pain point).

After analyzing the website further, I focused on 4 main design improvements

• Improve information architecture, hierarchy, visual design, & layout for ease of use

• Increase accessibility and support different types of users

• Clarify the shelter reservation process with detailed instructions

• Create a shelter database

And metrics of how success will be measured

• Users will understand the shelter reservation process & required user-specific steps to complete

• Decreased time for users to complete a task

• Users can find the shelters that they qualify for

• Increased readability on desktop & mobile

So let's take a closer look at specific problems on the website and potential solutions

Problem #1

The homepage doesn’t give enough information, wasting the user's time

The homepage gives fragmented information, requiring the user to click and scroll through multiple pages just to find the information that they’re looking for. 

Solution #1

I redesigned the homepage to concisely define the shelters, who qualifies, and services offered

🔷👇🏼

Vertically scroll in the laptop below to view the homepage.

Problem #2

Information communicated through a one-way format limits accessibility

Users range in age from the youth to elderly adults to the disabled. The website assumes that all users can comprehend long lines of 12pt font text, with no additional assistance offered.

Most individuals experiencing homelessness have limited 1 hour library access to a computer, or free mobile phone with data. What happens when a user needs to find a shelter immediately, and views this website on their phone? 

Solution #2

Increase accessibility with a live chat option and a qualifying questionnaire

Each page now offers a live chat option for quick access to help. A questionnaire, accessible at the beginning and end of the homepage, asks basic demographic and shelter reservation process questions to right fit users with shelters and services. 

Questionnaire results include a summary and detailed action items to guide users throughout the shelter reservation process.

I used an inverted-pyramid writing style (first summary, then details) to help users better comprehend their results.

The summary is listed on all of the action item pages for easy reference and to minimize cognitive load.

Users are given detailed yet concise action items, user-specific shelter recommendations, and a comprehensive plan towards self-sufficiency beyond the initial emergency shelter reservation. White space and images are used for easier readability.

For convenience and ease of use, a map and resource center cards are located on the same page. Users have the option to type in an address, interact with the map, or preview and compare resource centers.

🔷👇🏼

Vertically scroll in the laptop below to view the features on this page.

Problem #3

Shelter information scattered on multiple pages reduces user autonomy

Navigation Centers, Transitional Housing, and Temporary Shelters are all housing solutions for the homeless, but it’s unclear which housing solution is the right fit for each individual user.

Shelters are scattered on different pages, making it difficult for clients to find all of their available options, or even find a shelter they qualify for. This wastes the user’s time and reduces autonomy over their own choices.

Solution #3

One database for users to quickly find shelters specific to their needs

Informed by Yelp and Trip Advisor’s UI/UX, users can filter results based on their demographics and services they need. Users will know which shelters they qualify for prior to physical travel, saving time and frustration.

Each shelter card includes Google user reviews, shelter type to familiarize users with the different types of shelters, most popular services offered (pulled from user reviews), the ability to save a shelter to their profile, and a CTA button to see more.

Problem #4

Text-heavy pages with content not relevant to users wastes their time

Text-heavy pages inform the general public rather than efficiently help users with a clear process to locate and reserve a shelter. This can be problematic for users on mobile, on-the-go, or working within a limited time frame such as an hour of computer use at a public library.

Solution #4

Only include information that's valuable to the user

I reduced the text to only include information for individuals experiencing homelessness, and clarified the process for each shelter type.

I also used content and tone to communicate empathy and care

Users should feel supported during this stressful time of need. Copy is not only re-written in simple, clear, and concise sentences, but with a caring tone of voice and warm color palette.

And a mobile version to ensure that design goals of readability, clarity, and ease-of-use were maintained

Users have access to free phone service with data. Instead of pinching and zooming a desktop website on their phone, I designed a mobile version for each webpage to support readability and increase accessibility—especially when handing off designs to developers.

To avoid lengthy vertical page scrolling, I separated the summary view from the details pages, and added a top navigation menu for quick access to the summary.

Paragraphs are also separated into smaller chunks for easier readability.

For the shelter database page, shelter cards and number of filters shown are simplified to better fit mobile screen dimensions.

🔷👇🏼

Vertically scroll in the laptop and phone below to compare and contrast desktop and mobile versions.

All of these improvements sound great—but what do users think? and another designer's feedback?

To uncover problems in my designs and discover opportunities to make improvements, I usability tested my prototypes with 5 people ranging in age from 16-68 to best reflect the demographic makeup of the homeless population.

I also shared my initial prototypes with fellow UX/UI designer, Ryanne, to get her perspective and improve my designs.

With user feedback, I improved shelter card information and layout

The original shelter card only listed the address, which could have created a negative user experience. If the user traveled to the resource center without clicking ‘See more’ to view the location’s hours and shelter reservation process, their time would have been wasted.

Testing also revealed that the vertical-scrolling shelter card layout limited the ability to visually compare resource centers side by side—so I revised the UI in favor of a horizontal-scolling card layout.

Questionnaire results

One of the initial goals was to reduce the amount of click-throughs for the user as much as possible. However, presenting all of the questionnaire details on one page resulted in cognitive overload.

For a better user experience, I separated details based on the major stages in the shelter process. I also maintained a consistent layout on each page by presenting details, followed by an interactive map and shelter card information.

And clarity of content

For some sections of copy, users were unclear or needed more information. For the shelter reservation process, I revised the text to provide more explicit details.

And through collaboration, I increased accessibility 

I asked a fellow UX/UI designer, Ryanne Zertuche, to review my high-fidelity prototypes. With her feedback, I increased accessibility and ensured that the website’s color palette and text styles met Web Content Accessibility Guidelines (WCAG). I also used Adobe’s color checker to make sure that my designs were color blind safe.

Ryanne’s accessibility recommendation led me to improve other aspects of the user experience. To better communicate information in a visually engaging way, I replaced text buttons with larger, easier to click icon buttons on the shelter database page.

Shelter card icons have similarly been improved to increase communication and accessibility. Housing type was added to familiarize users with the different types of shelters. Phone number and address have been removed to avoid unecessary communication and travel, forcing the user to click ‘See more’ and understand the shelter’s specific reservation process.

But just to be sure, I conducted a second round of user testing

I conducted a second round of usability testing with an additional 5 users, and referred back to my initial goals of the website revision to assess success.

4/5

Understood the qualifying questionnaire results

5/5

Decreased time to complete a task

5/5

Understood the different types of shelters

5/5

Shelter database was clear & easy to use

4/5

Website was easy to read on both desktop & mobile

So, how would we measure real-world success post-launch?

To assess real-world success of the new features, key performance indicators would include:

💡👱🏽‍♂️👩🏻‍🦳

Increased user knowledge of the shelter reservation process

🏘️

Increased user knowledge of the different types of shelters, and what shelters an individual qualifies for

📋☑️

Of users who take the website questionnaire, an understanding of their specific action items to complete

Along with feedback surveys from users, resource center employees, and shelter employees, using a heatmap or website tracking tool (Google Analytics, Hotjar) to measure user behavior on the website would help assess where users spend the most time—which could be related to what’s most important to them or highlight a pain point.

💡👱🏽‍♂️👩🏻‍🦳

Increased user knowledge of the shelter reservation process

↓

How might we test this? Feedback survey for website users captured post-visit and at resource centers, and interviews with employees.

↓

Example questions for users: What was the reason for your visit? Did you find what information you were looking for? Was any additional information useful? confusing?

Example questions for employees: Is there a change or increase in shelter knowledge and the shelter reservation process among users?

🏘️

Increased user knowledge of the different types of shelters, and what shelters an individual qualifies for

↓

How might we test this? Feedback survey for website users captured post-visit and at resource centers, and interviews with employees.

↓

Example questions for users: From the website, are you aware of the different types of shelters? Do you know which shelters you specifically qualify for?

📋☑️

Of users who take the website questionnaire, an understanding of their specific action items to complete

↓

How might we test this? Quantitative survey utilizing Likert scale + feedback for quick capture and assessment of questionnaire.

↓

Example questions for users: On a scale of 1-5, were the questions easy to understand? Why or why not? On a scale of 1-5, were the questionnaire results easy to follow and understand? Why or why not? On a scale of 1-5, how helpful was this questionnaire and the action item plan for you? Was anything confusing?

These are the things I learned

💬📊

Both quantitative and qualitative data helped narrow the problem

Quantitative data framed the problem and highlighted pain points, while qualitative data resonated the most. Speaking directly with users, hearing their stories and problems they face, truly guided me throughout the project. I couldn’t have done it without their openness and honesty.

👩🏽‍💻🧑🏻‍💻👨🏿‍💻

Usability testing was extremely important throughout the design process

User testing of the website before re-design validated existing pain points, and testing of my high-fidelity prototypes improved its usability.

🫱🏽‍🫲🏻

Getting feedback, even from just 1 colleague Ryanne, greatly improved my designs

Getting a second pair of eyes on this project improved the accessibility of my designs.

These are what I’d do differently

➕💬

More research with different users and stakeholders

Though limited by Covid at the time, interviews with navigation center case workers, shelter employees, resource center employees, and homeless individuals at shelters would be ideal to identify the most important problem to solve.

👩🏿‍💼🧑🏽‍💼👨🏼‍💼

Collaborate on a team

I gained valuable experience working in all aspects of the design process, but I thrive better working in a team environment bouncing ideas and questions off of others vs. in my head. As different individuals bring different perspectives and skills, a better problem could’ve been solved with a more impactful solution.

🖼️

Real content is not necessary to communicate ideas

All of the images and copy used for the re-design are from real homeless individuals and shelters in San Francisco. Using stock photos and copy would’ve saved time while still communicating the ideas of the website re-design.

What's next?

Based on results from the KPIs, I would either iterate on the website or conduct more research with more stakeholders to identify (within feasibility) if there’s a more impactful problem to solve—ideally on a team.

Thank you!

This project wouldn’t have been successful without the individuals experiencing homelessness that I was fortunate to interview, and fellow designer Ryanne Zertuche.

I think you're pretty awesome for making it to the end of this case study. I appeciate your time & thanks for stopping by 😊

Sources

(1): Garrett, Daniel G. “The business case for ending homelessness: having a home improves health, reduces healthcare utilization and costs.” American health & drug benefits vol. 5,1 (2012): 17-9.

(2): US Interagency Council on Homelessness