This local Houston nonprofit provides help and support for LGBTQI+ youth at their community center. However, they have a wider audience of youth who desperately need help, and yet cannot go to their physical location. As a result, the youths' unhealthy and even dangerous life circumstances continue, because there is currently no effective way to assist them with resources to facilitate positive impact.
In April 2024, our team was tasked with redesigning the website of a local nonprofit to improve their online presence. The goal was to provide a more efficient, intuitive, and informative user experience that would result in higher traffic, and thus, higher volunteer and donation rates.
During the 3-week timeline, I worked directly with two other UX Designers to ultimately deliver a "design package" to our client, which included a style guide, high-fidelity wireframes, and a clickable Figma prototype.
As a team, we were able to engage with the director of the nonprofit to determine needs, with a few touchpoints throughout the project to keep her updated. We were also able to speak with several working adults in the local area, many of whom focused on serving at-risk youth.
While the overall goal of the project was for the redesigned website to gain more traffic, which would result in a greater number of volunteer signups, designing a solution for the platform was complex because there were two groups of users we needed to serve: at-risk youth who were looking for resources to help themselves, and allies who were trying to learn more about the organization and upcoming events so they could sign up to volunteer.
From our user interviews, we distilled key insights into a user persona, Evelyn.
We focused our user interviews on why the users were trying to access the website, and what they were trying to do. We found that most users were interested in volunteering, and learning about the organization and corresponding opportunities, to help them make that decision.
During interviews, we discovered that individuals supporting youths-at-risk worry about the growing list of diverse needs and issues young people face. They struggle with balancing the line between helping youths-at-risk and influencing them in a way the law may deem inappropriate.
Right off the bat, I performed a heuristic analysis of the client's current site. Together with our user insights, this helped guide us toward a redesign that would help the client achieve their objectives.
We used competitor analysis of similar sites to help us generate an initial user flow and sitemap.
[We weren't able to measure success metrics.]
[1. What we could assess was the client's satisfaction.
2. If we were able to access data, we would have measured these things:
Because... would help us understand... and iterate on... later.]
We also thought of features A and B, which we did not get to implement. If we worked with a development team that said we'd have to choose between the two, we would've gone with [A or B] because...]
We didn't have a chance to measure outcomes, as it was outside of the project scope to implement the solution (the client only hired us for the design). However, if we did have that opportunity, we would measure these Key Performance Indicators (KPIs):
- sadf
- asdf
-
Our low- and high-fidelity prototypes for the client's redesigned site were done in Figma.
When we tested our prototype with users, they felt:
We listened by:
We conducted guerrilla, remote moderated user tests of our redesigned website prototype. Test users consisted of people who volunteered at various local nonprofits, and individuals who identity as LGBTQI+.
Our 3 tasks included:
We also developed a style tile as part of our deliverables to our client, so they could inform future development teams on how to properly implement our design.
We created this quick digital flip book so our clients could easily our design style information with stakeholders.
Vital to the safety and wellbeing of at-risk youth who are looking for resources and help in an environment that is, unfortunately, all too often dangerous, an "exit page" button allows them to quickly switch to an alternate site that keeps what they're researching confidential.
While we were not able to obtain quantitative data to gauge the success of our redesign as compared to the client's original website design, one qualitative impact we achieved was the happiness of our client:
This looks wonderful! I really love the flow of this and you all have incorporated several things that I’ve had in the back of my mind to do for a while now (the exit now button, a day in the life videos, having our events on our home page, etc.). This is really great work and if it’s okay, I’d like to share it with the rest of our team. I think we will definitely incorporate some of these ideas!
In future project opportunities, we would consider the following key performance indicators to more quantitatively measure the success of our redesign:
Additionally, if we had more time to work on this project, here are some points of improvement we were planning to try:
