Homeless Youth Alliance

 

 

Overview

 

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. 
 

 
 

 

 

 Role

Product Designer

 

 

Tools Used

Slack

Google

Pen & Paper

Whiteboard

Whimsical

Adobe XD

Adobe After Effects

HTML/CSS

JavaScript

 

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

 

Research

Synthesis

Ideation

Affinity Mapping

Wireframing

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. 

 

 

 

Sketches

 

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. 

 

 

Wireframing

 

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.

 

 

Mobile

 

Here you can view each mobile screen. 

 
 

 

 

Tablet

 

Here you can view each tablet screen. 

 
 

 

 

Web

 

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

 

 

Reflections

 

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.