YMCA

After 166 years of building strong kids, strong families and strong communities around the globe, the YMCA rebranded in 2010 to become known simply as, “The Y.” The new logo, reinvented in five different color palettes, conveyed the richness and diversity of the brand.

Nearly a decade later, the YMCA of Central Florida, active since opening its doors in Orlando in 1885, also needed a more modern look. The nonprofit’s mission is to improve the lives of the 33,000+ members it serves across 18 locations, yet it was lacking the tech tools to educate and stay connected to those people, much less retain their membership against a fast-growing competitor base.

The Y needed a partner that would give them a modern, brand-focused digital presence that allows them to update content freely and respond quickly with digital campaigns. The new website also needed to act as a catalyst for a big 2020 goal: developing full ecommerce capabilities that will make it easy for visitors to register and pay for memberships, classes, and programs online.

We began by studying the Y’s history and brand strategy. We held a discovery workshop with their key stakeholders to understand what an engaging online experience would look like for their community. Our brand team identified gaps in the user journey through tours with staff and interviews with members. These observations and insights helped us recreate an online experience centered around our target audience’s needs, whether that’s signing up for after-school programs or getting real-time updates on class schedules.

Through our research, we identified what makes the Y a choice gym destination for its members and determined that a slick website with the latest design trends would contradict the essence of what makes the Y a home to so many. It was the physical experience and print materials that held the closest ties to that essence. This became our inspiration. In our restraint of color and animation we found a connection back to the members.

We saw the triangle in their logo as metaphor for what the Y does, serving people by helping them move upward & onward, and even placing the logo to the upper right. The first screen on the home page became a digital “door,” opening and taking the viewer into transition. Because the Y is for everyone throughout the world, the rebrand included five logo variations with different color palettes. We wanted to highlight this diversity by dynamically changing the navigation bar and logo based on the color the staff chooses for each content section, which gives the site a “breathing” rhythm as the viewer scrolls through pages without adding any steps for the staff editors.

The Y also needed to evoke energy and life, but for a site with 500+ pages, the vast majority were static and primarily text. So we created the concept of “speed stripes.” As the viewer scrolls through a page, certain sections have animated tails of color corresponding with the logo. This interaction technique was also incorporated into primary buttons.

With 135 years already under their belts, the Y needed a flexible website that would continue to grow with them. A data-driven backend grants their team speed while efficiently funneling traffic to their site. The content of every page is set up using a library of 40+ custom-built components, so the Y can create compelling and rich content on the fly.