YMCA Website Transformation

I was originally recruited into the Y as a digital design director via Open Y, an opens-source website distribution created to unify the YMCA federation. Prior to the Y-USA platform transition, I proposed a way to reimagine and streamline Open Y, which I set out to prove as an MVP initiative for YMCA of the North (YOTN) that quickly took root.

Challenges

The YOTN website presented significant challenges the new system would need to overcome.

Confusing – ymcanorth.org had become a labyrinth of outdated and inconsistent information. 
Disconnected – The connections between programs, locations, and even web pages were often confusing.
Counterproductive – Our program areas were forced to compete for attention internally, as well as externally.
Hard to manage – Staff managed thousands of pages built using hundreds of Drupal paragraphs.

Opportunity

Our method promised to improve the YOTN web experience in fundamental ways.

More competitive – Focused experiences that help Y program areas compete better within their unique industry segments.
More connected – Front doors and Finders to help people find and engage with each program area.
Less complicated – Flattened pages and content to make it easier to appreciate all the Y does before going deeper. 
Easier to manage – Reduced site management time and cost by reducing page counts and providing better management tools.

Method

The YMCA does more than most people realize. YOTN serves four distinct audience segments: camps, child care, fitness, and social services. Each segment has four audience groups: participants, staff, alumni/boards, and donors. And the audiences within those groups run the spectrum.

We needed a way to make such a complex organization feel simple.

Website transformation is never easy, but the challenge inspired our approach, informed our strategy, validated our tactics, and promised to produce significant benefits.

Approach

Streamline and simplify.

User experience – Four doors. One Y.
User interface – Clean and consistent.
Admin tools – Less is more.

Strategy

Small steps to big change.

Five stages – Transform the website into child sites. Move program area to program area, with the parent site providing the capstone.
Three steps – Convert. Validate. Improve.

Tactics

Work smarter, not harder.

Atomic design – An atomic design system would help us redesign, create, and improve digital experiences faster and more consistently.
Drag-and-drop layouts – Using Drupal Blocks instead of Paragraphs would allow us to create drag-and-drop page layout tools.
Custom theme (Peony) – One theme to create multi-site experiences where each subsite has a unique design expression while maintaining a consistent structure.

Benefits

Leave it better than you found it.

Improved design – Mobile-first, accessibility focused, and brand pre-positioning
Easier to use – Focused content, simplified navigation, and Finders
Easier to support – Fewer pages and better Finders benefit all.
Easier to manage – Simplified content types with drag-and-drop page layout.
Better. Faster. Stronger. – New tools will make it faster and easier to create new tools.

Results

The process and systems we created played an instrumental role in YOTN’s tremendous online revenue growth (from $20M to $50M a year) in addition to strong product and experience gains.

Product Gains

Atomic design system (Trillium) – A first for the YMCA movement, Trillium is a documented and centralized code library to help designers and developers create consistent and compliant UI designs.
Drag-and-drop page building – Using Drupal Blocks instead of Paragraphs allowed to improve the page layout experience. It also significantly reduced the number of content types from hundreds to tens, making it faster and easier to manage content.
Custom theme (Peony) – Peony was created, giving subsites unique design expressions within a consistent framework.
Single page applications – Every Finder was created as a Block. This allowed us to add the same block to each subsite, so that content from one program area could easily be surfaced or discovered in another. Finders include:

Activity Finder
Cabin Finder
Event Finder
Location Finder
Membership Finder
Post Finder
Summer Program Finder (SPF)

Widgets and views – Every Finder also included corresponding widgets and application views to help us surface their content on other subsite pages and within posts.

Experience Gains

Contemporary design – Pages look nicer and undergo continuous improvement to reduce friction and increase consistency across platforms and devices.
Improved experiences – The new experiences were preferred by more than 80% of test participants and 100% of customer service.
Performance gains – According to Google PageSpeed, the new page designs immediately outperformed the old on both mobile and desktop devices.
Reduced admin times – New pages are at least 3x easier to create and manage, while overall content types and page counts have been reduced by factors of 5-10x.
Higher production – YMCA of the North can now design, produce, and improve new tools in record time.

Want to know more?

I love to get nerdy on the details. Let me show and tell you more.

Let's Connect