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
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
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.
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
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 routes. We 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.
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
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.
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.
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
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?
Prototype
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.
Next Project