Sasha Bruce Youthwork

UX Research and Design

Sasha Bruce Youthwork is a nonprofit organization in Washington D.C. that provides shelter and prevention services for homeless youth up to age 24. For one week, we volunteered our time to work in Washington D.C. and conducted user research in order to design a new mobile landing page, that fit particular constraints as well as stakeholder needs and existing branding, for clients to learn more about the housing process and their options.

Project type: Team of 2

Role: Product Designer, UX Consultant

Project length: 1 Week | February - March 2022

Tools: Adobe XD, Google Suite, Miro

View Final Report

The Project

In our initial overview of Sasha Bruce’s website, mission, and needs, I noticed that there was a significant lack of information that was oriented towards providing youth clients with their options. I pitched a project to design a mobile landing page connected via QR code to a flyer, so that clients could better understand their options in emergencies.

The stakeholder mentioned that this was a huge need they should address, and enthusiastically agreed to this project.

The Scoping

Initially, we met with the stakeholder to better understand Sasha Bruce Youthwork’s history, offerings, mission, clients and their needs, and problem areas.

After condensing and discussion our notes, we discovered that homeless youth in Washington D.C. have special needs - different from both other homeless populations and other youth. In particular:

Homeless youth (11-24) often are afraid to be seen as “homeless” by their peers, and do everything to hide this fact and separate themselves from the homeless community. This is a particularly salient issue for college homeless youth.
They are distrustful of government programs as well as other general adult homeless services
They are are looking for a “homey” environment in the absence of their own
Although they have access to mobile devices, they have limited technology resources and access, and often have limited data, internet, and bandwidth, often using prepaid smartphone plans.
There is limited knowledge of certain Sasha Bruce Youthwork shelter offerings, and they are underutilized, including venues like Olaiya’s Cradle and Independent Living.

Given these constraints, we started by creating a project roadmap - with such little time it was imperative that we organized our work in a way that made sense. Then, we began determining a solution’s goals, affordances, and constraints.

The Needs

It is estimated that although 95% of homeless youth have smartphones, their limited access to data requires a site that is mobile-optimized for a small phone, loads quickly with minimal bandwidth used, and appeals to their desire to not be seen as “homeless”. Additionally, youth need to be directed to the best option for them, whether that be prevention, drop-in services, disability services, pregnancy services, family services, and more. Finally, users are not familiar with location names, so including the services and neighborhood locations is essential.

The Problem

How might we allow homeless youth, who do not understand the system and urgently need a place to go, to find and utilize the right Sasha Bruce Youthworks offering for their needs?

The Goal

Create a Sasha Bruce Youthworks website landing page, connected to a flyer, that targets service users rather than stakeholder donors and orients them towards the right service or shelter. This landing page should be lightweight and quick-to-load, friendly and hip, and have information organized in a logical manner.

The Research

Empathy Research

From our stakeholder interviews and organizational research, I created personas for the two major users of Sasha Bruce’s services in order to better empathize with their backgrounds and needs. One is a college aged client in need of housing, the other is a minor who is in need of housing and services.

From these personas, we created user journeys and flows to understand how users might navigate through the landing page in certain contexts. Our user journey focuses on a youth client. This client, using public wifi or limited cellular data, Googles “Sasha Bruce” after hearing about the center from an outreach worker, or seeing it mentioned on a flyer.

This landing page can be accessed via:

QR code on flyer
Google search
A banner at top of the main site

After accessing the page, the following information is available first:

A 24/7 hotline
A notice of where to go for help, including locations, hours, and more
A map of Safe Place sites

Then, the page displays what to expect at the drop-in center:

Wifi
Food
A place to stay
Access to services

What suite of services are available post-admission:

Transitional housing
Healthcare
Long-term housing
Professional and educational support

Competitive Analysis

To better assess the parameters of the proposed landing page, our team conducted qualitative research into the various adjacent options available to homeless youth in other major metropolitan areas.

We found:

Government Transitional Living Program for Homeless Youth
Includes a wizard so users can quickly find out their eligibility
Ali Forney Center
Great site, very well-branded; just a bit too much in the way of text
Covenant House
A badly designed website, but is search engine optimized and shows up at the top of each Google Search. Also has a web scheduling option available, making it easier for users to know when they can show up.

From these findings, we better understood best practices in content organization from similar organizations, and what features might be helpful to include, such as a wizard, scheduling system, and emergency banner options.

Finally, we worked to finalize the content needed on the site, and structured it into an organization that made sense for clients’ most urgent needs.

The Structure

We worked to finalize the content needed on the site, and structured it into an organization that made sense for clients’ most urgent needs. We highlighted content that both Sasha Bruce Youthwork wanted to prioritize, as well as content that solved problems for users that we noticed in our interviews. We wanted to ensure that users could quickly access services in an emergency, hence the headline and the in-page navigation bar (as it was a long single-page design). The below is our text-based initial wireframe.

Site Structure:

TITLE

HEADLINE

(suggest Wizard for later iteration)

In-page nav bar (drop-down)

-Emergency Housing

-Transitional Housing

-Long-Term Housing

-Other Resources

-Contact Us

DROP-IN CENTERS–STATIC

(Do you need….a warm shower, a hot meal, wifi, health services, or just a break?)
“To access services such as transitional or long-term housing, stop by one of our drop-in centers”

List contains address, hours, phone number

Barracks location is listed first

Downtown location is listed second

PGC is listed third

Others in order of convenience

EMERGENCY HOUSING

(Do you need…a safe place to go for the night?)

(accordion)

Emergency Shelters (no images)

Name (neighborhood - age)

Sasha Bruce House (11-17)

-What to expect (we provide short-term housing for etc etc etc. Etc is available on-site in (neighborhood). If you are under 18 and need help right now, please call (number)).

-Include a map

Reid House (18-25)

-What to expect

TRANSITIONAL HOUSING

Our Transitional Residences (toggle accordion with images if they have them; neighborhood optional); structure goes (What to expect / a visual / features / how to access.)

(Neighborhood) – Independent Living (18-24)

-What to expect / a visual / about the space / how to access.

(Neighborhood) – Re*Generation House (18-24)

-What to expect / a visual / about the space / how to access

(Neighborhood) – Transitional Housing (Housing for families)

-What to expect / a visual / about the space / how to access

(Neighborhood) – Passages (Housing for people with disabilities, 18-24)

-What to expect / a visual / about the space / how to access

(Neighborhood) – Olaiya’s Cradle (Parents ages 18-24, and their children

-What to expect / a visual / about the space / how to access

LONG-TERM HOUSING

Our Permanent Residences (toggle accordion); are these separate locations? Need to work on the content architecture

(Neighborhood) THRIVE House Rapid Rehousing

-What to expect / program description / how to access

(Neighborhood) Permanent Housing

-What to expect / a visual / how to access

OTHER RESOURCES

Education & Scholarships:

-Kaempfer Transformation Project

-What to expect / program description / how to access

-Out of School Time Program

-What to expect / program description / how to access)

For Families:

-Family Support Program

-What to expect / program description / how to access)

-Family Success Center

-What to expect / program description / how to access)

Next steps

(life skills and education)

Don’t know where to start?

(web form)

Any questions?:

(contact form)

Phone Number

Email Address

Scheduling Portal (if possible)

The Ideation

We started the prototyping process by ideating initial paper prototypes so that the pages were both well organized, hip, were implementable on their WordPress theme (which we spent time investigating on the back-end), and matched the branding and style of the rest of Sasha Bruce’s website. We had other sketches, but the below are the most salient ones. The final prototype pulled features from each of these sketches.