Family Ties: A Design Guide for Association Platforms

Visual and content consistency across a national association and its affiliates’ websites helps audiences understand their shared vision, mission, and impact. It’s easier for users to learn and for content editors to maintain.

But on the other hand, differentiation in the design of those sites decreases repetitiveness for users moving between them. It allows unique regional identities to shine, helping users understand and connect with their local affiliate and community. 

So how do you create a design system that offers just the right amount of visual flexibility? Here’s how we do it.

First, Define the Goal

Association brand families vary widely in the consistency of their visual identities across member organizations. On one end of the spectrum, there’s the unified brand model, where all aspects of identity (logos, visual design, communication) are tightly controlled and consistent, if not identical, throughout all affiliates. 

On the other end, there’s the “house of brands” model in which networks only share minor aspects of their visual identities—if any—with each other, or with their parent brand.

Getting agreement on where an association should (or reasonably can) be is paramount to successfully designing their web platform. This work starts well before the actual design. We recommend:

• Holding strategy meetings early to discuss the ideal level of visual cohesiveness vs. flexibility for individual member sites on the shared web platform. This may need to be revised after the next recommendation where the ideal meets local reality.

• Including as many local affiliates / chapters as possible to make sure all voices are brought into the conversation and heard, as centrally-imposed brand decisions can be a source of tension within organizations.

Next, Explore Options for Visual Expression

Once you have agreement on the general level of distinctness that will work for the project, determine in what ways chapter sites should look and behave like one network, and in what other areas should they be able to celebrate their visual uniqueness.

Options for customizing visual elements could include:

• color palette
• typography choices
• or other visual attributes

Color Palette

In some cases, each local site may be given the option to customize colors—either for just certain areas of the site, or the entire palette, side-wide. Allowing this customisation, though, means that an extra step of double-checking all resulting color combinations have enough contrast for accessibility.

Typography

Fonts are not universal when it comes to sizing. Two fonts side-by-side, both at the same pixel size, will often display at different perceived sizes on the screen. Allowing a choice of font options may mean tweaking the sizing of each so they appear the same relative optical size, and don’t inadvertently compromise the resulting text lengths of website content.

Other Visual Attributes

Additional display options can be built into association platforms where content editors or site admins can quickly modify the look of certain components throughout the system, or even the website as a whole. For example, in past projects we have incorporated visual customization options including:

• rounded or square corners throughout site elements.
• choices for the alignment or size of content inside components.
• the ability to choose which background colors show up in a component.
• the choice of flat colors or automatically-generated gradients.
• using background textures, or the ability to turn them off.

Design for Content Adaptability

At its core, good design for association platforms mirrors best practices for the responsive web. In general, this means ensuring website pages don’t look broken when, for example, components reflow and adapt to different device widths, or there is far more or less text in them than you intended.

Association designs also should account for affiliates having less access to imagery and other visual assets. Taking a modular design approach for images allows for flexibility within a shared system. Consider:

• Making images optional in certain components, so that the sourcing of a photo (or lack thereof) doesn’t hold up page publication.
• Allowing for multiple aspect ratios for imagery in website layouts
• Avoiding extreme aspect ratios in almost all cases (e.g. really wide & short images)
• Avoiding layouts or treatments with text overlaid on photos. In fact, I’d even avoid these almost entirely in association platform designs, as they can limit photography options and add accessibility concerns.

The layouts of templates too, can be more flexible or optional. Flexibility here helps editors with very different content to still create complete pages. Options include allowing the editor to move components around on the page, to omit entire sections, or even be able to apply multiple different page templates to the same content.

If you do this, ensure that the design and resulting layouts can account for that variability and adapt gracefully as content changes. 

Similar layout flexibility will likely be necessary to account for in the design of navigation, dropdowns, and lists.

Design for Distributed Teams

Independent organizations typically have one tight-knit team of a few individuals focused primarily on content creation, editing and site upkeep. 

In contrast, associations have as many web teams as they have affiliates. This introduces different levels of technical knowledge, design capability, and resources. At smaller affiliates, staff may wear multiple hats and website upkeep may be only one small part of their role. 

So, it’s imperative that the content strategy and the platform itself be as easy as possible for content editors to understand and use. Perspective for UX and visual design should shift from just being a design deliverable to helping create an ongoing operating model. This includes:

• defining easy defaults and restrictions to make content production faster 
• building guided templates and reusable content blocks 
• ensuring that even the seemingly little things like template and component names are clear and plain-language, and matched to their intended use. 

Think Longterm

More affiliates means more new faces, more often. Staff turn over. Entire new chapters are added. And the disparate nature of these teams can make onboarding challenging. So build clear and robust documentation and support systems to communicate not just technical functionality, but also strategic, design, and user experience intent. And make certain that these resources continue to be accessible and updated for staff, and don’t grow stale with time.

Parting Thoughts

The network model of association web platforms may contain unique challenges and considerations, but with thoughtful design approaches that accommodate the right amount of brand, visual, and content flexibility, these considerations can become their superpower, where the sum of the individual parts is far greater than the whole.