Tapping the power of the design system

Design systems aren’t exactly new in the branding world, but their usage is not yet widespread either, making them a considerable advantage for forward-thinking companies. How exactly? We brought together our creative and dev teams to explain: Mark Gallo, chief creative officer, Andrew Walpole, director of web development, and design director Lou Delgado lay out the power and possibilities of systematized design.

Let’s take it from the top—what is a design system?

LD: So as a designer, my perspective comes from actually using a design system to make things, so I see it as a connected set of patterns and shared practices, all coherently organized to serve the purposes of creating any kind of product that comes from a brand. It’s a streamlined, well-oiled machine that helps you create things quickly and easily. 

MG: I like that we all have different perspectives on usage of a design system: Mine is perhaps less tactical, as in, I’m putting forth the theory and applications of the system to clients and what it would mean for the brand as a whole. 

So in my opinion, the design system is the next evolution of a style guide, which has been the primary documentation of core elements, or a starting point for brand expression. Design systems are a far more developed tool to provide brands the agility they need to go to market quicker, by providing not only the working components, but the ability to iterate, collaborate and evolve the system across the organization. That’s my take; I’ll pass the ball to Andrew because it probably means something a little different to him in the web development world.

AW: I may say it in a different way, but my definition is similar: I think of design systems as operational tools. Similar to how lean methodology revolutionized manufacturing processes, design systems do so for a brand in a digital-first world. In the past, the main constraint of a brand used to be going to the printers, right? Once you printed that style guide, you couldn’t change anything or do it differently. Digital has changed the landscape for how often you need to hit publish, and design systems give the ability to hit publish more frequently in a digital-first world.

When you say “digital-first world,” it seems almost necessary to move forward—what makes a design system so important right now and in the future?

AW: Most immediately, I think of remote work and global teams—that necessitated a fresh look at how we deploy brands. If you’ve got multiple teams spread out, all contributing to something like a digital product, you need to develop a language that everyone can understand and speak fluently across your whole team, and you need the tools to work together, too. Nowadays it’s not just the folks building your app or your site who need brand resources, it’s the folks deploying your social media, or working on marketing or advertising or communications, they all need a similar set of tools and guidelines to help them work quickly because all this work is integrated.

MG: Here’s a recent example—one of our clients has multiple brands and therefore needs a multi-brand strategy. Looking at this huge Gantt chart, I immediately started with, How can we systemize this? How can we build one platform for all of their digital products that allows for pivoting between each brand on the fly? If we invest the time and resources to embed this capability into their digital platform, and create the brand toolkit with this goal in mind, they’ll be able to move much more quickly than they ever could before. One set of components can be modified to deliver across all their brands; changes and updates can be automated so you spend less time on tactical tasks, and more of your resources can be allocated to bigger tasks.

How does a design system differ from a template?

MG: Well, a template is final. And content is input into that template individually. But what if you decide after some testing that you want to make any changes or updates? You’d have to go back and adjust every single one of those templates. But a design system lets you change one component and it populates everywhere, throughout the entire system from that core element. 

LD: And on the creation side of things, you’re not just plugging things in, but actively building things from the design elements and modules that are in the system. So far we’ve been talking about it mostly in terms of just a web property, but the applications go way beyond—social platforms, newsletters, any brand product—having a system unites all these things and makes them incredibly dynamic.

Now we’re talking “tapping the power” of the design system; so let’s keep going and really define those powers.

LD: Efficiency, for one thing. Design systems can free your team up to be way more efficient. They’re no longer thinking about the size of headlines, what colors you need to use—that’s all established. There’s a vast library available to them, supported with code and modules and elements, all built out and organized into patterns, and your team can leverage these elements, resources and best practices to create products quicker.

I’d say cooperation and collaboration too—the number one thing that we want to do with our design systems is support the developer. Designing a product is one thing, but building it is another. A shared system helps these two worlds not only work well together, but it helps them make amazing things that have never been seen before.

MG: That’s a great point. We can no longer have the mentality that design and development are separate entities. A design system helps everyone take more responsibility for the build. It gives everyone the clarity they need to do their job effectively: design, develop, test, deploy.

AW: The view I take as a developer is that it helps the business. The efficiency it creates allows the business to move faster: design is faster, dev is faster, this allows the overall business to go faster, and that circles back on itself by freeing up resources that can be allocated to new products and new initiatives.

MG: Right, and especially for clients with internal creative teams, it’s far more effective to have a systemized approach in building brand products—that team can spend their time and money on answering questions like: “What is the right way to communicate this product to our audience? What is the strategy we’re going to use to deploy this?”

So, why is everyone not using a design system, then?

MG: Some clients may think, “We’ve been doing it this way for this long, we’d have to stop and rethink,” or, “This is great, but it might be too expensive in the short term.” Those are valid points. But if you’re thinking more than a year out on your trajectory, and asking “What can we do now that will drive our business next year?” I think that’s a different calculus.

AW: It is an investment. But just like any investment, there’s a return, and that’s a calculation to be done. But if a company knows that it’s scaling up, growing into multiple markets and wants to easily manage multiple products or iterations of a product—in that type of scenario, it’s smart to think about what a design system can unlock for you.

What excites you creatively about a design system? Is it simply an efficient tool, or what else could it inspire?

LD: There’s a kind of freedom about it—you can focus not just on how a button looks on a page, but on the greater experience of that webpage or other product. You can have the freedom to focus on making things interesting and develop new features that can really capture people’s attention.

One example, I once did a digital experience for a phone case and leveraged all of the pieces of the company’s design system so we devoted most of our thought to the hero opener and how it would animate. And we made an amazing scroll-based animation where the phone and the case come together and fan out to reveal all the colors, and that was possible because we were given the time to actually think about that and not, like, move this button two pixels left or right. We could tackle more impactful problems and really turn out something dope.

MG: I have a long background in print, so I tend to compare design systems to creating a publication—which requires us to make decisions on format, grid, type sizes, column widths, headline styles, all of that ahead of time. Same thing with a design system, the effort is put into establishing fundamentals at the outset, so in subsequent issues we can really focus on the big creative moments, opportunities where we have the most impact. When the foundational pieces are systematized, you can think bigger: What type of art can we create for these big moments? That’s a great place to be.

LD: In the end, it helps everyone get on the same page, which is a huge win that helps everyone be better partners. Whether it’s internal, or between us and a client, it just helps everyone do more and makes better, more long-term partnerships. Once the groundwork is laid with a brand, that’s when you can start blowing minds creatively.