Website Redesign: New York Cares
Case Study
.png)
Overview
Prompt:
Identify an existing nonprofit website to redesign the UI of a typical user path.
Role: UX/UI Designer
Contributors: 3 Additional UX/UI Designers
Tools: Figma, Miro, InVision, Trello, Google Workspace
New York Cares is a volunteer organization that connects New Yorkers to opportunities to serve those in need in their community for decades. Their generosity has famously touched many, even inspiring other organizations to partake in their mission. Our team felt as though the website should reflect this kindness as well as provide a more straight forward user path to emphasize the main purpose of this site: get volunteers to participate more often. To accomplish these updates we looked into the motivations for people volunteer and the aspects of the sign up process that felt the most important to users. We synthesized our research to uncover that a friendlier interface, straightforward details about projects, a socialization feature, and a saved projects area will help users feel encouraged to sign up for more opportunities and feel more confident in volunteering resulting in more sign ups!
Problems
-
Users had multiple clicks before seeing opportunities.
-
The current site lacked a friendly & personal interface.
-
Users received information about details of the volunteer opportunity late in the sign up process.
Solutions
-
Friendlier and immersive UI.
-
Create a saved projects area in the profile for easier retention and sign up.
-
Add a socialization feature to connect with others on a personal level.
Empathize
User Research
Research Question: Why do people volunteer?
Objectives:
-
Determine what information is useful as people look for volunteer opportunities.
-
Uncover the for volunteers in finding the right opportunities.
-
What emotions are involved in the volunteering experience, and how can we effectively communicate those emotions in our design?
Process:
-
Five video interviews with five unique individuals who have participated in volunteer opportunities through New York Cares and/or other organizations.
-
Synthesize in an affinity diagram to uncover commonalities
Interview Quote
“My biggest struggle is finding a new opportunity and not knowing what ones are out there. “
Results:
-
People volunteer to make a difference. They are motivated by their community needs and affecting people’s lives in a positive way.
-
We will edit the interface to introduce a friendlier style, interactions, and color pallet.
-
-
Prefer a familiar setting/volunteering with friends to make the volunteer experience even more fun.
-
Let’s add a way for users to connect to build a network and community = socialization features
-
-
Details and logistics are essential in making the decision to commit.
-
Volunteers want to know what is expected of them beforehand and feel more confident singing up for the experience with details in the forefront.
-
The current design pushes these details after an account is created. We restructured this user flow to allow for information to be displayed earlier on .
-
Define
User Persona, Meet Ally!
Problem Statement
New Yorkers looking to volunteer, such as Ally, are more confident and more likely to sign up for volunteer experiences when they feel comfortable, informed, and can have fun through the entire process of signing up and volunteering which needs to be reflected in the New York Cares website experience and interface.
Team Insight: “Our site needs to give the user a hug”
Ideation
Feature Ideation
Brainstorming through the I Like, I Wish, What If Method
Tool: Trello
Putting ourselves in Ally’s shoes, we walked through the sign up process both through New York Cares and through other mediums to discover best practices and wishes for the signup process.
UI Mood Board
Tool: InVision
Let’s see what else is out there! Pulled inspiration from other nonprofits that foster a welcoming interface.
Feature Definition
Prioritization Matrix
Tool: Miro
After the brainstorming process, the team participated in an active discussion and organization of the ideas narrowing down effective and achievable features. With so many exciting propositions and the daunting possibility of feature creep, we deciphered the most valuable changes to begin in the redesign and left ideas that ranked lower on the value scale and higher in difficulty for future development.
Information Architecture
Card Sorting & Site Map
Tool: Miro
Through the user research, we noticed that the volunteer opportunities and project details needed to reach the user sooner in their journey.
Changes made:
-
Highlighted volunteer opportunities on the home page.
-
Search for opportunities is featured and supported by suggested projects.
-
Featured volunteer stories.
-
Informative categories about the organization in the top navigation bar was moved to the footer.
-
Addition of Social Page.
.jpg)
Prototype
Low-Fi Wireframes
.png)
Process:
Took inspiration from the mood board, the feature ideations, and the reorganization of the information architecture.
Goals:
-
Reduce clicks
-
Bring in personalization (user stories, photos)
-
Responsive Web Design principles - easily scalable.
-
Navigation bar has been absorbed into an immersive experience
Tools:
Figma
My Role:
Homepage Redesign, Footer & Navigation
Style Guide & Component Library
Hi-Fi Wireframes
Process:
Apply style guide, insert images, add animations.
Tools:
Figma
My Role:
Homepage redesign
Footer
Lead Style Guide Management
.png)
.png)
*Final version of Hi-Fi Frames above
Test
Conduct Usability Tests
.jpg)
Process:
-
Interviews in-person and through online video screen share.
-
Users were given four tasks to complete and asked to explore freely.
-
Feedback was collected and synthesized amongst the team in a prioritization matrix.
Results:
+ Delightful interactions and style
+ Users accomplished most of the tasks (about 95%).
- Returning to the homepage without a traditional top nav bar felt confusing and needed to be more spelled out (specifically from social page).
- Scaling is too large, key info needs to be further up on the page.
​​
Iterate
Feedback from User Testing
1. Sizing and scaling was too large and key information was below the fold.
2. Add a more obvious route to the homepage.
3. Unite on recent, favorite, and saved projects.
RWD - Mobile Homepage
Conclusion
Reflections
We achieved our goal as a team and worked well on dividing and conquering the large task at hand in the short amount time. This case study really emphasized the benefit of aligning on a style guide and identifying user needs within the current services of the company. Once we established the style choices and the core purpose of this redesign, we were able to give this site the warmth and function it needed! Working through a redesign there is different, but equal empahsis on the presentation and experience of the information. These two concepts weaved harmoniously throughout the entire process reminding me that user experience and user interface can’t exist without one another.
What's Next?
-
Accessibility Audit
-
Donation Page
-
Push Notifications
