Pattern Lab & Atomic Design For WordPress & Drupal

A New Way To Use Pattern Lab To Create a Better Client Experience

There are many occasions where a client requires upgrading their existing website, whether it be a matter of load speed and functionality or simply being out of date. Most companies need to do so without taking their business offline or losing the ability to provide online services for existing and potential client use. For example, websites that require client logins for operations such as paying bills online or eCommerce sites. There are many approaches to upgrading your website, most of which we have found to be time guzzlers, though totally necessary.

Daggerhart Lab is always looking for ways to make our processes more efficient, both for the sake of our client and our staff. For this reason, we started experimenting with the Pattern Lab tool and Atomic Design practices to more directly take and use the design assets of the client’s existing WordPress website for a new Drupal website build. This enables us to do several helpful steps during the project to better serve the client.

Like what?! And how?!

Allow us to break it down… and if you’re already familiar with Atomic Design, that pun was fully intended.

Below you will find brief explanations that will come in handy while reading the rest of this blog. They will help to better understand how we’re using Pattern Lab, Atomic Design Practices, and Drupal.

What are Atomic Design Practices?

With theoretical roots in chemistry, Atomic Design helps you break down all of the elements for your website’s build into small pieces (aka, components), and to organize those pieces via labels such as “Atoms, Molecules, Organisms, Templates, and Pages”. The purpose of this is to help you develop and design in a way that ensures your elements are put together in a cohesive and stratified manner. This is why your site build will start with the “Atoms” section, and you build from there in a united fashion into “Molecules” next, and so forth.

What is Pattern Lab?

A tool that was developed as a generic means for most technology platforms to design united components to be used within the theme, aka, the visual pattern(s). Essentially, it assists Atomic Design methodology by providing a library space for solutions to persistent design issues, as well as strengthening the design process with homogeneous elements. Practically, the Pattern Lab tool is a small website that developers will use on their computers to facilitate the development of components independent of the CMS where those components will be used.

As Brad Frost, the creator of Pattern Lab put it; “When you break it down to the basics, patterns ensure you never have to code the same thing twice.”

What is Component Development?

When we are building software for a client, instead of or in conjunction with a website, we practice component development, which is very similar to Atomic Design practices. Creating the visual components of a website independently of the website’s functionality and content allows you to create software more efficiently and expediently.

Practicing component development also facilitates the development principle of separation of concerns. This means that your frontend and backend teams can make significant progress on their own. No longer will your frontend developers need to wait until the backend work is complete before they can start making progress on the website.

As a developer, you may be thinking “Haven’t tons of us been using these tools and practices for years, though?”

How is Daggerhart Lab using Pattern Lab differently?

After years of performing the long process of moving WordPress websites over to Drupal (and vice versa) via lengthy content migrations, rebuilding all elements and components from the ground up – we wanted to find a better way. Equally, leaving the poorly performing current website up, as is, while you build the new one feels like a missed opportunity in a number of ways.

What we’re doing differently is using Pattern Lab to separate the backend from the front end of the existing website. Then we reuse those design assets in both the current and new websites at the same time, instead of rebuilding them. This approach also enables us to make improvements to the functionality and performance of the existing site while we’re building out the new site. We are both improving the UX and SEO through performance gains on the existing website while creating its replacement.

This approach also accelerates the construction of the new and stronger website, as the components will then live in the Pattern Lab library, ready to be reused as needed. If the client is not getting a new Drupal website, we are still improving their WordPress site’s performance through these practices by building components separately from their site. Since our frontend components are not tied directly to either WordPress or Drupal, we’re really delivering on the promise of Pattern Lab.

The goal? To open the door to a broader range of client budgets. The fewer hours we spend making a client’s new website, the less money they have to spend.

Are you wondering why we’ve put so much effort into making the WordPress to Drupal (and vice versa) transition or use of components within WordPress, more approachable? When a business’s needs go beyond the reach of WordPress functionality, we believe Drupal is the best choice for expansion. When a client’s budget doesn’t allow for Drupal development and maintenance, we believe WordPress can be a great solution.

Using these practices, we can empower a client’s website performance with better user experience (UX) that helps them gain customers/clients more efficiently. Much like our firm belief in our own healthy client interaction, we believe everyone deserves the tools to do the same for their own business.

What if you want to stay on WordPress, but need to improve performance?

While WordPress is an excellent CMS platform, there are many older and outdated themes that still exist within WordPress that do not have optimal load times. We can leverage the use of Atomic design practices and Pattern Lab to gather and improve upon a client’s WordPress components, as well as to build up their existing website. We will still decouple the development of the back end from the front end of the current site to run improved components while the website remains in WordPress. This way, if a client eventually makes the step to create a fully improved Drupal website, many of their components will have been developed already. This enables our clients to have long-term sustainable options for which backend they prefer to utilize. This also facilitates us in creating all of the design assets that we will use in the future for the client, regardless of the CMS platform.

What business problem does this solve?

By using Atomic Design and Pattern Lab we can build components separately from the website for faster loading time and improve the overall user experience (UX). Better user experience leads to more conversions, as well as improving search engine optimization (SEO). When a website has a less than ideal user experience, not only are there missed opportunities to bring a great client on board, but your ranking in Google will be negatively affected too. There are numerous ways this can happen. For example, if your website has a long load time, that is something Google contributes to ranking as they prioritize websites that will get a user’s needs met as efficiently as possible.

Another example of how UX affects your SEO and subsequent Google rankings is if your pages have a high bounce rate. A high “bounce rate” is when someone arrives on your website and doesn’t find what they need quickly enough and then “bounce” off the page right away. If Google sees that your webpages have a high bounce rate, they will consider those pages less important for ranking.

How does this work in action for our clients?

Everyone likes a good example, so here’s one of ours! A client of ours had a WordPress website that called on an older theme that performed poorly and had what we would consider a “dangerously long” load time. This meant their bounce rate was being affected, and the clients who rely on their website for services that require a regular login were being negatively affected as well.

Add to that, their business needs had grown in a way that warranted a migration to a CMS with more expansion ability, such as Drupal. We, of course, wanted to help as quickly as possible. Instead of doing the entire project in one fell swoop, we proposed to do things in two stages.While using their current WordPress site to continue driving new branding efforts, we used Pattern Lab to build and migrate the WordPress site to Drupal while leveraging the graphical assets in a way that provides better load time and overall stronger performance.

Visually speaking, their existing and potential clients were never affected throughout the transition. Performance-wise, their current and potential client base was positively affected with greater ease of use. Equally, we now have all of their components available for building up their website as the needs of their business continue to grow.

Our intention for utilizing these tools in this way is to improve upon our thoughtful and deliberate client experience, as well as to strengthen our delivery on every project. For part 2 of this blog, we will go over the more direct and detailed technical steps of how this all works, so check back next week!

If you are interested in seeing how we can improve your business’s website, or are a developer interested in working with us – we would love to hear from you!