Overview
Hope in Seattle was a UX project that focused on designing and coding a responsive website for all volunteering opportunities related to helping the homeless in Seattle. The goal of the site was for people to find opportunities that matched their unique skillset's. The culmination of this project can be found at this link. While we did finish our design, certain functions on the website did not end up being fully completed due to time constraints.
Role
UX Designer, UX Researcher, Front-End Developer

Tools
Adobe XD, Lucidchart, Github

Duration
10 weeks
​
Team
Monica Posluszny, Helene Shea

Research

We wanted to better understand how our users find volunteer opportunities and what they look for in an organization before volunteering with them. We conducted interviews with three participants to gather information on our users and later sent out an anonymous survey to ten participants.

After conducting an affinity analysis and analyzing survey results, we ended up with the following three key findings:
​
  1. An organization’s location, available times, and interests play a big role in the decision to volunteer with them.

  2. Networking and the internet make it easier to get involved in volunteering with organizations. 

  3. Getting to know people and being a part of a community is a big motivator for volunteering. 

Sketches

Here are a few of my website sketches based off the research.

Storyboard

Storyboard created by Helene Shea showing how participants
​might find opportunities based on their interests.

Information Architecture

We kept our site simple to be able to code it later. We had an "About" page for our organization, a "The Facts" page dedicated to facts surrounding homelessness in Seattle to build empathy, and a "How to Help" page where users can search for different opportunities based on their interests and location. In our original plans, we were going to utilize the VolunteerMatch API for local volunteering opportunities.

Wireflows

I created the wireflows for our team in Lucidchart. The wireflows different versions of the "How to Help" page interactions. All versions give you the option to filter results based off the type of volunteering opportunity such as "tutoring" and "childcare".

​Version A you see organizations listed and has a search bar. Version B has no search bar and has organizations listed. Version C has positions within organizations listed. 

Click Tests/Post-Task Questionairre

Helene created three high-fidelity screens of the "How to Help" page for click testing. Our results are somewhat inconclusive, because our four participants would click in different places for the same task, even if there were minimal changes that did not affect where they originally clicked.

After analyzing our click tests and post-test questionnaire, we ended up with the following three key findings:
​
  1. Participants preferred having both a search bar and filters.
    ​
  2. Participants preferred displaying volunteer listings by volunteer positions.

  3. Participants preferred descriptions of volunteer positions rather than descriptions of the organizations in the search results.
Version A has both a search bar and a filter, whereas Version B and Version C only have filters. At the same time, version A and version B display volunteer listings by organization, whereas version C displays volunteer listings by volunteer positions. Below are the high-fidelity screens that we used for click testing.

High Fidelity Mockups

We created high-fidelity mockups of the website and later coded it using the Javascript library ReactJS. The site did not end up being fully completed due to time constraints.

Click here to access website.
High fidelity wireflow created by Helene

Reflection

Just like a lot of my other projects, I enjoyed working on this site. Seattle has a major issue with homelessness with a lot of stigma's surrounding people who need compassion. It was interesting for me to deep dive into how and why people get involved with volunteer organizations so we could create a good site.

The biggest challenge with this project was coding the site. I've taken a few programming classes before but I have never used ReactJS or implemented Material UI before. Helene and I managed to code a basic version of our site. My proudest moment was when I figured out a way to create a responsive navigation bar!

The second challenge was click testing, as I had little experience with it previously. I realized that it needs to be made clear to users that they have to go about the task just as they usually would. I think the users would expect some dramatic difference each time and would click around our screen looking for the changes which affected our results. However, the post-task questionnaire saved that session.