How our Component-driven Design System Beats Template-based Websites

One of the pain points we often see on legacy websites is preset page templates and layouts that lack flexibility. Content is king and if a content creator doesn’t have a design system that’s customized for the content they are producing, they end up using the page layouts available to them for unintended purposes. This tends to produce a muddled site that breaks brand integrity and creates an impression of disorganization and ineffectiveness.

We understand how social impact organizations get there. Their website’s content management system (CMS), often Wordpress or something similar, has limited flexibility and is difficult to update. Content creators are doing their best, forcing information and messaging about their mission, offerings, products, and services into the rigid templates that are available to them.

Other systems promise complete flexibility, which sounds great but almost always creates additional friction and work for content creators who now also need to act as designers or developers in addition to their core role of creating content. And often, this flexibility leads to inconsistent and confusing user experiences for website visitors.

Either way, the result is an online experience that feels disjointed, often seems to lack strategy, and poorly represents their brand and organization.

What if the design system was flexible enough that they could easily create digital experiences that meet their needs for a long time to come?

Our answer to these questions is a custom-built component-based design strategy we refer to as our page-builder approach. This approach produces custom sites that are scalable and flexible enough to allow content creators to easily add to the site, update messaging, remove out-of-date copy and materials, and continue to provide a delightful user experience — all while maintaining good design principles and brand consistency.

Let’s break down our page-builder approach and explore how it delivers websites that give leaders and organizations a platform upon which to execute their digital strategy — today and into the future. Fair warning; we’re going to get a little into the weeds here.

Start With Strategy

This may seem obvious, but every brand and website project should be rooted in sound strategy. We use a sitemap and wireframes (low-fidelity layouts of each page) process to work through what we’re building and why. We explore the purpose, information needs, and storytelling flow of every page of the website. The wireframes act as a blueprint for what we design, what our developers build, and how design and messaging work together to produce effective communication. For us, that’s Websites 101.

Next: Identify and Design Components

When we move into the design phase of a website, we design each page one section/component at a time. We think about the content strategy for each component and design them to serve up the content in an engaging way.

At first, each component is new. And through our integrated branding process, we design each component with brand integrity and consistency in mind. As the process takes us deeper into the website, we identify components that need to be unique, and others that we can use on more than one page.

Components share common attributes called global styles. Color palette, typography, spacing, icon sets, visual motifs, etc. are shared across unique components. This is what makes a design system feel like a coherent system rather than a set of misfit widgets.

Having a mix of unique and repeated components gives a site visual variety while delivering a consistent brand experience. Can you imagine how disjointed a site would feel if every single section looked different from any other one? It would be just as muddled as the sites we mentioned earlier. One of our goals in every site we design is to strike the right balance between the two types of components, unique and recurring.

Every social impact organization we’ve worked with has some part of their story, services, products, programs, or offerings that require elements unlike any others. One major advantage of a custom-built site is that you can have components designed to meet your individual needs.

For example, the Land Trust of Santa Cruz County needed an interactive map that allows the public to explore the land they preserve. As a community-based organization, this helps people connect directly with the land where possible and understand why it needs to be protected.

This exploration flow is a series of components unique to their organization. From the Exploration Landing page, to the Interactive Map, to the Location Information page, each step along the path required us to design and build a set of interactive pages. We’ve designed and built lots of maps. Each one needs to be customized to meet the strategic goals of the organization.

The wireframes lay out what components on these pages don’t appear anywhere else on the site. For example, the style of the Hero section at the top of the page is only used on the Exploration Landing Page. But as we scroll down this page, we encounter components that are found across the site.

While the Hero section at the top of the page is unique, the other components on this page are found throughout the site. The Learn More components are used on other pages to direct site visitors to more detailed information. The Multi-card component is also used elsewhere for different information, as are the Download, and the Newsletter components.

To establish an information hierarchy and flow, we design variations (component variants) on component types that repeat. Every page needs a Hero (top) section to give a site visitor context. But having every Hero section have the same style makes for a site that lacks information hierarchy. Our solution is to design 3-4 Hero styles that are visual indicators of the information hierarchy and help visitors quickly get to information that’s important to them.

As the process continues, we identify all of the unique components and build a library of recurring components, even when they are similar, such as the different Hero styles mentioned above.

Third: Identify Set Styles

When similar information is presented on a site, we design a page that has the full set of components on it. We refer to this as a Set Style page. Similar pages can be built using whichever components are needed, giving content creators immense flexibility. With some exceptions, the components can be placed in whatever order makes sense for the information flow, since they’re all designed to work together as part of a visual brand system.

The Land Trust of Santa Cruz County site also provides good examples of these types of pages. Let’s compare two Location Details pages to see how this works: Antonelli Pond and Highway 17 Wildlife Crossing.

As you can see, the first five components are identical, though the content differs.

However, just below the Available Activities, Antonelli Pond has several downloads. The Highway 17 page doesn’t have the Download Component because these kinds of materials aren’t available for that location.

We designed the Antonelli Pond page first. It has nearly all of the components needed to build a Location Detail page. The Highway 17 page doesn’t need one section. Leaving out the Download Component doesn’t break the page design or create brand dissonance. That’s because the component-based design strategy allows them to work together, even when you drop one or two.

And, the Land Trust team can create more pages in the future because they have all that they need.