Role
UX Designer
Timeline
October 2025 - January 2026
Team
5 Designers
Skills Used
User Research, UX/UI Wireframing, Figma Prototyping
OVERVIEW
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.
RESEARCH
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.
User Research
The organization's current website.
PROBLEM STATEMENT
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
The content was excessively wordy and text-heavy, making it difficult for users to read and quickly digest the information.
2
The content did not accurately reflect the organization's current impact, milestones, or newly launched programs.
3
The spacing and font sizes were inconsistent throughout the site, making the layout appear visually inconsistent.
4
The site had important pages that were difficult to find, and the volunteer sign-up process was confusing to navigate.
LOFI PROTOTYPES
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."
USABILITY TESTING
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:
“lots of long paragraphs with really small font”
“overall look and feel seems to be outdated”
“confusing volunteering information”
“very passionate and meaningful messages”
“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.
HIFI PROTOTYPES
The final designs 🎨
Utilizes hero slides to capture the user's attention; presents BSF's impact statistics and a mission statement to help users quickly understand the organization's work; added "Community Voices" section to showcase the foundation's authentic connection to the people
Home Page
Utilizes hero slides to capture the user's attention; presents BSF's impact statistics and a mission statement to help users quickly understand the organization's work; added "Community Voices" section to showcase the foundation's authentic connection to the people
"Our Story" Page
Utilizes a clean layout and bolded text to make the organization's narrative more digestible; divides the foundation's journey into clear sections to create a logical flow that's easy to follow; balances visuals with text to effectively communicating BSF's core values
"Our Impact" Page
Replaces vague statistics with tangible, quantifiable data; prominently features the organization's 2024 Annual Report and visually appealing testimonials; added interactions to draw users in and create a compelling narrative about the foundation's positive impacts