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
Proposed mobile and desktop homepages
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.
"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.
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.
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.
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
High Fidelity Prototype Pages
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.
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.