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 with an MVP for YMCA of the North (YOTN).

Challenge

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 benefit the YOTN web experience in many ways.

  • More competitive – Focused website experiences aligned to unique industry (and audience) segments.

  • More connected – Front doors and Finders to help people find and engage with each program area.

  • Less complicated – Flattened pages and content make it easier to the Y’s breadth before going deeper.


  • Easier to manage – Reduce management time and cost by reducing page counts and providing better 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 informed our strategy, validated our tactics, and promised significant benefits.

 

Brand and program area alignment

Strategy

Streamline and simplify the product.

  • User experience – Four doors. One Y.

  • User interface – Clean and consistent.

  • Admin tools – Less (complexity) is more (flexibility).

Take small steps for big change.

  • Five stages – Transform the website into child sites. Move from program area to program area, with the parent site serving as the capstone.

  • Three steps – Convert. Validate. Improve.

Custom multi-site theme

Tactics

Work smarter, not harder.

  • Atomic Design  – Produce an Atomic Design system to help us redesign create and improve digital experiences faster and more consistently.

  • Drag-and-drop layouts – Use Drupal Blocks instead of Paragraphs to enable drag-and-drop tools for page layout and content management.

  • Custom theme (Peony) – Create a single theme capable of supporting multi-site experiences where each ‘subsite’ has a unique design expression while maintaining a consistent structure.

  • Single page applications – Develop web applications and widgets to highlight relevant and related programming within (and between) subsites.

Mobile-first design

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, including customer service.

  • Easier to manage – Fewer content types and better tools to improve the content management process.

  • Better. Faster. Stronger. – Modern 'building’ tools allow us reimagine and create better digital experiences moving forward.

 

Results

In addition to four industry-aligned subsites, the process and systems created to support them have directed contributed to YOTN’s tremendous online revenue growth (from $20M to $50M a year). We are also realizing the strong product and experience gains we hoped for.

 

Camps and Adventure subsite

Fitness and Wellness subsite

Child Care and Learning subsite

Social Impact subsite

 

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 to support a multi-site strategy, giving each ‘subsite’ a unique design expression within a consistent framework.

  • Content Finders – Seven unique Finders were created as a single-page applications to make it easier to find and learn about programs, services, and products across the association. Finders include (1) Activity Finder, (2) Cabin Finder, (3) Event Finder, (4) Location Finder, (5) Membership Finder, (6) Post Finder, and (7) Summer Program Finder.

  • Widgets and views – Every Finder also included corresponding one or more widgets to help us surface their content on pages and posts within each subsite.

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 across all categories for 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.