Introducing Clarity Kit: a highly customizable WordPress page builder

With the ever-increasing demand for fresh, relevant digital content, static websites are yesterday’s news for today’s marketing leaders. A flexible content management system (CMS) is critical to publishing compelling content that will keep pace with marketing goals. Over the past several years, WordPress has superseded other platforms to become the premier solution for marketing and content-driven sites. In fact, WordPress powers approximately 33% of all the websites in the world.

However, WordPress is just the platform — a powerful, flexible, and robust platform, to be sure, but one that can be implemented in many ways. Your choices can impact how well the site works for external and internal users alike — not to mention the hard-working IT folks who have to maintain the back-end — for years to come.

We understand that balancing rich user experiences, administrative ease, and technical elegance can be tricky. This never-ending quest is something we help clients navigate every day at Fell Swoop, where we frequently build content-intensive websites for large and midsize businesses.

At the heart of the challenge are the competing needs of different stakeholders:

  • Marketing needs the agility to respond to changing business requirements
  • Content editors need foolproof tools for adding and changing content
  • Designers want the site to look sharp even as new features are added
  • Developers want clean code that’s easy to extend and maintain

A typical approach is to build a custom page template for each type of content. While this keeps the design coherent initially, it locks you in to a predefined menu of page layouts that are difficult to adapt as new needs come along. When new site-wide features are added, it can be difficult to successfully integrate them with the design, which can end up requiring a lot of additional work to resolve. The codebase becomes more convoluted to account for these special use cases, which sucks up developer time with integration issues that don’t really add to the value of the site.

Another challenge with many WordPress implementations is the use of “what you see is what you get” or “WYSIWYG” functionality, where content styling is achieved using inline HTML code. While most content editors are certainly capable of learning this approach, it’s not really the best use of their time. Applying styles piecemeal in this fashion also causes design creep — which accumulates over months and years and can lead to some ugly consequences in terms of brand image and usability.

After seeing these same challenges over and over, we’ve developed a more efficient approach, which we call the Clarity Kit. We started with the principle of “atomic design,” which basically means building a user interface up from basic elements to higher-level chunks, from buttons all the way up to modules and layouts.

Here’s a quick overview:

  • Element: An HTML element such as an image or link
  • Group: A collection of elements, such as a call to action with a link and an icon
  • Component: A collection of groups, such as a navigation element or card
  • Module: A collection of components and groups that will span a page — similar to a blade or section
  • Layout: A collection of modules that will be re-used, such as a product page

For the most part, the content editor only has to interact with modules, which are the building blocks of the Clarity Kit WordPress page builder.

Here’s an example of how modules go together to build a page on the admin side:


And here’s what it looks like on our website:


If the content editor wants to move the partners section to the top of the page, it’s drag-and-drop simple:


And voila:


The design remains consistent. No coding is required. Content editors never have to type another angle bracket: they can focus on the content itself, which is what they’re best at. Designers can focus on design instead of constant cleanup. The code stays crisp, so devs can invest their effort in building great new features rather than babysitting HTML. Everybody is happy—including the end user, who experiences the brand with the impact and consistency you’ve worked so hard to build.

The Clarity Kit is easy to extend and maintain. Design changes made at lower levels are automatically propagated through the system. Onboarding new content editors takes less time because the system is easy to use—and frankly, it’s hard to break stuff.

Of course, there’s always a need for one-off pages with special features that don’t get re-used throughout the site, and the Clarity Kit approach doesn’t prevent you from taking that approach. We typically combine modular pages and custom page templates to meet clients’ needs.

Want to see a couple of examples of the Clarity Kit in action? Check out the work we did for PCC Community Markets and Juno Therapeutics, two amazing Seattle companies with very distinct brands and audiences. You’ll see how flexible this approach can be. Want to learn more? We’d be happy to show you under the hood.

Like what you see?

We’re always looking for interesting challenges and ways to provide value.
Contact us today and let’s talk about what we can do for you