Homeless Youth Alliance





The Homeless Youth Alliance help youth and young adults who live on the streets in San Francisco where they seek refuge from abusive families, alienating foster care and group home situations, and juvenile justice system involvement. 





Product Designer



Tools Used



Pen & Paper



Adobe XD

Adobe After Effects




The Problem

How might we create a product that helps the Homeless Youth Alliance provide the resources and services that homeless youth in San Francisco need to develop healthy and productive lives?

homeless youth.jpg

The Approach





Affinity Mapping


Usability Testing

Visual Design

High Fidelity Prototype

Front-End Development


The Discovery


I conducted several user interviews based on three user demographics: 

  1. The Donor

  2. The Homeless Youth

  3. The Volunteer




Heuristic Analysis


In order to dive more deeply into the needs of the organization I conducted a heuristic analysis of the original website. 



The Competition


Based on competitive research it became clear that the Homeless Youth Alliance needed to improve both its brand and story telling specifically regarding: 

  • Homeless youth success stories

  • Implementation of solutions

  • Value proposition for both donor and volunteer

  • Inclusiveness of the LGBTQ community




The Vision

Helping Homeless Youth Build Healthier, Happier Lives


My goal for the re-design of this website was threefold:

  1. Create a strong and trustworthy value proposition for donor, volunteer, and homeless youth seeking resources

  2. Create an intuitive and delightful process for donating, seeking out volunteer opportunities, and accessing resources

  3. Create a visual identity that is supportive, optimistic, and modern



The Framework


I began by redefining and reorganizing the site's information architecture. I used an affinity diagram to help organize all of the user's needs into categories to help with the information architecture. 






I sketched out various responsive wireframes. Sketched wireframes are much easier to iterate on than digital mockups if we need to change anything after testing. 





After a round of user testing the sketches, I created the new version of our wireframes digitally. 

I created an Adobe XD prototype with my digital wireframes and did another round of user testing and iterations before creating the final mock ups. 



Responsive Style Guide


Before diving into the creation of the high fidelity mockups I first defined brand guidelines in a responsive style guide. 




Hi-Fi Mockups


Below is a high level view of each screen of the website for mobile, tablet and web.





Here you can view each mobile screen. 






Here you can view each tablet screen. 






Here you can view each web screen. 



Visions for the Future


For this project I designed one specific donation funnel based on the main goal of the organization's website. Next steps would include: 

  1. Building a volunteer funnel that highlight the benefits of volunteering as well as volunteer testimonials and case studies

  2. A resource hub for homeless youth that are seeking out services the Homeless Youth Alliance provides





This project made me realize the limitations that most non-profit organizations are dealing with. The question of how to stay competitive with few resources is a huge one. Working on the project has motivated me to seek out more opportunities to help non-profits with the design of their digital products. Something I'd love to work on next is teaming up with a back-end developer to build out a project like this from beginning to end.