Siddharth
Asawa
SEP'19 - DEC'19
New York Cares
New York Cares is a non-profit that “meets pressing community needs by mobilizing caring New Yorkers in volunteer service.”
My Role
UX Designer
UX Researcher
Tools
Duration
Sep'19
15 weeks
The website was not updated for a long time and was lacking the modern structure and design
As a part of project in Information Architecture course, New York Cares were our client and wanted UX/UI consultation. The New York Cares’ website is the tool through which 52,000 people a year learn about and sign up for volunteer projects. The website was not updated for a long time and was lacking the modern structure and design. The website needs significant modification and pruning, including an improved information architecture to promote discoverability, shorter menus, design consistency, improved search functionality, and an improved mobile experience that will eventually lead to better user experience and excellent first impressions for new prospect volunteer and users.
Problem
The website has been not updated for a long time lacking the modern structure and design and disoriented information architecture.
Outcome
A mobile app that helps users plan a variety of vegan meals more efficiently while giving them access to a vegan community to stay connected and motivated.
​
Gaining Empathy
Road to the Project Goals
The best to solve the problem is to understand what the target audience (Volunteer) feels or needs. And logical way to gain the empathy is to put yourself into their shoes. So in the whole project I along with my other stakeholders tried to adopt this logic and that really helped us to reach our goals.
Design & Iterate
Uncover
Understand
Identify user needs and pain points related to home, search, event sign up & donation flows
Restructure content
and discover design opportunities
Conduct usability tests and deliver high fidelity mocks.
Get a Glance
Features
Quick Navigation & Floating Help Button
-
Two new Quick Navigation buttons added Volunteer Now and Donate Now especially for returning user in order to save their time and several clicks.
-
Floating help button in form of quick chat or FAQ's to gain information.
Storytelling Search Filter
-
Added this new feature to enhance user experience.
-
To make the overall task easy and understandable.
Sharing Achievements
-
In order to add Emotional Experience for users, they can have quick summary of the work they have done in past and can share it to social sites with their friends.
Building the path
Process
This was a three month project with New York Cares to improve the user experience for the home, search, event registration, and donation features of their website.
Quantifying Data
Surveying 78 People
In order to gather quantitative data, I created a survey that was complete by 78 people. These results pointed me towards to basic direction of the problem.
60%
were not satisfied with the search bar on the home page
80%
were not able to find out how to contact the New York Cares
68%
consider volunteering as a social experience that they want to share with friends and family
Qualitative Data
Interviews & Observations
Once we had a general idea about the pain points from the survey, we wanted to gather deeper insight into the problem. We interviewed 19 people for this project.
While New York Cares has several key stakeholders, the most important are volunteers (both existing NY Cares volunteers and potential volunteers who are helping other non-profits.)
Each member of group focused on different aged group ranging from 20-45 years.
I consulted users with age range between 21-25 years. And the reason we consulted volunteers are
-
To better understand the motivations behind why people volunteer.
-
To discover the current performance of the website: what’s working well and what needs to be improved.
-
Better understand the habits, expectations, and goals of volunteers when they visit the site
Here are some Insights and Quotes
1. Personal Motivations
Social consciousness and past experiences are the key driver behind why people volunteer.
I have been reading about the growing homelessness issue in the city. I feel for those who are struggling and I want to do something to help.
2. Search Filter Bar Issues
Existing volunteer search experience does not match the mental model held by users, making the process unnecessarily cumbersome and confusing.
The search filters are confusing. I'm not sure what some of the labels mean so it's hard to search for exactly what I want. Sometimes, the results don't fit within my preferences.
3. Unimpactful images
Unimpactful images and content that overwhelms, distracts users and prevents them from completing their goals.
The images are not engaging and they don't inspire me to sign up for events or donate to the organization.
4. Missing Social Experience
Many users consider volunteering as a social experience that they want to share with friends and family
I want to be able to easily invite a friend to volunteer with me before or after I sign up for an event. This way, I get to do something impactful while spending time with friends and family.
Organizing Data
Affinity Diagram
With the collected data, I created an affinity diagram to understand how to prioritize the pain points that arose. The biggest issues ended up being: mobile version, contacting, search filters, sign up process and image appealing.
Empathizing with User
Persona
After analyzing we created Persona for each user groups. We aimed at understanding the typical background of a volunteer, their frustrations, and their goals. And what we noticed that all of the personas had many similarities.
Evaluating User Navigation
Card Sorting & Tree Testing
We utilized Card Sorting and Tree Testing to evaluate how users navigate the existing site. Those are quick and simple methods that we can utilize to help us better understand the mental model of our users.
Both tests were conducted online with Optimal Workshop.
Card Sorting
In order to create a draft information architecture as the site map, we created 22 cards to be categorized by users and evaluated the results. For this we recruited seven participants.
The Similarity Matrix showed us some of the commonly grouped categories and also helped us identify the labels that need to be improved. After analyzing the card sorting data, we came together as a group to create primary navigation labels and the sub-categories that go under each primary label.
Tree Testing
Key Findings
Summarizing similar tabs into one will be more explicit
We adjusted various labels by merging less important labels into more relevant ones. For example; we merged 'Workplace Giving', 'Planned Giving', and 'Match Your Gift' into 'More Ways to Donate' while also adding 'Donate as a company' so individuals and companies would be able to find where they can donate easily.
The label 'Nonprofits and Schools' is ambiguous
From the card sort, we uncovered that the users found the label 'Nonprofits and Schools' confusing. It seemed that users did not understand what type of information would go under this specific label. Because of this confusion, we decided to change this label to 'Partner with us' which has the potential to give a clearer idea to the user. Also, within this same tab, we decided to separate entrances for nonprofits and schools individually to find information directly.
'Home' and 'Search' are unnecessary tabs
From the data obtained, we noticed that the potential users did not make use of home or search tabs as much since the homepage was the landing page and the search bar was available for searching for volunteer opportunities. This finding made the labels 'Home' and 'Search' unnecessary and irrelevant.
'Contact us' is a primary feature to goin info.
From the research data obtained, we discovered that the users usually look for ways to contact the organization for more information which means that 'Contact Us' is one of the prime features that should be highlighted and presented in form of a tab.
Users tend to relate keywords to actual actions
From the card sort, we discovered that users related actions such as 'FAQs for Volunteers' to the 'Volunteer' tab and 'FAQs for Donate' to the 'Donate' tab because of the use of keywords 'Volunteer' and 'Donate', instead of merging them into 'Contact'.
We used the data collected from Card Sorting to create our preliminary sitemap. We then added the sitemap structure to a tree test and asked six participants to complete six tasks.
We achieved a 72% success rate across all tasks and 83% of answers were chosen without backtracking.
Understanding Solutions
Competitive Research
To understand solutions already on the market in order to understand the existing market and the gaps in the industry, We utilized five dimensions to examine the sites of direct and indirect competitors.
A brief review of twelve competitors was conducted first before we narrowed them down to six sites that bear the closest resemblance to the functionalities offered by New York Cares.
We assigned a grade of 1, 2, or 3 to each dimension
3 being the highest possible score and 1 being the lowest score
Setting Goals
How Might we...
"....help the users match their mental model of volunteer search filter and making the process easy to combat?"
"....help the users to connect and share activities and achievements with their friends and family?"
"....help the users
to easily get connected with
New York Cares so
they feel the trust?"
Building the IA
Site Map
Search Bar
​
-
Include volunteer opportunities, serving population, location, distance, choice of day.
-
Should be apparent on the home page
Appearance
​
-
Minimalistic design with only the most important content displayed.
Organization
​
-
Minimalistic and systematic with proper alignment and font consistency.
-
Volunteer page should have a proper block format with appropriate filter options.
Search Bar
​
-
Include volunteer opportunities, serving population, location, distance, choice of day.
-
Should be apparent on the home page
Appearance
​
-
Minimalistic design with only the most important content displayed.
Organization
​
-
Minimalistic and systematic with proper alignment and font consistency.
-
Volunteer page should have a proper block format with appropriate filter options.
Rapid Iterations
Lo-Fi Wireframes
We discovered good ideas in our brainstorming session, to go to the next stage, where quick low fidelity prototypes were made. In that stage, our work began to define the relevant user flows and centered on the user experiences that were crucial to the success of the organization. Our emphasis was on:
Iterations
After we pinned down the information architecture and Lo-Fi Wireframes, we began to dig deeper into specific features of the website.
​
Process
-
Introduce the project goal, and put users at ease.
-
Describe the scenario, set up the context, and let users thinking aloud.
-
Let them evaluate the satisfaction in different dimensions.
-
Ask follow-up questions and appreciate their participation.
Then we created task-based user testing using
Rapid Paper Prototype to inquire about our target users’ opinions on those design concepts and their expectations.
Task 1
You are looking for Winter Wishes Letter Reading event. You know it is held in the Bronx on December 12th.
Task 2
You participated in the Meal Prep volunteer event last week. You are looking for similar events that may suit you and add to your favorites.
Expected User Flow
