Megan Sanger
UX Researcher/Designer

Street Youth Ministry



A nonprofit, founded in 2008, to help transition young adults who have aged out of foster care. SYMin helps those in need achieve their personal goals, learn necessary life skills, overcome addiction, and gain self empowerment for their long term survival.



CLICK THE LINK BELOW to see the InVision Protoype:

https://invis.io/SRVXJB9FAZ2

         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

Context

The challenge: Redesign a local non profit website as an educational assignment.

Time frame: 3 weeks

My role(s): Interviewer, Researcher, Volunteer, Designer for volunteer user path.


         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

SYMin at first glance

  • It was overwhelming with the amount of content on each page. 

  • It was busy, loud, and not easily digestible, making it challenging to navigate. 


Interview(s)

Questions we wanted answered:

  • Who are our user personas?

  • Are there any current frustrations users are expressing?

  • What features will require our utmost attention?

A team member and I conducted an in person interview with Tondra Daily, who is the Community Engagement Leader.

Key Insights:

  • Those in need find SYMin through word of mouth, or by their Facebook page.

  • Donors use the site pretty successfully, although the sight can be overwhelming with the amount of content. 

  • SYMin has a good network of foundations, churches, and individuals that donate and they need a minimum of 1000 volunteers/year to operate.

  • Volunteers sometimes have trouble finding the day center. 

  • Difficulty in finding information on the site leads to a lot of unnecessary phone calls.

My Ethnographic Observation: 

I decided to volunteer, so that I could experience the process in its entirety.

I was able to talk with a client during art, who told me he never uses the website

I also briefly spoke with the Founder, Terry Cole and the Art Director, Suzanne Zucca, in informal interviews. They confirmed that the clients did not use the site very much. That donors do use it and pretty successfully so. But that the volunteer path is something they do hear complaints about at times.


         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process
Meet Vince!
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process
We decided to map out his journey by the measure of his desire to volunteer.

Hybrid Card Sort
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

We decided to restructure by...

  • Combining repetitive information, in order to reduce multiple user paths for the same objective
  • Reducing the steps in the volunteer process
  • Creating a footer to house the extras that are relevant, but not a top priority to users
Low Fidelity Wire Frames
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

User Testing Plan


Test 5 users

Testing objectives:

  • Can users successfully make a donation?

  • Can users complete the volunteer task flow?

  • Can users successfully find what client services are offered?

Lo Fidelity Testing Results
         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

Iterating


We changed all of the issues that arose in low fidelity testing and implemented our UI style guide to begin high fidelity testing.

Hi-Fi Testing Objectives:

Determine if we have fixed the previous issues and evaluate any new findings.

         symin.org, UX Research,                 Prototyping, Volunteer Sign Up Flow Process

The reasons behind our choices

We wanted the redesign to feel light, soothing, and welcoming to users. The current colors are very loud and make it difficult to look at.

We chose the color pink because it represents hope and is overall comforting. We chose the deep purple because it is associated with royalty and wealth

*All elements are responsive. Although we chose to focus on desktop only due to the time constraints within this project. 

Implemented Redesign
Feel free to scroll the entire homepage in the mock-up, below. 

Feel free to scroll the entire homepage in the mock-up, below. 

Scroll the screen above to see the entire homepage design.

Scroll the screen above to see the entire homepage design.

XD Screenshot

XD Screenshot

Volunteer Path 

I redesigned the screens for the first time volunteer process: 

  • Landing page

  • Sign up 

  • Orientation video 

  • Quiz 

  • Confirmation of volunteer time

VOLUNTEER LANDING PAGE BEFORE 

VOLUNTEER LANDING PAGE BEFORE 

Existing Volunteer Page 


Before redesigning this page had:

  • More than one call to action in the same hierarchy at the top of the page. 

  • A prescreen google form attached to the joining process, which had to be completed before getting to the steps of signing up.

  • Cluttered and busy content, making it hard to digest and navigate.

VOLUNTEER LANDING PAGE AFTER

VOLUNTEER LANDING PAGE AFTER

Redesigned Volunteer Page

  • I was able to reduce the steps between joining SYMin and finally signing up to volunteer.

  • I eliminated the prescreen google form that is used to collect data for the organization from the front end of the process.

  • I also made the hierarchy of the page laid out in a way that facilitates first time volunteers signing up with ease and flow.

  • I gathered details and information from the site regarding the location and specifically, the volunteer entrance, in order to make it easier for users to find SYMin