Contact Us

Website Design

Boys & Girls Club Silicon Valley (BGCSV)

Optimizing engagement with streamlined navigation, refined aesthetics, and enhanced designs using Boys & Girls Club of America’s brand colors.
Casestudy > BGCSV

INTRODUCTION

Re-imagining the BGCSV Web Experience

Optimizing user engagement through streamlined navigation, refined graphical aesthetics, and enhanced page designs, all infused with Boys & Girls Club of America’s distinctive brand color palette.
About Us

Optimizing engagement with streamlined navigation, refined aesthetics, and enhanced designs using Boys & Girls Club of America’s brand colors.

Client’s Business Goal

Highlight BGCSV’s vision, mission, core beliefs, and community impact to raise awareness of the organization’s offerings. Foster engagement with existing community members and expand the member base.

Problem Statement

Exploring ways to strengthen the website’s structure, improve navigation, and refine information architecture to cultivate an intuitive user experience. The goal is to boost lead generation and expand the customer base for BGCSV.

Area of Focus

Transforming the BGCSV website while incorporating existing branding guidelines for a seamless user experience. Identified areas of focus include:

Key Focus Areas
  • Catering to Diverse User Groups
  • Enhanced User Journey
  • Content Readability & Accessibility
  • Mobile Responsiveness

Discover

During the Discover phase of the BGCSV Website Redesign, we assessed the navigation structure, site needs, and competitor analysis. This thorough evaluation laid a strong foundation for a redesign that exceeds user expectations in today’s digital landscape.

Analysis &

Inspirations

www.codeninjas.com

Analyzation

  • Use of relevant graphics.
  • Information hierarchy – effective use of white space and copy
  • Effective use of typeface and color for headings and titles
www.bgctm.org
www.kidsclub.org
www.kidsclub.org

Analyzation

  • Streamline the navigation structure.
  • Clear and intuitive call-to-action (CTA) buttons
  • Consistent and user-friendly content layout

KEY INSIGHTS - Discovery Phase

  • Comprehensive analyses of current website and competitors websites were conducted
  • Outlined specific requirements tailored to enhance the BGCSV website
  • Gathered clients’ anticipations regarding website functionality.
  • Identified Project Goals
  • User Journey Enhancement
  • Content Readability and Accessibility
  • SEO Improvement

Define

We began designing the navigation architecture and Look & Feel posters, using existing brand colors for inspiration. This was followed by creating user flow diagrams to guide website navigation and menu structure.

Information

Architecture

User Flows

KEY INSIGHTS - Define Phase

  • Conducting stakeholder interviews.
  • Redesigned Information Architecture (IA).
  • Identified primary users and created user flow diagrams.
  • Defined top navigation menu structure.

Design

During the design phase, we focused on creating a visually striking and cohesive framework. Low-fidelity designs set the aesthetic tone, while a carefully selected typeface defined the site’s identity and user experience. Strategic use of brand colors reinforced visual coherence, and the unique Silicon Valley vibe added a distinctive touch to the design.

Wireframes

Typography

Colors

Graphics

Children of the Silicon Valley

The Story

The Story

Before: Dated design and graphics.

After: Use of aesthetically pleasing infographics for a visually engaging user experience.

Infographics for important content.

Before: Content was simply listed as shown above, lacking aesthetic consistency.
After: Content shown with strong iconography for visual balance.

Content hierarchy

Before: Information seemed disorganized and challenging to find
After: Well-defined content hierarchy contributed to user clarity and satisfaction

Functionality

Restructured menu items

Before: Too many menu items in the topnav.
After: Essential menu items were designed to be highlighted for quick access by priority users. Additional categories were arranged within hamburger menu.

KEY INSIGHTS - Design Phase

  • Designed low-high fidelity pages for the website
  • Choosing clean and simple typefaces.
  • Used of established brand colors.
  • For seamless adaptation, the website was made responsive with all devices.

Deliver

In the final stage, we developed and launched the website, prioritizing responsiveness across all devices. Rigorous QA/QC ensured smooth functionality, leading to a successful launch and marking the website’s entry into the digital world.

KEY INSIGHTS - Deliver Phase

  • Developed a website that embodies a “Youthful & Sophisticated” aesthetic, meeting the client’s envisioned style and preferences.
  • The website’s polished and user-centric design was the outcome of dedication, teamwork, and collaborative efforts.

Takeaways

  • The increase in conversion rate in the first 6 months (1.9%-2.2%)
  • Increase in engagement rate (40% – 45%)
  • Business opportunity through leads generated worth ($3M)
  • The increase in website traffic within 6 months (40%)
  • Quality leads/ month (12 –15)

Words from our client

Ian Schwartz

The Tru Performance team is a great partner in our efforts to build out and improve our digital presence. They are dedicated to meeting our high (and sometimes shifting!) needs. Additionally, the team goes above and beyond to recommend ways to quickly approve and adapt our processes to leverage better the tools we have in our tech stack for sales and marketing. Great team. Great partners.

Let’s build digital experiences that drive impact. Start a conversation today.

Meraaki Designs is a global creative ops studio delivering digital execution, automation strategy, and interface design in collaboration with trusted tech partners.

Lets Connect

Location:

  • IND
  • USA