demo1.jpg
New York Cares: Engagement for All

CLIENT

New York Cares

RESPONSIBILITIES

Information Architecture

User Research

Re-branding

TEAM

Nora |  Kaige | Janet | Me

DURATION

12 Weeks

MY ROLE

UX Research

UI Design & Branding

Team Manager

BACKGROUND

For over 30 years the New York Cares hub has provided a “smarter way to volunteer” by enabling any New Yorker or say, 400,000 of them, to serve for a cause they care about.

 

New York Cares was an early adopter of web technology and are looking for ways to update their website.

The Challenge

How can we design a website to engage citizens of the "busiest city in the world" to volunteer for a cause they care about?

Goal

Improve information architecture & design consistency
Improve the search function & user flow
Improve the mobile user experience

Quick search for volunteer jobs

TW NYCSearch.gif
TW NYC Mobile51.gif

Make a donation

Solutions

Design a minimalist UI that prioritizes increased information clarity and access for volunteers.
Streamline the search process by prioritizing the search bar, clarifying filters, and revamping card design.
Employ a clean, consistent, and approachable style identity.

Use responsive design for the mobile experience.

Original

Our Proposed Design

NYC Homepage.png
Process

Stakeholder Interviews

Online Surveys 

User Interviews

Persona Development

Competitive reviews

Card sorting

Tree Testing

Site Map Creation

User Flow 

Low/Mid 

Re-branding ideas

Fidelity Wireframe

Paper prototyping

In-person & remotes
think aloud method

Concept Testing

Next Iteration 

High-Fidelity Prototyping

 
Discover

We met with the stakeholders to understand their concerns, goals, and visions for their future website. Our first step was preliminary user research. We decided to focus on volunteers as they are the major stakeholders and may need more guidance when it comes to registering for volunteering opportunities. 

Listen to Users

During our interviews, we've received many valuable feedbacks from participants that volunteer often, would like to volunteer, and those who never volunteer. 

"It too hard to read"

"It's overwhelming and confusing"

"It's functional but lacks design."

"I like the volunteer box."

"This site is not convincing or welcoming."

"This layout is messed up."

"I like the search bar but it looks confusing"

" I don't like too much scrolling."

"This website definitely needs more life."

Persona

This persona was created with observations, interviews, and questions from multiple participants. We used user persona to understand users' needs, behaviors, experiences, and goals.

Image by Guilherme Stecanella

Hello, I am Mia

25 years old | Graphic Designer
Bushwick, Brooklyn

Goal

Flexible

not-too-demanding role in a group-setting near work.

Motivations

Give back

Social activity

Gain skills.

Barriers

Lack of time

Last-minute schedule changes

Finding an activity for a group

Two major takeaways from the persona process:

1 First-time volunteers want to be confident in what they’re signing up for.

2 Big buttons over texts

 
5b21bb79-09bf-462b-9a80-db2a518774e6.JPG
Define & Research
Process
1. Competitive Review
2. Card Sorting
3. Tree Test
Site Map

We concluded the current site map was a little too choice-heavy(overwhelming) because of the mega drop-down main navigation. So we wanted our revised map to be more simple, easy to navigate, and give users multiple routesWe also catered our site map primarily to the volunteer users. We didn’t want to leave out the nonprofit user, but we realized, New York Cares is at full capacity and not currently accepting new partners. Because of this, we simplified the nonprofit user journey so they could access the most important information easily.

42d6e636-3793-4903-b7b5-7fa894ed4d93.JPG
Site map.png
 
Design

First, our team designed four task flows for New York Cares’ 3 primary user groups:

 volunteers     donators    nonprofits

that we then turned into a paper prototype. 

Low to Mid-Fidelity Wireframe

From there, we hand-drew a paper prototype!

Evaluation

Time for more user research!!

This time we used the in-person and remote “think aloud” method to capture the prototype experience. Our usability evaluation of the low-fi prototype revealed 5 problems we matched with 5 actionable solutions for our hi-fi prototype. 

Problem #1
Screen Shot 2020-10-29 at 1.00.55 PM.png
Screen Shot 2020-10-29 at 2.32.10 PM.png

Users had difficulty recognizing ‘volunteers,’ nonprofits,’ and ‘organization’ as portals on the homepage.

Solutions

Replace symbol signifier with the call to action buttons such as ‘enter’ or ‘learn more’ to clarify portal entrances.

Problem #2

The search bar on our desktop had no clear “go” button which confused users as they were unsure if the search was processed. 

Solutions

Make the search bar consistent with our mobile version and give users the satisfaction to click “go” after plugging in their text to make it more reactive.

Problem #3

Labeling our portal as ‘nonprofit’ and our global navigation 

as ‘become a community partner’ made users unsure if these 

would lead them to the same path.

Solutions

Make sure we stick to ‘nonprofits’ for both the portal and navigation. Providing web copies will help volunteers and donors know the portal is not for them.

Screen Shot 2020-10-29 at 2.38.03 PM.png
Problem #4

Placing the ‘zipcode’ in the search bar instead of in line with the ‘availability,’ ‘cause,’ and ‘skill’ filters made users completely miss it when they were filtering. 

Solutions

Consider adding a ‘location’ filter to the bottom with the rest of the filters so it can be grouped together.

Screen Shot 2020-10-29 at 2.43.28 PM.png
Problem #5

It was hard for users to keep track of which page they were on after using the global and sticky navigation bars.

Solutions

Make sure the global & sticky navigation bars are different in design so users know where they are at all times.

 
 
The Final Design

Based on all the feedback, we started creating the final version of the New York Cares website.

 

Our Key Design Principles:

01

Kept some of NYC’s existing brand identity and modify the brand colors to make it more modern and energetic.

02

Direct & simple layout, will not get lost

03

Clear label, reduced time guessing and exploring

04

Less scrolling, get to the destination fast

05

Users are able to get to what they are looking for faster with our filters

06

Simple design with a balance of photo, Users believed information photos make the job more convincing

07

Introduce team leader for a sense of belonging and allow the volunteer to contact them for more information

Looksignup.gif

Task Find an individual volunteer opportunity near your home to work with animals or the environment on weekends.

Task2.gif

Task You run a non-profit that needs to recruit volunteers. Can NY Cares help your organization? How can you become a community partner?

Prototype
Frame 5.png
Frame 6.png
Original Website
Reflection

After we redesigned the website, the discoverability and navigation definitely have improved. It is much easier and faster to get to a destination. New York Cares received may feedback and a new approach for their new website based on our researches. Our Client was pleased with the new design and loved the fresh look. We also provide a mobile solution for them which was lacking. We definitely give this site a unique look while keeping some of the existing elements so the return users can still feel familiar. Our Client hated the color red on their site and loved the new red we selected for them. 

From this project, I learned the whole process of UX design that is user-focused. It helped me understand how users felt about using a volunteer website. Our team works together to get more research done, and all of us are fully engaged.