Trinity Place Shelter
Responsive web redesign for LGBTQ youth homeless shelter
Overview
Trinity Place Shelter is a homeless shelter for LGBTQ* youth in New York City that helps safely transition these young adults out of the shelter system and into independent and productive individuals. Their current website is non-responsive and is in need of becoming a better resource of information for those looking to volunteer or donate to their cause.
The Challenge
To create a responsive web redesign on Trinity Place Shelter’s website, with specific focus on two of their pages: Home Page and Volunteer page. We also directed some attention the site’s overall organization and primary navigation as a whole.
The second part of the challenge was that we would be passing this design off to a team of developers for them to create our pages. This required us to understand what the developers needed and to remove any roadblocks for them along the way.
Methodologies
Screener Survey | Affinity Mapping | Journey Mapping | User Interviews | Feature Prioritization | Design Studio | Wireframes | Prototypes | Usability Tests
Timeline
2 weeks
My Role
UX Design
UX Research
Team
UX Designers (4)
Software Developers (4)
Tools
Figma
Zeplin
Keynote
Zoom
ProCreate
Pen & Paper
Asking the right people
Screener survey
To discover meaningful insights for our research, we found the appropriate users to interview through a screener survey. The questions in the screener survey were centered around learning about who had prior experience in lending their support to non-profit organizations and other charitable causes either through volunteering or donations.
The follow criteria was determined in order to select candidates to be interviewed:
Must be engaged in supporting non-profit organizations in the past year.
Not required to be connected to the LGBTQ community.
To have either donated or volunteered. Having done both was not required.
From the 9 total responses, we found 5 users who matched all the criteria for user interviews.
Key Insights
How does the current site work?
Testing usability on the current site
Main Takeaways
Lack of imagery left users needing more connection & credibility
Users felt there were too many jarring blocks of text throughout the site
Finding up to date events and press release information proved difficult
Volunteer page was distracting due to sporadic blue “Contact Us” links
Meet Pat
“Every contribution is meaningful. What matters most, is giving whatever you can offer.”
With the understanding of the needs and pain points of our target users, a persona and journey map was created to better empathize with the user and guide us through the design process.
Opportunities
Add highlight video of Trinity Place work on the home page
Include volunteer testimonials on website
Re-prioritize navigation bar with clear call to action buttons
Create volunteer info packet (make available in PDF)
Update the staff page with photos and contact info
Update current and upcoming events
Show images of people’s donations or volunteer efforts in action
Provide referral program materials for volunteers for easy info sharing
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?
Vision & Design
Designing a solution
With Pat at the forefront of our minds and a better grasp of what the problem was, we conducted feature prioritization to help us get a better understanding of what features were going to be essential in our redesign.
MUST
Photography above the fold on the home page
Donate call to action on the home page
Clear way to access the volunteer page
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
Low fidelity sketches were created, pitched and critiqued via a design studio session which incorporate the features we determined as mandatory. These then led us into creating our medium fidelity wireframes.
Annotated Home Page
1. Feature 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. Added video content to humanize the organization & its residents
5. Made Donate into a distinct “Call To Action” button
6. Moved social media links to the body of the page since a lot of their 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
Annotated Volunteer Page
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
Usability Testing
Mid-fidelity wireframes
The mid-fidelity design and prototype was tested among 4 users. The participants were given three scenarios and tasks to complete during usability testing.
Key Takeaways
Users found the primary navigation clear and the site overall easy to use.
Users would like there to be updated event information directly on the site and not have to visit social media.
Final Design
High-fidelity wireframes
Home Page
Donate Page
Volunteer Page
Mobile Responsive Mockups
Usability Test
High-fidelity wireframes
Another round of usability testing was conducted after the high-fidelity wireframes and prototypes were done. The same scenarios and tasks were tested on a group of 4 different users.
Key Takeaways
Users were unable to locate the current events on the website.
Users had some confusion with the placement of the ‘Volunteer Now’ button.
Users found the site to be overall pleasing and credible.
Development
All visual elements within the Figma file were converted into components and exported to Zeplin to be handed off to developers. Progress updates as well as any further collaboration were addressed in daily stand-up meetings.
Next Steps
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.
Reflections
This project helped me realize how crucial it is for people to be able to access the right information easily about not just the organization but also its available services. By utilizing the tools in my tool belt, I was able to better understand the human psychology behind what drives them to lend their support to certain organizations.
I hope to further pursue this project and give back to Trinity Place Shelter in my own way with this redesign of their website.