YMCA of Columbia-Willamette Web Relaunch

Goals

The project's primary goal was to reevaluate and rebuild the YMCA of Columbia-Willamette's website, focusing on the user experience. From a branding perspective, the website needed to convey the warmth and community associated with the Y. 

The previous version of the Y's website had become a repository of loosely curated information that needed more governance and a maze of paths leading site visitors to, at times, unclear information. This new version needed to streamline and solve the content and site visitor confusion.

From a technology perspective, the site needed to leverage the developing and proprietary "YMCA Website Services" Drupal distribution. The Brooks Digital team also needed to alleviate the Y's fears of using Drupal. They were intimidated by the platform, believing it was not user-friendly and hard to use.

Solution

The Brooks Digital Team began the project with workshops, user interviews, tree testing, and other research methods focused on the site’s visitor experience. 

Our user experience workshops and discovery phase uncovered the need to address three primary user types:

1. Parents looking for programs for their children 
2. Individuals interested in fun and rewarding activities 
3. Seniors 65+ having problems connecting with others and finding suitable information for them quickly and easily

The new site uses a focused, intuitive, streamlined, and logical information architecture. Content falls into five main areas of interest:

• Y Calendars
• Programs
• Facilities
• Membership 
• General YMCA-CW information 

The visual design uses select YMCA branding, rich photographs, and stunning graphics to create a warm and inviting experience for all visitors. Inclusivity and the core values of this Christian-based organization inform the design direction. 

From a technology perspective, "YMCA Website Services," the Y's open-source Drupal distribution, forms the basis of this atomic approach to site creation and building, leveraging both Drupal Paragraphs and Layout Builder. (Our developers needed to understand the distribution and how to build out the underpinnings of the site to work with the distribution, content, and design direction).  

Before site building, we provided detailed training and inline authoring tips to assist administrators and set them up for success when building and editing the site. The extensive User Guide begins by discussing Drupal basics and specific terminology. It provides step-by-step detailed instructions for editing and building content throughout the site based on different user profiles. 

During the final site build, we worked collaboratively with the Y, fine-tuning layouts, editing information, and helping to build out pages needed to launch the website with its minimal viable content.

Outcome

With legacy pages and outdated information, the relaunch evaluated, streamlined, and improved existing content while identifying future opportunities for growth.

The page layouts provide a single place for site visitors to find information about a topic or program. The pages are warm and inclusive, leveraging the spirit of the Y to its fullest advantage through the use of friendly imagery, language, colors, and fonts.

The site architecture has been flattened and more streamlined, improving the user experience.

Both Drupal Paragraphs and Layout Builder allow site builders to create pages according to their needs and capabilities. Using an atomic approach to site configuring provides site builders with standard components that easily adapt to page content.

Detailed training and inline authoring tips assist administrators and set them up for success when building and editing the site. The extensive User Guide begins by discussing Drupal basics and specific terminology. It provides step-by-step instructions for editing and creating each content type throughout the site.