Banner photo of Front Steps Website Redesign.

Front Steps Website Redesign

Front Steps is a non-profit in Austin, TX. It focuses on solving homelessness in the greater Austin area. In this project, our team designs a resource roadmap for a person experiencing homelessness.

View Desktop Prototype View Mobile Prototype
Scope: Team project where I focused as a UX Researcher, UI Designer, and Project Manager. This project took place over the span of 2 1/2 weeks.
PROBLEM

One of the most effective ways of solving homelessness is through prevention. Front Steps' prioritizes solving homelessness by equipping those experiencing it with resources. Yet, their target users are not utilizing the website as a resource to do so.

SOLUTION

We recommend creating a roadmap to help guide people experiencing homelessness to the resources they need immediately.

RESEARCH
FrontSteps Homepage As-Is
FrontSteps Homepage As-Is

Our team worked with a lot of assumptions until meeting with our stakeholders. We were informed that most of the information on the website needs to be updated. This meant that we were effectively working with a blank slate to breath new life into the site. Below are their top 3 criteria:

Stakeholder Insights. The websites should: cater to those experiencing homelessness, look clean and professional, and images should be positive and respectful.
Stakeholder Insights

Front Steps wants to focus on people experiencing homelessness through their online presence. So we looked to the data gathered from our user interviews that we conducted downtown.

User Interview Insights. 1) People experiencing homelessness have a hard time finding housing and a job. 2) Their time is planned around resource avaliability. 3) Basic needs are found via word of mouth. 4) Their motivation is getting out of homelessness. 5) Users utilize their access to library computers to find jobs and housing.
Insights from User Interviews
DEFINITION

We chose someone who's been living in a longer state of homelessness to get the big picture of their hardships, as they apply to those in less severe cases.

User Persona showcasing Hugh. Hugh is 60 years old and has been homeless since he was 19. He believes the system is against him, and there's no one to help him in his situation. He's motivated to get out of homelessness. To do this, he has goals of finding housing and a job. His current painpoints are being on a bunch of waiting lists and having skills but having no success in getting a job.
User Persona

Homelessness is best solved through prevention, so we focused on getting people to the resources they need in our user task flow. In a website context, the most effective way we can help is by improving SEO.

User Task Flow: I'm experiencing homelessness. Shows two ways a person can be experiencing homelessness and a roadmap to resources they can access.
User Task Flow
ITERATION

Sketches

Sketches during the ideation phase.

We referred to other non-profit sites as inspiration before sketching. We ended up with two homepage designs, an immediate help page, and a job training page that reflects our user flow. In order to move forward, we conducted an A/B Test on the homepage.

A/B Testing. This test looked into how a user percieves context with icons. We thought that more context would provide the user with data they need to move forward. However, we found that multiple uses of the same icon was confusing. There were the same icons on the same page but with different meanings. Ultimately, we moved forward with a condense page view and no icons to prevent confusion.
Iteration 1: Insights from A/B Testing

Branding

Before transitioning to hi-fi, I created a style guide. I used a minimal color pallete to keep things simple and clean as requested by our stakeholders. Additionally, I selected respectful imagery that's symbolic of the context.

Style Guide. Our base colors are white and blue with yellow accents. Pictures used are there for symbolism in an effort to be respectful of those experiencing homelessness.
Front Steps' Style Tile

Testing & Improvements

In the next iteration, guerilla testing helped us understand where the gaps were.

Changes made from wireframe to hi-fi prototype. We resolved issues with navigation by changing wording and layout. 'Experiencing Homelessness?' was changed to 'Need Help?' to show that we are genuinely invested in helping. Placement of text was moved closer to the rest of the main navigation so that it's easier to find. We also added a page header to 'Immediate Help' to provide the user with page context.
Iteration 2: Issues and Changes Made

We had one more round of user tests and wanted to get a representative user. Luckily, we found someone at the downtown library. He provided the most valuable feedback by shedding light on our user’s mental model.

Second iteration cycle with a representative user. Four main changes were made on the 'Immediate Help' page. 1) Resources were reordered. It turns out that it's easy to find food in Austin, making it a lower priority. 2) Hours of operation are needed since users operate on a resource time table. 3) Our user's eyes are sensitive, so we used a softer white to lessen the contrast. 4) A designated 'Home' button was needed since it's not clear if everyone knows to click on the logo to navigate home.
Iteration 3: Changes Made from Target User Test
RESULT
Responsive view of Front Steps: Homepage, Immediate Help, and Job Training View Desktop Prototype View Mobile Prototype

Final Thoughts

  • In this redesign, we helped Front Step realign with their organizational goals that will ultimately impact future funding. Good work is well recieved, especially when it's transparent. It speaks to a donor's trust in an organization.
  • What’s not showcased here is scope creep. We designed more screens in hopes of helping Front Steps realize their vision.
  • This was a difficult project because there are a lot of unknowns with homelessness. A lot of footwork and research were necessary to understand a mental model that’s not as well understood.
  • The next logical step is to see if there's a need for a visual time table to address our users' daily cognitive load.