YMCAcw.org
Case Study

A major website redesign & upgrade for the YMCA of Columbia-Willamette

Home/The YMCA of Columbia-Willamette Case Study

About the Client

The YMCA of Columbia-Willamette is a nonprofit association in Portland, Oregon, and surrounding areas. It is a branch of the YMCA whose presence and partnerships deliver positive change in 10,000 communities across the United States.

Goals

The project’s primary goal was to reevaluate and rebuild the YMCA of Columbia-Willamette’s Drupal website, focusing on the user experience. The new website needed to streamline and solve the content and confusion of existing site visitors.

From a branding perspective, the website needed to convey the warmth and sense of community associated with the Y. 

From a technology perspective, the site needed to leverage the developing and proprietary “YMCA Website Services” Drupal distribution. We 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.

Our Role and Tasks

In partnership with the technical and project management teams at Brooks Digital, this project utilized our full range of expertise and included:

  • Messaging analysis and recommendations
  • Discovery and needs assessment
    • Content/site audit
    • User research and testing, including tree testing and card-sorting exercises
    • Facilitating and analyzing results from user experience workshops
    • Content mapping, analysis, and recommendations
  • User experience design
    • Wireframing
    • Visual and interface design
    • Design management
  • Technology integration
    • Designing a component-based solution leveraging standard Drupal technologies and the YMCA distribution
  • Support
    • Documentation
      • Authoring/user guide
      • Brand guides
    • Training
    • Creating and adding inline authoring aids to the authoring environment
    • Quality Assurance

Site map: Programs

Results

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

The new 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.

Design

The new site uses three select YMCA color palettes to differentiate the site’s functions. All pages use rich and inclusive photographs and stunning graphics from the Y’s photo library to create a warm and inviting experience for all site visitors and to assist in telling the Y’s story. The generous on-palette color blocking and friendly contrasting icons provide additional warmth and levity for site visitors.

Page layouts reflect their purpose and functions, use standard components to provide a consistent experience to site visitors, and generously include Member Stories to ensure inclusivity to all.

Site Architecture

The flattened and streamlined site architecture improves the user experience for the three primary user types identified during the discovery phase:

  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 newly launched site focuses on Schedules, Programs, Facilities, and Membership information.

The site uses a focused, intuitive, streamlined, and logical information architecture while leveraging the power of Drupal.

Technical

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

Detailed training sessions, a user guide, inline authoring tips, and continued support set the site administrators up for success.

Program example

Outcome

Working with Brooks Digital, our job was to evaluate, strategize, redesign, and rebuild the YMCA of Columbia-Willamette’s website to meet the needs of its diverse site visitors and members. 

The Y’s open-source Drupal distribution, “YMCA Website Services,” formed the technical foundation for this atomic approach to site creation and building, leveraging Drupal Paragraphs and Layout Builder.  While we led the project’s design, user experience, and information architecture phases, the Brooks Digital development team quickly and decisively adapted and built out the technical components to reflect the directive. Their professionalism, expertise, and keen collaboration were essential for the project’s success.

The Y clearly understands and appreciates our process, findings, philosophy, and implementation. This site was designed to respond to typical website visitors’ needs and actions and solidly follows that approach.

The Brooks Digital team continues to provide support services, working with the client to add functionality, provide updates, and answer any and all questions that this happy client poses.