UX/UI Case Study: Los Angeles Homeless Services Authority

OVERVIEW

The Los Angeles Homeless Services Authority (LAHSA) manages funding for homeless initiatives. Every year, LAHSA coordinates the Greater Los Angeles Homeless Count, a census of the homeless population that relies on the help of 8,000 volunteers.

ROLE

Collaborated with 2 UX design students with a personal focus on user/client research, information architecture, early ideation, and project management.

DESIGN GOAL

Make it easy for web users to learn about the Greater Los Angeles Homeless Count and sign up to volunteer.

DELIVERABLES

user/client interviews, user persona, sitemap, UI style guide, user flow, sketches & wireframes

TIMELINE

2.5 weeks (Fall 2018)

TOOLS

Sketch, InVision, Trello

THE PROBLEM

Volunteers in their 20s-30s want to help the homeless population in their community, but struggle to find an impactful opportunity that fits within their schedule.

DESIGN QUESTION

How might we help volunteers make an informed decision to register for LAHSA’s Greater Los Angeles Homeless Count so that LAHSA may also quickly reach their goal of 8,000 volunteers?

RESEARCH

Understanding the Problem Space

Website Audit

A website audit was conducted to examine the current web experience for a user trying to register for the Homeless Count. We looked at content, content structure, and user flow to understand how information was organized, framed, and communicated.

Client Research

We spoke with the West LA Community Engagement Coordinator from LAHSA to better understand the Homeless Count from an inside perspective. What were their challenges? How did they recruit 8,000 volunteers every year? How did they address safety concerns?

User Research

User interviews were conducted with 4 male individuals ages 23-41 who occasionally volunteer, but aspire to do more. The goal was to verify assumptions about the user, learn about the user’s relationship to volunteering, and gauge his attitude towards the homelessness issue.

Proto persona shows a volunteer who wants to make a difference in his community

Proto Persona: The user wants to feel like his is making an impact.

RESEARCH INSIGHTS

Major Findings

Signing up is complicated

No clear path for volunteers to get involved with the Homeless Count
The website targets homeless service providers and people seeking homeless services — not volunteers
Sign-ups are collected on a different website — TheyCountWillYou.org

Users have limited free time

Users wish they could help, but have limited free time to volunteer.

Potential volunteers experience a lack of information

Users generally understood the complexity of homelessness as an issue, but responses varied with their understanding of what would be expected of them.

LAHSA struggles with a delay in sign-ups

Although volunteers only needed to commit 3-5 hours, many do not sign up until the week or so before.

LAHSA's website audit shows a crowded website navigation and information architecture

USER PERSONA

Understanding the User

HESITATIONS ABOUT VOLUNTEERING

Safety
Lack of clarity about what to expect

HOW THEY LEARN ABOUT OPPORTUNITIES

Close social networks: work, school, church, social media

MOTIVATIONS FOR VOLUNTEERING

Personal/emotional connection
Interest in helping the community
Peer pressure from social networks

CHALLENGES TO VOLUNTEERING

Lack of free time
Less of a personal connection cause
Lack of awareness of programs

DEFINE

Area of Opportunity = Communicate More Clearly

Issues: Important information is hard to find

The crowded information architecture and scattered details created ambiguities about volunteering for the Homeless Count. The existence of two websites also unnecessarily complicated a simple user flow.

Hypothesis: better communication + one website = more volunteers

If LAHSA could clarify the role of a volunteer as well as clearly communicate the importance of the Homeless Count, then Victor would see that choosing to volunteer with LAHSA would be an easy way to make a big impact with minimal time and effort. We also hypothesized that consolidating both websites into one would help LAHSA achieve their volunteer count more quickly.

The value proposition shows that LAHSA can register more volunteers with better communication of information

Value Proposition: Better communication would help volunteers see the value of participating in the Homeless Count.

CONTENT STRUCTURE

Setting New Structural Standards

Restructure the site map

We used the card sorting method to take an inventory of the navigation items, identify content patterns, and consolidate categories.

Implement content chunking

We organized information into sets of 3 to make sections visually easier to scan and conceptually “easy as 1, 2, 3.”

Simplify the user flow

We reduced the number of clicks to navigate to the Sign-up Page from 4 to 1.

New site map: clear sections, user-focused

In the new site map, there is a designated tab for service providers, people seeking services, and volunteers - creating clarity and user focus.

The new user-centered sitemap increases clarity with fewer navigation items

STREAMLINE

Keep content on one website (LAHSA.org)

SIMPLIFY

Break sign-up process into 3 easy steps

CLARIFY

Define role of volunteer & address concerns

Structural Design Concept: Make information available and easy to understand.

VISUAL DESIGN

Brand style guide: visualizing the new brand voice

We developed a new brand voice to make LAHSA more motivating, engaging, and unifying. Team member, Celina Munoz, translated the brand voice into a full UI Style Guide.

WIREFRAMING

Establishing Structure & Function

We quickly turned sketches into mid-fidelity wireframes that would be easy to user test in InVision. The wireframes focused on page elements that would make the redesign functional and easy to use. The task was to get an understanding of the Greater LA Homeless Count and click sign up.

LAHSA wireframes streamline the user flow, simplify content structure, and clarify information

user testing

Ensuring the Experience Makes Sense

We user tested mid-fidelity prototypes with 3 potential volunteers focusing on their understanding of the Homeless Count. Their feedback influenced changes in the high-fidelity prototype such as incorporating the organization’s mission statement.

PROTOTYPING

High Fidelity Screens

We created high-fidelity mockups using UI elements from our updated brand style guide.

1 - Home Page

High-fidelity mockup of LAHSA's home page quickly provides more information about the Homeless Count

2 - Homeless Count Page

High-fidelity mockup of the Homeless Count Page answers questions and shows users why they should volunteer

Mockups: Volunteers quickly learn more about the Homeless Count in 1 click and without leaving LAHSA.org.

PRESENTATION to lahsa

Making Changes to LAHSA.org

We shared our research insights and prototypes with the Los Angeles Homeless Services Authority. Representatives stated that our findings validated discussions that they’d had internally. Their team moved forward with changes to their website that helped clarify the hierarchy of information and call to action for volunteers.

Updates to LAHSA's website show changes in content structure to improve usability

Reflection

Balancing the needs/goals of the user and the client. Both the volunteer and LAHSA wanted to help the homeless population, but had different obstacles to achieving that goal. This project was about listening to both groups and finding a balanced solution.

Collaborating under a tight deadline. Within 2.5 weeks, our team only met up 5 times. In order to meet our project deadline, it was important for us to set deadlines for key deliverables. Through mindful project management, we were able to review and discuss our progress, make decisions, and establish new goals. We communicated regularly on Slack and tracked assignments on Trello.

Communicating a complicated organization clearly. It was a challenge to weave all of the stray information about LAHSA and the Homeless Count into a clear and concise redesign. Content chunking and site map reorganization were crucial in structuring content more clearly for our user.