New York Cares: Engagement for All


New York Cares


Information Architecture

User Research



Nora |  Kaige | Janet | Me


12 Weeks


UX Research

UI Design & Branding

Team Manager


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?


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


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.


Our Proposed Design

NYC Homepage.png

Stakeholder Interviews

Online Surveys 

User Interviews

Persona Development

Competitive reviews

Card sorting

Tree Testing

Site Map Creation

User Flow 


Re-branding ideas

Fidelity Wireframe

Paper prototyping

In-person & remotes
think aloud method

Concept Testing

Next Iteration 

High-Fidelity Prototyping


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."


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



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


Give back

Social activity

Gain skills.


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

Define & Research
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.

Site map.png

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!


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.


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. 


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.


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. 


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.


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:


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


Direct & simple layout, will not get lost


Clear label, reduced time guessing and exploring


Less scrolling, get to the destination fast


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


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


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


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


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

Frame 5.png
Frame 6.png
Original Website

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.