Revamping the BIPOC Support Foundation Website
ROLE
UX Designer
TEAM
Justin Luu, Evan Chen, Sophia Ho, Hung Ho, Zihan Zhao
SKILLS
User Research, Problem Analysis, Wireframing, Prototyping
TIMELINE
April 2025 - June 2025
How did this project come to life?
This project focused on a website redesign for the BIPOC Support Foundation (BSF), a non-profit organization that aims to empower the BIPOC youth community through equitable education and resources. They reached out to our team with the goal of making their website more accessible, readable, and reflective of their mission, as the existing website was outdated and did not accurately reflect its recent milestones or current initiatives.
By collaborating with the foundation's Associate Executive Director, Blanca Maribel Lozano-Willey, my team and I were tasked to design a high-fidelity website prototype that would increase accessibility, user engagement, and better showcase the organization's impact.
Identifying the problems… 🔍
To begin the project, our team first needed to understand the user's needs and our stakeholder's requests.
We conducted a multi-faceted research and discovery phase, which included a heuristic analysis of the existing website and other non-profit organizations, as well as in-person user surveys.
Heuristic Analysis
We benchmarked against nonprofits, such as Teach for All and A Reason to Survive, noting effective practices like strong visuals, simplified text, prominent calls-to-action, and translation features.
User Research
After conducting surveys to gauge the overall user response to the original website, we uncovered several key trends.
%
noticed design inconsistencies, such as a mix of flat and 3D buttons, uneven spacing, and varying font sizes.
%
of participants responded positively to the mission statement and the use of imagery, appreciating the authenticity of the photos.
So, what are the design issues?
Based on our research, the original BSF website had several key issues that presented significant challenges for users and stakeholders.
1
Website Readability
The content was excessively wordy and text-heavy, making it difficult for users to read and quickly digest the information.
2
Outdated Content
The content did not accurately reflect the organization's current impact, milestones, or newly launched programs.
3
Unclear Design
The spacing and font sizes were inconsistent throughout the site, making the layout appear visually inconsistent.
After identifying these core issues, we framed our project with a clear design goal:
How might we redesign BSF’s website to communicate their mission more clearly, improve readability, and create easier pathways for families, funders, and volunteers to engage?
What did we sketch out first?
Before jumping into high-fidelity designs, we developed wireframes to establish the structure and flow of key pages. We designed the homepage first as a team, using it as a foundational model to ensure a consistent and cohesive layout across the entire site. From there, each team member took ownership of specific pages, creating individual prototypes for sections such as "Our Story," "Programs," "Media," and "Our Impact."
Testing out the designs! 📝
After developing our low-fidelity designs, we moved on to creating the high-fidelity prototypes. We then conducted usability testing using a within-subjects A/B testing approach. This method allowed the same users to experience both the original website and our redesigned prototype, providing a direct comparison of their responses and behaviors. The goal of our testing was to understand which design users found easier to navigate and which one communicated the mission better.
Our key findings from the testing were:
Comments about the Original Design
“a lot of long paragraphs of text that were too small”
“overall look and feel seems to be outdated”
“confusing volunteering information”
“very passionate and meaningful messages”
Comments about our Redesign
“concise and easier to understand”
“more modern and playful”
“straight to the point messaging”
“better layout and color scheme”
%
of interviewees agreed that the redesign communicated the organiation's mission statement better.
%
of interviewees stated that the redesign was easier to use due to an improved color palette and simpler navigation buttons.