Introduction

The Boys & Girls Clubs of North San Mateo County (BGCNSMC) provides programming that empowers and inspires youth in the community to realize their full potential. However, their outdated website was impacting their impact and outreach. Our design team revitalized their online presence by revamping the visual appearance and usability, ensuring an effective experience for the two primary groups of website visitors: parents/guardians of youth and donors.

ROLE & TEAM
My role: Design Manager
5 Designers & 1 Project Manager
‍

DURATION
14 weeks (May - August 2023)
‍

TOOLS
Figma, WordPress, Miro
‍

the challenge

Parents/guardians and donors struggled with accessing and completing key actions with the cluttered, outdated website.

Parents/guardians wanted to learn about and enroll their youth in club programming, while donors wanted to learn about the BGCNSMC and contribute to the nonprofit. Text-heavy pages and overwhelming navigation were limiting their ability to complete these tasks.

The BGCNSMC sought our assistance in completely redesigning their website from start to finish. Taking on this challenge, we asked:

How might we guide parents/guardians through a seamless program enrollment process?

How might we encourage donors to contribute through an impactful, engaging website experience?

introducing our redesign

Homepage

programs page

View More Before & After Photos

"The opportunity to work with Develop For Good has been instrumental in the advances of our brand. The team listened to our concerns, clearly articulated the needs of our organization and community, and developed a plan to help reach our goals. Throughout the process we felt supported and heard, allowing us to leave the designing and implementation in Develop For Good's capable hands. The final product has been jaw-dropping. Our website has a clear audience in mind, there is ease of access, and the aesthetics have never looked better!"
‍
- Mandy Lipp, Executive Director of BGCNSMC

connecting with the client

“For years, BGCNSMC has struggled with expressing the amazing programs we offer through our website. The process for updating our website was complicated, time consuming, and often left un-touched.”

We held a kickoff meeting with the client to fully understand the problem scope and establish a project timeline and goals. Throughout the duration of the project, we met with the client weekly to share progress and receive feedback, ensuring effective communication and collaboration. Our key takeaways from these discussions include:

🔍 Users have trouble finding what they're looking for

❓Navigation is cluttered & overwhelming

🕦 Visuals are outdated & cluttered

interviews & problem discovery

User interviews confirmed a text-heavy and unengaging website with a poor navigation experience.

To evaluate how users interacted with the current website, we conducted usability tests with 4 target users– parents and potential donors. The biggest themes we discovered were (1) inaccessible navigation, especially concerning important actions, and (2) an unengaging, text-heavy website that didn’t impact the visitor as hoped.

Understanding User Personas: 1 website, 2 goals

Highlighting the 2 key user groups’ differing goals, needs, and frustrations

The two groups share some similar needs, including an engaging and user-friendly website, but they ultimately have different goals. This calls for a website experience that serves both groups effectively.

Brainstorming Workshops

More engagement, less clutter

Our team bounced many ideas around during our design workshops, prioritizing addressing the most common issues identified through our research.

information architecture

Prioritizing CTA accessibility and intuitive navigation

In our updated sitemap, we set apart the two most important actions (accessing the Parent Portal and donating) to a different layer in the navigation bar, allowing for easier access. We also simplified navigation by consolidating more specific sub-pages into landing pages with clear CTAs, thereby creating a less overwhelming structure that aligns with grouping mental models.

Low-fidelity Wireframes

Focusing on an easily digestible, approachable layout

We incorporated ideas from our brainstorming sessions, including cards, testimonials, and more images, among other ideas. Through design critique workshops, we iterated upon our designs to ensure cohesiveness across the website.

Style Guide

Adhering to the national Boys & Girls Clubs starting style guide while adding personal touches that foster a friendly, approachable environment.

I built a component library in Figma to ensure styling would be consistent throughout the website.

User Testing

Adding even more images! Pictures truly tell a thousand words.

We conducted a second round of usability testing with our high-fidelity prototypes, testing with 5 adults (parents/guardians and potential donors) and received positive feedback around the visual design and updated navigation. However, one improvement area across multiple interviews was adding even more images of the kids across the website– testers loved seeing pictures of kids interacting with one another, playing games, and engaging in immersive learning. Who doesn’t?

Photo credits to BGCNSMC

Development in wordpress

We faced a learning curve with WordPress, but knowing how to implement Figma designs to development was invaluable in teaching us better collaboration with devs in the future.

To ensure the client would be able to manage the website moving forward, we built all redesigned pages in the platform and settings they had previously used. With their selected WordPress theme’s limitations and quirks, we had to accommodate by adjusting some designs and the navigation bar. Though not ideal, these challenges taught us to be flexible while still accomplishing a user-friendly design.

Documentation & Handover to Client

In-depth documentation to ensure the client has everything they need to manage the website moving forward, including design style guides, design decision explanations, and WordPress limitations with tips for how to adjust accordingly.

Challenges & Learnings

The BGCNSMC website redesign was an incredibly rewarding project and taught me many valuable skills, from learning how to connect with different users of different goals through one design, to implementing Figma designs into WordPress. Most memorably, I had the opportunity to navigate serving both the client and the users’ needs. Treating the overall project as a design project itself helped me empathize with the diverse range of website visitors as well as the client, to in the end create designs that serve all.

meet the team!

Shoutout to my awesome teammates for their amazing collaboration, and of course, a big thank you to the BGCNSMC for granting us this opportunity to work with them.