Trinity Place Shelter
Responsive web design for a grassroots transitional shelter for LGBTQ* youth.
Overview
The Opportunity
Timeframe:
2 weeks
Team Size:
4
My Role:
UX Researcher
UX Designer
UI Designer
Tools:
Sketch
InVision
Figma
Miro
Keynote
Zeplin
Trinity Place Shelter's mission is to help homeless LGBTQ* youth in New York City to safely transition out of the shelter system and grow into positive and independent adults.
Objective: To assess and resolve any usability issues on Trinity Place Shelter's website and create a responsive design that ensures their primary users are connecting to the information they need to offer support.
For this 2-week sprint, my team & I focused our efforts on the shelter's:
-
Home Page
-
Volunteer Page
-
Primary Navigation
Methodologies:
Screener Survey | User Interviews | Affinity Mapping | Research Synthesis | Persona Development | Journey Map | Usability Testing & Report | Design Studio | Wireframe Creation | Rapid Prototyping | Developer Hand Off
The Scope
( Click Image to Enlarge )
Understanding the User
To kick off our research, a screener survey was created to ensure the candidates we interviewed had prior experience lending their support to non-profits organizations and charitable causes.
We reached out to 5 candidates who matched all of our criteria for user interviews, and found that our users:
Choose organizations to be involved with based on their beliefs and life experiences
Look to social media and word of mouth when researching charitable causes and their credibility
Would volunteer or donate more if they had more time or resources
Testing The Product
To understand if the organization was effectively communicating its necessary information, I conducted an initial round of usability testing on Trinity Place Shelter's existing website to learn about how users currently interact with the site and determine user pain points.
Home Page (Existing)
What We Found:
-
Lack of imagery on the site left users needing more connection & credibility.
-
User felt there were too many blocks of jarring text throughout the site.
-
Users struggled to locate up to date event and press release information.
-
Volunteer page found to be distracting & unclear in its options.
Volunteer Page (Existing)
With an understanding of the needs and pain points of our target user, the team turned our insights into a primary persona to help guide us as we delved deeper into the UX process.
Let's Meet Pat!
1
2
3
Research
1. Pat's journey hits a low while struggling to find clear information about the volunteer opportunities Trinity Place Shelter has to offer.
Intent
2. They cannot find any information about the events that Trinity Place Shelter posted via Instagram and feels confused as to where information may or may not be located on the website.
3. Pat's emotional state starts to rise once they are able to make contact with a representative via the provided email on Trinity Place Shelter's website and learns more about the available volunteer options.
Pat's Need
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?
Developing 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.
Pain Point
Lack of imagery on the site left users needing more connection & credibility.
Solution
Photos of volunteering in action above the fold
Too many blocks of jarring text on the site.
Clear calls to action to Donate or Volunteer
Recent news & event information exist on shelter's external social media accounts
Visible links to social media accounts above the fold on home page
Volunteer page found to be distracting & unclear in its options.
.png)
Streamline page & highlight each volunteer option with what it entails
Mid-Fidelity Wireframes
Home Page
Volunteer Page
Welcome to Trinity Place Shelter!
Everyone deserves a warm bed, a safe space, a roof overhead, love & acceptance.
Start Lending Your Support Today!
User Testing & Refinement
Based off findings in our second round of usability testing with our Mid-Fi prototype, we transitioned from Sketch to Figma to apply the user feedback we received to create our Hi-Fi mockups and prototype. In our final round of usability testing, we discovered a few problem areas that we had not considered in our new design.
Final Design
Task:
Use the website to learn about some upcoming events or projects.
Results:
3/4 users failed in locating links to updated information.
Recommendation:
Maintain up-to-date event information directly on the site & integrate a News & Events page on the primary navigation.
Task:
Use the website to find a way to volunteer.
Results:
2/4 users felt unclear whether the 'Volunteer Now' button was a title or call-to-action.
Recommendation:
Reconsider the placement of the 'Volunteer Now' button to resolve any user confusion.
Next Steps
-
Re-evaluate the location of the Volunteer Now button on the Volunteer page
-
Consider having a dedicated Events category
-
Change the copy of the social media bar
Reflections & Takeaways
Giving back to and supporting a community in need is a rewarding experience. And through this project, I’ve learned that experience is one that is dependent on being able to access crucial information about an organization and its available services. Using methodologies such as user interviews, affinity mapping, and building a journey map really helped me to delve deeper into the user’s psychology and reasoning behind what makes one inclined to lend their support to an organization.
I am excited to build on these methods that I have learned and hope to further pursue this project as a way to give back to Trinity Place Shelter, an organization whose mission I truly stand with.