Project Description

Redesign the website, http://www.standupforkids.org/. We want to make the website both easy for youth to locate how they can get help as well as make it easy for volunteers to sign up. The appearance of the website should portray that this organization will provide a safe and comfortable place for youth to get the services they desperately need, to be a haven for homeless youth, and that the volunteers are making a great impact.
Team: I have worked with two UX/UI designer fellows.

Persona

User Research & Insights

While our interview with the organization's stakeholders, we discovered that their current website user demographics are 75% donors and 25% volunteers. Therefore, we believe that donors are attempting to use the Stand Up for Kids website, but the website doesn't cater to them enough and that we might be able to help if we make it easy and attractive for donors to locate donation pages and be prompted to donate by empathizing. We might do this by making call to action buttons prominent, bold headings, logo and color redesign, utilizing imagery that demonstrates the organizations mission and successes, and having more focus on how donations matter through success stories. Doing this will allow greater amount of donations, volunteer retention, and overall lessened the cycle of youth homelessness.

Stakeholder Input

- 75% of the time, site is used by Donors
- Increase Brand Awareness
- Full service for all regional chapters
- Increase Website Action w/Calls to Action
- Confusion with 'StandUp for Kids' as name, as they help out Youth up to 25 years of age

Problem Statement

We believe our organization's website was designed to achieve ending the cycle of youth homelessness and create easily accessible ways for both volunteers to donate their time and for donors to provide funding. We have observed our website isn't gaining the necessary exposure, donations aren't coming through as much as we need, and that the website is causing misconceptions and confusion and this has caused a difficulty in volunteer retention. We might improve our website and mission by making call to action buttons more prominent, showing off what the organization does and how it benefits youth, showing visualizations that trigger more emotion, including more youthful graphics and colors to branding, redesign of logo to be more contemporary, and describing what donations go to and describing how to volunteer. We will know we have improved these items when our donations go up by 25%, volunteer retention goes up by 50%, and we see a 10% reduction in homeless youth.

User Flow

User Scenario

Our user Mary Brait, age 38, is an active mom and part-time bookkeeper. Her and her husband's combined yearly income is $120,000 and they are both very busy and time-limited. Mary wants empathizes with homeless youth because she sees them everywhere in San Francisco, she has children of her own and couldn't imagine her children struggling, and wants all children to have the same opportunities as her own children do.
Goals:
Mary wants to help out homeless youth, to visit a website of a certified non-profit that will help homeless youth, to easily find/quickly navigate on the organization's website how to donate, feel good about donating, to help others for religious reasons, and wants to be seen as a role model for her children.
Scenario:
Mary was on her way from her job to home and saw a few teenagers who appeared homeless beside the road and feels bad seeing that. She gets home and decides she wants to do something for helping homeless youth. So, since she has some time before her children get home, Mary looks up reliable homeless youth organizations on google and comes across Stand Up for Kids (Youth). She notices some emotional stories and testimonies from homeless youth and donors on the homepage of the website. This triggers her emotions to want to donate right away. She locates the prominent 'Donate Now' call to action button. She goes to the Donate page and sees that she can donate $50 and it buys a week of groceries for a hungry youth. Later, while they are having dinner as a family she announces what she did earlier and starts a conversation with her children about doing good for other people.
Risks/Emotions:
Mary can gain an emotional awareness to how it feels to help others. Mary's children can learn from her example. Her good deed can be shared with friends and family, this might trigger multiple people doing helpful things.
Phase One: Mary discovers website
Phase Two: Mary sees on homepage the organization is certified.
Phase Three: Mary sees the testimonials from both youth and donors.
Phase Four: Mary feels prompted at that moment to donate right away
Phase Five: Mary clicks 'Donate Now'
Phase Six: Mary clicks amount and sees right away what that amount will do
Phase Seven: Mary shares her good deed with family and friends.

Story Board

Current Website

Sketches

Style Guide

User Test

Paper Prototype
Process Bar- Didn't like the use of numbers in the circle.
Ways to Help Cards to take up more space and not be so close to Hero area.

Lo-Fidelity
Add iconography to form as well to designate process.
Use consistent button size and shape throughout.

High-Fidelity V1
Form - buttons too small to be prominent and induce action.
Homepage - A/B Test user preferred using Donate button at top.

Improvements