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.
Pen & Paper
Adobe After Effects
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?
High Fidelity Prototype
I conducted several user interviews based on three user demographics:
The Homeless Youth
In order to dive more deeply into the needs of the organization I conducted a heuristic analysis of the original website.
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
Helping Homeless Youth Build Healthier, Happier Lives
My goal for the re-design of this website was threefold:
Create a strong and trustworthy value proposition for donor, volunteer, and homeless youth seeking resources
Create an intuitive and delightful process for donating, seeking out volunteer opportunities, and accessing resources
Create a visual identity that is supportive, optimistic, and modern
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.
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:
Building a volunteer funnel that highlight the benefits of volunteering as well as volunteer testimonials and case studies
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.