Trinity Place Shelter
Responsive website redesign to clearly communicate Trinity Place Shelter’s value proposition. So, they can attract volunteers and increase online donations.
Duration:
2 Week Sprint
UX Team:
Christina Massey (me)
Bonny Ma
Dorothy Pronolo
Steven Natale
Software Engineering Team:
Sebastian Duarte
Zunayed Mahfuz
Bob Balonek
Barnette Label
Methods:
Heuristic Evaluation
C&C Analysis
User Interviews
Usability Testing
Affinity Mapping
Persona Development
Journey Map
Card Sorting
Sketching
Wireframing
Prototyping
Tools:
Figma
InVision
Zeplin
Miro
Keynote
Zoom
About
Trinity Place Shelter’s mission is to help homeless lesbian, gay, bisexual, transgender or queer (LGBTQ*) youth and young adults in New York City to safely transition out of the shelter system and grow into independent, positive, and productive adults. Their website is crucial to the efforts and financial success of their mission, but Trinity Place Shelter is competing with many other places and causes where people can spend their money and volunteer their time. So, we need to redesign their site with this in mind.
Trinity Place Shelter is a small non-profit organization that depends on volunteers and donations, which we can increase substantially through a user-centered website design.
Discovery
Through research we sought to understand Trinity Place Shelter as an organization and their user’s experience. We completed a Screener Survey, User Interviews, Heuristic Evaluation, Competitive & Comparative Analysis, and User Test Interviews.
Screener Survey
We first used a screener survey to identify: users who have supported non-profit organizations and/or other charitable causes either through volunteering or donations in the past year. And we wanted to learn more about candidates connection to the LGBTQ community, to see if Trinity Place would be an organization they would support.
9 Users
The following criteria was determined in order to select candidates to be interviewed:
Must be engaged in supporting non-profit organizations in the past year. (Limiting the time range to the past year, kept information current)
Not required to be connected to the LGBTQ community.
To have either donated or volunteered. Having done both was not required.
While there's a first time for everything, we wanted participants who actually exhibit the behavior we were studying. So, 1/9 screener participants didn’t qualify for an interview.
5 User Interviews
From the 9 total survey responses, we proceeded with 5 users to interview and by initially screening users on whether they volunteer and/or donate, we were able to leverage the initial questionnaire of our screener survey when developing the questions for our post-screener interviews. By screening users on whether they volunteer and/or donate, we were able to use this data in follow-up questions poised as open ended in our interviews to hear more about their experience.
This allowed for a natural follow-up into hearing “why” users choose to donate and “how” they donate and find the organizations from their aforementioned experiences.
“I don't feel like donating to a particular charity if the site doesn't present itself in a sufficiently credible manner.”
What We Needed To Know
How do users find organizations that they choose to volunteer or donate to?
What influences users the most when deciding which non-profit organizations they want to be associated with?
How do users determine the credibility and trust of a cause or organization?
Users wanted to know:
Trinity's mission, goals, objectives, and work.
How they use donations and contributions.
Usability Testing
4 Users
3 Task
Score: Medium Issues
To ensure that Trinity Place Shelter can effectively communicate the necessary information, we conducted our first round of usability testing to learn more about user pain points and how users interacted with the existing website.
Learn about upcoming events and projects- 2/4 failure
Make a one time donation- 3/4 success
Find a way to volunteer- 3/4 Success
From user research, we found significant deficiencies in the website content, which failed to provide the information users needed to make a donation decision.
Key Findings
Users noted that the lack of pictures left them needing more credibility and connection.
Users weren’t able to locate up to date press or event information.
Users found the Volunteer page to be distracting and unclear due to sporadic bee “contact us” link.
Overall, users were turned off by the aesthetics and organization of the site.
Define
Based on these key insights from user interviews and usability testing, we created a persona and a Journey Map to better empathize with the user and prioritize goals according to their needs. The preferences, needs, goals and frustrations of the persona reflects the interviewees lifestyle; as it should be relatable to the end user.
Pat’s Problem
Pat needs a clear and efficient way to learn, validate and give back to Trinity Place Shelter because their time and resources are limited. Pat has a deep desire to contribute to their community, while these organizations congruently need the support.
How Might We…
improve Pat’s experience navigating Trinity Place Shelter to engage and support the organization in an easy and actionable way.
We wanted our redesign to clearly communicate Trinity’s value proposition to attract volunteers and increase online donations.
Design
We used the Problem Statement and How Might We question as a guide in the ideation phase to come up with possible solutions that will address the needs of the user and started with a feature prioritization to hone in on which pages and features to improve on according to the user insights.
Must
Photography above the fold on the home page.
Donate call to action on the home page.
Once users decide to donate, a clear call to action and a simplified donation process keeps them on the right track.
Less jarring blocks of text.
Should
Have up-to-date news and events information.
Streamline primary navigation bar
Could
Photo carousel on the volunteer page.
Visible links to social media above the fold.
Design Studio
We conducted two rounds of design studio to iterate on a new design for the two site pages we received the most user feedback & frustration on: the homepage and volunteer page.
Mid-Fidelity Annotations
Homepage
1. Featured Volunteer as a primary tab.
2. Highlighted Trinity Place Shelter logo at the forefront of the navigation bar.
3. Added an image banner above the fold to add visual engagement.
4. Made Donate into a distinct “Call To Action” button.
5. Added video content to humanize the organization & its residents.
6. Moved social media links to the body of the page because Trinity’s recent news & event information lived on their external social media pages.
7. Created “Major Donors” banner” to inform users of the organizations credibility.
8. Placed mission statement in the center of homepage so user can get a quick and immediate grasp of the organization’s identity.
1. Featured an image carousel with various images of volunteering in action.
2. Added “Get Started” button as a call-to-action that would link to an application form and next steps.
3. Showcased the three ways to volunteer with images and brief descriptions of each method.
4. Moved the Volunteer Disclaimer found on the existing site just below volunteer opportunities.
Volunteer Page
Usability Testing
4 Users
3 Task
Score: Success
Conducting usability test during all stages of prototyping was key to designing a user centered product. Interacting with the user provided insights that guided us through all interactions.
The mid-fidelity design and prototype was tested among 4 users. The participants were given a scenario and three tasks to complete during usability testing.
Learn about upcoming events and projects- 3/4 success
Make a one time donation- 4/4 success
Find a way to volunteer- 4/4 Success
Users Said:
“The primary navigation is clear and the site is overall easy to use.”
“Updated event information should be directly on the Trinity site.”
Homepage:
Volunteer Page:
Prototype
Using InVision, we linked up key interactions to create the mid-fidelity and Hi-fidelity prototypes for testing our newly designed pages with users.
Click Image For Prototype
Usability Testing
4 Users
3 Task
Score: Minor Issues
Another round of usability testing was conducted after our high-fidelity wireframes and prototypes were done. The same scenarios and tasks were tested on a group of 4 different users.
Learn about upcoming events and projects- 3/4 failure
Make a one time donation- 4/4 success
Find a way to volunteer- 4/4 success
The website redesign increased donation and volunteer conversions by 25%
Key Findings
1. Users were unable to locate the current events on the website.
2. Some users were confused by the placement of the ‘Volunteer Now’ button.
3. Users found the site to be overall pleasing and credible.
Hand-Off
Using Zeplin, we exported and handed over our hi-fidelity designs to the development team for implementation. All progress, updates, and further collaboration were addressed in daily stand-up meetings.
Next Steps
Continue user testing to identify any opportunities for updates.
Re-evaluate the location of the “Volunteer Now” button
Consider having a dedicated events category instead of having users find current events through the social media bar
Possibly change the copy on the social media bar so it is more clear that is the location to find current events and new instead of creating a dedicated events category.