top of page

Warming up the UI for New York Cares 

How do we motivate New Yorkers to volunteer more often?

We wanted to warm up the New York Cares site so that it would foster some of the same feelings that volunteering does. The user shouldn't have to look very hard to find a volunteer opportunity. Our motivation was to find a way to make the design and interface "feel more like a hug."

Current New York Cares homepage

original ny cares.png

Proposed mobile and desktop homepages

nycares phone.png
nycares desktop.png

MY RESPONSIBILITIES

Team of four, class project starting with original New York Cares website, and iterating upon one path. 

  • Created Social page

  • Interviewed and tested with users

  • Managed a quick timeline

RESEARCH & FINDINGS
In this research project, I planned and conducted 3 user tests and 3 initial user interviews. My focus was creating a social aspect to the site, so I researched what people look for in volunteer opportunities.

Screen Shot 2022-02-01 at 8.20.15 PM.png
Screen Shot 2022-01-27 at 9.46.56 PM.png
Screen Shot 2022-01-27 at 9.47.07 PM.png

"Everyone should give a little more than they take from life."

"Sometimes what you sign up for and what is needed aren't the same."

"I want to be notified of opportunities to volunteer. I never know what's going on, so it's out of sight, out of mind."

In initial interviews, users expressed that they look for familiar experiences when volunteering, and want to make sure they have all of the logistical details before they leave the house. What door should I enter through? What kind of shoes should I wear? Who do I reach out to if I have any problems? These are the kind of questions that, when left unanswered, lead to anxiety and an increased dropoff rate. Our interviews revealed some common themes:

  • People choose to volunteer because they believe it's the right thing to do, and want to see the results and the difference that they're making.

  • Favorite volunteer activities involve working directly with people in need of service, projects that are focused on the community.

  • People prefer to know as much as possible before walking in, this gives them a feeling of security.
     

SHAPING A USER PERSONA
Our user, Ally Gibbs, is a young college student, looking for ways to give back and fill her time in a more positive way. She identifies as somewhat shy and introverted, so she really needs as much information as possible to feel secure before showing up to a new place. She would like to be able to volunteer with people she knows when it's possible. 

UX Persona - Pro.png

FEATURE IDEATION

i like.png
i wish.png
what if.png

Using the "I Like, I Wish, What If" model, new features started to come a little more into focus and seem much more doable.

It became clear that gamifying and incentives would be really valuable here, along with a social aspect to find projects with friends or show off a badge you earned for completing a certain number of volunteer opportunities. 

THE IMPORTANCE OF A SOCIAL FEATURE
The purpose of the social page is to aggregate all the important information in one convenient place. Ally can see her previous volunteer activities, her calendar of upcoming events, mark completed opportunities as favorites, and contact future site leaders with any questions she may have.
She can also see what her friends have completed or signed up for recently. To keep this feature from becoming something too large that would need moderators and oversight, there is only the most basic of messaging- inviting a friend to join you in a volunteer event that you have just signed up for, or seeing what your friend has signed up for and joining them. 

social page.png

UI IDEATION

A big part of what felt so cold about the original design of the New York Cares site was their color scheme. It can be very stark at times, with white and grey, the only color being the deep red of their logo. All lines and corners are sharp and angular. 
Clearly the logo and that rich red color are both important, so we looked to build something warmer and friendlier, centering around that color. We brought in some richer oranges and secondary and tertiary colors so that the logo wasn't the only warmth on the page. 

colors2.png
colors1.png

USABILITY TESTING & FINDINGS
In testing of our interactive prototype, we confirmed our hypothesis that color was key. Paring down the sizes of some UI elements and rounding out some sharp corners contributed to a friendlier feel. We wanted to make the important details as visible as possible to the user, and the social page provides a space for all of the key information: history, upcoming projects, badges for completed projects, and information on what friends and contacts are signing up for. 

Low Fidelity Prototype Pages

volunteer lofi.png
social lofi.png
volunteer page.png

High Fidelity Prototype Pages

social page.png

FUTURE ITERATIONS
Moving forward, it would be very important to make contact with stakeholders. They were unavailable when we first started this project, but getting their feedback would be invaluable. 
As a small team, we were trying to follow only one path in order to complete this project. In future iterations, I think it would be important to build out the donation page as well- New York Cares, as a nonprofit, is definitely looking for more volunteers, but their current website has a large "how to donate" button in the header, so it's clearly very important.  

LESSONS LEARNED

  • A website's purpose should be immediately clear- make the volunteer search front and center.

  • Gamification works. We all want that little bit of recognition! 

  • "What If?" ideas can be so much wilder than I thought. Otherwise, there is nothing that differentiates between those and the "I like" or "I wish" concepts. 

bottom of page