Containing multi-site management within a single codebase

Wunderman Thompson, a global digital agency, specializes in helping brands create and manage their digital presence.

Their teams based in Europe often serve multiple countries and languages, catering to the needs of various portfolio brands, each with its own unique identity.

To tackle these challenges, Wunderman Thompson uses the principles of Atomic Design, a headless CMS, a monorepo workflow, and Vercel's serverless platform. This approach cuts development time by a factor of 10 and costs by a factor of 25 compared to their former method of PHP servers and WordPress monoliths.

In this guide, we'll discuss the importance of choosing the right framework for an efficient developer workflow, and walk you through how to use these techniques to create your own efficient design system deployed on Vercel and the headless CMS of your choice.

• Choose a component-based framework
• Apply Atomic Design principles
• Manage data with a headless CMS
• Adopt a monorepo workflow (with Turborepo)
• Let Vercel manage the infrastructure

Choose a component-based framework like Next.js or SvelteKit

An efficient developer workflow begins with selecting the right framework. Next.js and SvelteKit are powerful frameworks that offer a range of benefits for managing complex component hierarchies, like the ones Wunderman Thompson uses to keep their component library organized and flexible.

Here's why choosing a framework like Next.js or SvelteKit matters for your team's efficiency and speed:

1. Full stack access: Next.js and SvelteKit offer built-in support for routing, server-side tasks, APIs, and middleware, streamlining setup and allowing you to serve frontend and backend code from the same application.
2. Component-based architecture: Both frameworks promote reusability, modularity, and maintainability with their component-based architecture.
3. Optimized performance: By supporting dynamic imports and code splitting (which give you the ability to defer scripts down to the component level and only serve code that the client uses), both frameworks ensure your sites remain fast as your design system grows more complex.
4. Efficient rendering: Next.js and SvelteKit support Incremental Static Regeneration (ISR), improving user experience and search ranking by pre-rendering dynamic data without needing to redeploy your site when content changes.
5. Enhanced developer experience: With rich ecosystems of plugins, tools, and community support, both frameworks simplify the creation, management, and maintenance of component-based systems while ensuring scalability and adaptability.
6. Adaptive deployment: Embracing framework-defined infrastructure, Vercel automatically provisions infrastructure based on your Next.js or SvelteKit projects, simplifying deployment and boosting team productivity.

By providing a robust foundation for managing complex component hierarchies, Next.js and SvelteKit empower you to adopt industry best practices without worrying about the size or complexity of your codebase. They offer ease of migration and incremental adoption, making them an ideal choice for scaling your projects.

Apply Atomic Design principles

A unified design system keeps all your sites up-to-date and avoids inconsistencies. Wunderman Thompson attributes their success to Brad Frost's principles of Atomic Design, which provide a structured approach with five levels: atoms, molecules, organisms, templates, and pages.

Identify your atoms

Atoms are the smallest, reusable components in your application. They cannot be broken down into smaller components. Creating a library of atoms helps provide consistency across your projects.

For instance, you might make a Button.js:

export default function Button({ children, onClick }) {
    return (
        <button onClick={onClick}>{children}</button>
    )
}

You can imagine other components, like InputField.js or Label.js, that also have a single function. Atoms can also be elements like flexbox and grid layouts, or CSS variables for brand colors (--var-background, --var-accent-1, and so on).

Either way, start simple: the core of Atomic Design is iteration. Nobody wants a waterfall workflow, where one team has to wait on the other to accomplish tasks. By quickly sketching up the library of components your application needs, you enable designers to work in conjunction with developers.

Form molecules

Next, combine your atoms into versatile molecules, such as search bars, cards, tooltips, or alert messages. Molecules can consist of any number of atoms, but be sure to stick to the single-responsibility principle to allow each molecule to do one thing well.

You might, for example, combine input field, input label, and button atoms to make a search bar molecule:

import InputField from "../atoms/InputField";
import InputLabel from "../atoms/InputLabel";
import Button from "../atoms/Button";

import { useState } from "react";

export default function SearchBar({ onSearch }) {
  const [searchText, setSearchText] = useState("");

  const handleSearch = () => {
    onSearch(searchText);
  };

  const handleChange = (event) => {
    setSearchText(event.target.value);
  };

  return (
    <div>
      <InputLabel htmlFor="search">Search</InputLabel>
      <InputField
        id="search"
        type="text"
        value={searchText}
        onChange={handleChange}
      />
      <Button onClick={handleSearch}>Search</Button>
    </div>
  );
}

Build organisms

From molecules, create organisms that represent larger design sections, such as footers, menus, or even product displays. This is where you'll start needing components unique to your application's purpose.

For instance, you could make a header that includes the search bar molecule from above plus new menu and site title molecules:

import SearchBar from "../molecules/SearchBar";
import Menu from "../molecules/Menu";
import SiteTitle from "../molecules/SiteTitle";
import Flex from "../atoms/Flex";
import Title from "../atoms/Title";
import Logo from "../atoms/Logo";

export default function Header({ onSearch, menuOptions }) {
  return (
    <header>
      <Flex justify="between">
        <SiteTitle logo={Logo} title={Title} />
        <SearchBar onSearch={onSearch} />
        <Menu menuOptions={menuOptions} />
      </Flex>
    </header>
  );
}

Develop templates and populate pages

Arrange organisms into templates, defining your site's layout and structure. Templates are just pages on your website that are constructed to accept dynamic data, avoiding the trap of "hard-coding" information.

When you bring your clients' content into your templates, via a headless CMS, you've built your final pages. If you've built your system correctly, client data can easily customize templates all the way down to the atomic level to make truly unique brands.

Need to make changes? Work from the bottom up, implementing fixes and designs where it makes the most sense, keeping code clean and singularly functional.

Streamline data with a headless CMS

Using Atomic Design in conjunction with a headless CMS creates a seamless, composable workflow. A headless CMS serves as a single source of truth for all the atoms, molecules, organisms, and templates you've built, as well as your customers' dynamic data.

Before adopting a CMS, Wunderman Thompson stored data on individual servers for each client, which meant onboarding new clients required new infrastructure, a unique CMS, and a custom website.