JCC of San Francisco

Helping users discover, engage, and transact with everything this community organization has to offer

Quick Facts

Overview

The JCC of San Francisco (JCCSF) is the second largest Jewish community center in the country. It serves over 100,000 participants a year with programs, camps, schools, and fitness classes.

Core Activities

On-Site Stakeholder Interviews & Workshops — Digital Surveys — Competitive & Industry Analysis — User Personas — Sitemapping — Information Architecture — Wireframe Sketching — UX Writing

The Challenge

JCCSF was missing out on prospective members — they were getting lost on the website, unaware that JCCSF had so much to offer them.

This was the conundrum JCCSF faced: their longtime members had learned how to navigate their clunky website structure, but JCCSF couldn’t figure out how to display the breadth of their offerings in a way that could entice prospective members.

Given the hundreds of events and classes that they offered throughout the year, the JCCSF needed a website that could facilitate easier transactions that fulfill the user’s needs, while also inspiring the user to discover all the other things JCCSF has to offer.

Key Issues

↪︎ Lack of cohesion between sections, creating many disjointed silos

↪︎ Browsing was difficult with excess pages, dense copy, external links and PDFs

↪︎ Inflexible to the seasonal needs of the business

↪︎ Membership and donations were not highlighted enough

↪︎ Site was not responsive

Stakeholder Quotes

“There is no cohesiveness throughout the website. It doesn’t encourage people to browse through the different departments.”

— Chief Program Officer, JCCSF

“It’s hard to interact and find things on the website. Users get lost trying to find what they are looking for.”

— Development Ops Manager, JCCSF

“The current website does not do good job at representing the vibrant and sophisticated city it serves.”

— Vice President of Marketing, JCCSF

The Solution

Like the JCCSF itself, the website had to be vibrant, interconnected, and ever-evolving.

Our grand vision? To unify JCCSF’s disparate programs, events, services, classes, schools, camps, classes, lectures, pop-ups (and more..) into archives that were easy to filter and easy to surface throughout the site. Powerful search functionality and curated menu design would help longtime members and members-to-be find exactly what they were looking for.

Key Objectives

↪︎ Architect program and event archives that integrated with 3rd-party registration

↪︎ Restructure the main navigation to only feature top pages and quick links

↪︎ Build a fast and predictive sitewide search of all content

↪︎ Present popular benefits and membership packages in a digestible format

↪︎ Place donation calls-to-action throughout the website

Transforming Navigational Methods

Main menu design and search were two things that got a huge upgrade.

When doing research on the menu system, we considered a full-screen takeover triggered by a hamburger or a more traditional horizontal menu. While the full-screen takeover would have given us more real estate to work with, we knew it might feel too foreign to JCCSF’s older members. On the other hand, simple dropdown lists would have been overly minimal, lacking the depth and hierarchy we knew we would need. Mega-menus were a perfect compromise.

We got each department at JCCSF to commit to 6 featured pages for their dropdown, plus an overview page and 3 quick links driving to the top trafficked pages on the site. This structure provided just enough detail to accurately represent each department and direct browsing users without overwhelming them.

For the search functionality, we drew inspiration from ecommerce giants like Best Buy and Target, where the search field was big, prominently placed, and oh-so-powerfully built. Users could type in what they were looking for, such as “swim”, and immediately get a list of predictive results for swim classes, swim programs, swim events — each result labeled accordingly. Or, they could opt to search by age group, an option that would take them to a pre-filtered version of the program archive.

Less Clicks. More Content Strategy.

JCCSF didn’t necessarily need to get rid of content, it just needed an architecture that would allow content to shine.

For this reason, the information architecture phase included numerous custom templates that allowed us to get highly creative:

↪︎ Programs Archive & Profiles

↪︎ Events Archive & Profiles

↪︎ Donate Page

↪︎ Become a Member Page

On Program Profiles, the combination of introductory copy, program images, upcoming [program name] events, [program name] FAQs, facility hours, Become a Member CTAs, testimonials, [program name] sponsors, related programs, and donation CTAs work in harmony to provide the user with all the information they need to convert.

While “Donate” or “Giving” is absent as a section in the navigation, the primary call-to-action, “Donate”, takes the user to a beautifully constructed Donate landing page. It positions a donation form (that seamlessly integrates with their donation system) on the hero, followed by impactful stats, links for each way to give, a corporate sponsorship CTA, a donor spotlight component, and a grid of fund development staff cards, all of which help to persuade the user to make a donation online. I really wanted this page to be an important messaging opportunity for JCCSF rather than just linking the user directly to a donation form (which is usually a poorly integrated, clunky user experience).