YMCA Responsive Set

The Numbers Speak for Themselves

We delivered to the YMCA of Greater San Francisco is dramatically faster, more visually engaging and much easier to use than the old site. It’s the kind of successful work that makes us proud.


Building a Cohesive User Experience

With content fragmented across 14 different microsites (one for each branch), visitors had a hard time finding classes and programs they were interested in. To solve this, we needed a radical departure from their existing structure. We consolidated their content into cohesive list pages on a single site, so visitors can see Classes (and other content, like Programs or Job Opportunities) across all branches and easily filter by category. Consolidating content made information easier to find and supported their new membership model for 2016, where members can use any branch facility with a single membership.

iPhone Mockup

Delivering Intuitive Navigation

The new site quickly conveys the cohesive story of 14 branches coexisting beneath the overarching YMCA of Greater San Francisco umbrella. We house the branches within the global site structure but maintain a local navigation that’s specific to each location.

Screen Shot Chinatown YMCA
Screen Shot Richmond Distract YMCA
Screen Shot Marin YMCA
Screen Shot Presidio Community YMCA

Designing Consistency with Flexibility

While most of the branches share similar content, we had to account for a few outliers. We provided a default set of navigation for each branch site, with the ability to add additional pages as needed. This gave YMCA’s content authors flexibility and consistency, making it easy to maintain all aspects of the site.

To showcase the unique offerings of each branch, we designed the facility pages to feature large scale photos of the physical spaces. This helps visitors see what they can expect when joining the Y, and in turn helps drive membership sales.

iPad Case Study

Bring the YMCA Story to Life

The YMCA is the oldest nonprofit in the country, with a legacy of changing lives, connecting communities and improving lives for countless people. We illustrated this story throughout the site with rich photography which encapsulated the YMCA experience.

Photos became a central element of our design system. Their prominence helps visitors understand what it’s like to be at the Y. We also decreased the amount of text across the site and upgraded the site’s typography to improve readability.

The net result is an easy-to-use site that draws in the visitor while projecting positivity and optimism with a new vibratant look and feel.

Screen Shot Mission Vision
Screen Shot Programs
Screen Shot Youth Luncheon
Screen Shot Join
Screen Shot Giving Programs
Screen Shot Wellness Stonetown
Services Delivered
More Case Studies

Taking the vision of a global leader in API management and turning it into reality

Pioneering a Fortune 500 Drupal 8 site for a top ranked engineering innovator