+ Black Girls Code
From Mission to Movement: Building the Black Girls Code Nonprofit WebsiteOur roles
Overview
We began with a brand—holding workshops with over 230 nonprofit stakeholders and listening deeply to students, parents, volunteers, and donors. Honoring the legacy of Black quilting as a form of storytelling, we developed a flexible, learner-powered visual thread identity that celebrates resilience, culture, and collaboration—making everyone feel seen, heard, and part of the BGC story.
BGC’s refreshed identity and website bring its mission to life—making empowerment, inclusivity, and innovation part of every click.

With the new brand in place, we built a website that mirrors that energy: a home page that welcomes, a student showcase that inspires, streamlined navigation, and clear calls to get involved or support. Every piece of the site was created to empower, inform, and uplift the BGC community.
The Black Girls Code website project began with a deep discovery phase. Our goal was to understand not only the organization’s mission but also the needs and behaviors of its audience. We analyzed how visitors interacted with the existing site, what frustrated them, and what elements needed to be preserved or improved. We engaged students, volunteers, and donors, asked countless questions, and mapped out the pain points. This process gave us a strong foundation and ensured that every design and development decision would be grounded in real audience insights.

With this knowledge, we moved into defining the information architecture, sitemap, and wireframes. This phase took several weeks of iteration, but it proved invaluable. We focused on making it easy for visitors to discover how to plug in — whether as learners, partners, or donors — and to explore Black Girls Code’s programming in a clear, welcoming way. By the time our UI designer joined the process, the foundation was solid, and the new brand identity could be seamlessly translated into a beautiful and functional website design that truly resonated with the target audience.

From a development perspective, we chose to build with modern technologies—a headless CMS (Sanity) paired with a React-based framework. This decision wasn’t just about performance and scalability; it was also about setting an example. Since Black Girls Code empowers young women learning programming, we wanted the site itself to embody best practices in contemporary web development.
Finally, as a playful touch, we implemented hidden easter eggs within the website’s code. These small surprises created an extra layer of engagement, encouraging curious visitors—especially the students exploring coding—to experiment and learn. It also gave tutors a practical teaching tool, showing how code can be both functional and fun.

The redesigned site turns BGC’s mission into an interactive experience—welcoming, inspiring, and easy to navigate—launched at AFROTECH to spotlight the future of Black Girls Code.
