How to build design systems that empower marketing teams

But how can marketing teams use design systems? And what does that mean for a company's return on investment? If marketers can't design or code, how can they communicate their strategy and vision in a way that contributes to website development?

We’ll take the time to answer all these questions. But first, let’s break down what a design system actually is.

What is a design system?

There's a lot of confusion and mixed messages about what a design system is. To make sure we're on the same page, here’s our definition: A design system is the single source of truth containing elements that help teams design, conceptualize, and develop products and marketing websites that deliver satisfying and consistent experiences to users.

These elements include (but are not limited to):

• Brand guidelines
• Design principles
• Typography
• Color
• Layout
• Reusable components
• Webflow implementation guidelines
• Design implementation guidelines

These elements help teams tie the product or website together into a solution meant to delight and help their target audience.

All in all, a design system does the following:

• Provides a shared language for designers, developers, AND marketers.
• Allows designers, developers, AND marketers to reuse images, buttons, codes, and styles on the fly.
• Encourages a modular approach to product and website building

We're not the first to make this analogy, but a good way to understand how design systems work is to compare them to LEGO building blocks. Like LEGO blocks, a design system provides you with the components to build a greater whole in a way that everyone understands intuitively how it all fits together.

What can a design system do for marketing teams?

Give marketing teams the platform to translate their ideas into visual form, and they’re far more likely to hit their KPIs. This can only help your website smash its marketing and lead generation goals.

Marketers, after all, play a huge role in identifying the needs of customers and in implementing a brand story that fulfills those needs. Marketers think in terms of demographics and personas, and this knowledge will come in handy in building digital products that customers will love. They’re the folks who can point out if your website is resonating with your audience and whether it's enforcing the company’s branding goals.

While marketers mostly deal with KPIs, brand messaging, and marketing touchpoints, that doesn’t mean they’re not capable of thinking visually. Marketers (or some of them) may have limited knowledge of UI and UX design, but put a good design system in their hands and they’ll be able to build websites like a professional designer in no time.

The case for investing in a design system

No question about it: A design system, if implemented well, will give your return on investment a big boost, especially when put in the hands of multiple marketing teams (as is possible in an enterprise).

The problem? Measuring a design system’s impact on an organization is not easy. Add the fact that a design system requires significant investment, and it’s easy to see why some executives and key stakeholders are hesitant to take the big leap.

To secure that buy-in, you need to work extra hard. Don't stop at demonstrating how a design system makes everyone's lives easier — you need to show the many ways it can benefit your organization on every level. A good way to do this is to engage everyone in a full-scale discovery process. By extrapolating from extensive and relevant data, you can come up with amazing results.

If you do it well, the combined impact of improved productivity, efficiency, and quality on revenue will be clear as day, earning you the buy-in you need to go forward. If you want to know how the math works on that score, check out Bryn R’s brilliant article “How much is a design worth?”

Benefits of design systems for marketing teams

Let’s take a deep dive into how design systems can benefit marketing teams.

1. Improved collaboration

Marketers are concerned about brand messaging, KPIs, and marketing strategy, but it can be useful to give them the tools to present their ideas in visual form. With a design system at their disposal, the marketing team can create more detailed and conversion-focused web pages, eliminating a lot of unnecessary back-and-forth that tends to waste everyone’s time.

By implementing a design system that allows your marketing team to create simple websites with ease, designers and developers can focus on creating customs and new components that will add more value than repetitive work ever could.

2. Consistent and better user experiences

Giving marketers a platform to communicate their ideas visually in service to the company’s core goals doesn’t just improve collaboration — it leads to better user experiences.

When you have a centralized system that contains preapproved components and assets, marketers can create web pages and user interfaces without compromising visual consistency, resulting in solutions that create better experiences.

3. Better efficiency and reduced expenses

A design system contains reusable assets and components that marketers, designers, and developers can use to create web pages on the fly. No one has to create anything from scratch because everything they need is within the design system.

Pretty convenient, right? This means no more resources wasted on duplicate assets. And because everything is consolidated in the system, the company is less likely to incur “design debt,” allowing everyone to complete their respective tasks more efficiently.

Implementing a design system and maintaining it will require resources, sure, but when you have a single source of truth that creates efficiency across the board, the positives far outweigh the negatives.

Even if your internal team lacks the know-how to build websites (or is too busy to learn about it), you can always get help from agencies like Refokus.

4. Ability to create yourself without depending on anyone

You may have the best product, but if you can’t launch your offering before your competitor does, you’re going to get beat almost every time. Remember, in today’s fast-paced, competitive environment, you will lose out on opportunities, customers, and market share if you don’t move fast.

The point? Your marketing team can’t afford to wait for your design team to step in if a similar product is already gaining traction in the market. Why wait around when marketers can design their landing pages themselves?

With a design system in place, your marketing team can capitalize on current trends and get ahead of the pack by launching marketing campaigns without waiting for the design team.

How Refokus creates design systems for marketing teams

At Refokus, we use a tried-and-true methodology to create design systems that, at their core, empower marketing teams. We adopted this process to make sure that what we're building is impactful, sustainable, and relevant to our clients' needs. We also aim to build a design system that marketing teams can easily use.

We split our process into five stages: discovery, strategy, design, Webflow, and workshops.

1. Discovery

We start things off by learning as much as we can about the client’s business. What are their business goals? What are their target audience’s needs? What are their current strategies?

On top of conducting interviews with the client’s marketing team, we also review the client's current websites to see what can be improved and identify potential issues and gaps that may hurt business outcomes.

2. Strategy

After we have collected and reviewed all the necessary information, we enter the strategy phase. Here we create the visual assets and documentation that will help everyone understand what's going to be built and how. These include:

Moodboard

A design system project offers a great opportunity to improve the client’s design and take it to the next level. But to do that in a way that maintains brand consistency, we need to create a baseline that will define the brand’s visual language. 

We create a moodboard for this exact purpose. By taking all the information we've gathered from the client during the discovery session, we can create a moodboard that accurately represents and conveys our client's brand personality.

To come up with the best visual ideas, we ask our client’s team (or teams) to join us in a brainstorming session. We then curate the best ideas from the session and categorize them in a way that’s easy to navigate and understand.

Wireframes

We then create wireframes and share them with the client. A wireframe is basically a sketch of what the design system will look like. This stage is important because it sets the client's expectations and helps both sides to establish a consensus on how to move forward. By showing wireframes to the client and asking for feedback, we can implement the necessary layout and structural changes before investing in design and development. 

Next, we collaborate with the client to conceptualize the layout and structure of the design system, making the necessary changes as we go along.

Webflow implementation guidelines

Once we've agreed on the design system's overall structure, we define how everything is going to be built in Webflow. We do this by defining class nomenclatures, organizing atoms and components, and setting up templates and examples. We also provide thorough documentation to get everyone aligned on how everything will be implemented.

3. Design

Now on to the design phase! This is where we define the look and feel of the design system, creating the components’ user interface and giving each detail a final polish. We do this by creating a style guide in Figma and sharing it with our client’s team to foster collaboration.

With a style guide in place, we can keep growing and refining the design system in Figma before jumping into Webflow. By this time, not only do we have reusable components for building new websites in Figma, but we’re also given the means to create new components in the future.

UI design

We create the visual design for all pages and components, adding a defining iconography, illustrations, and animated graphics to provide users with a great overall experience.

Handoff for development

By this time, all technical specifications are clear, the detailed design is fully approved, and all outstanding questions are already resolved. Once these conditions are met, the development team can start with Webflow implementation.

4. Webflow

We believe in building quality products with solid foundations, which is why we care deeply about standards and processes. That’s why we embrace the latest technologies and improve our tech stack constantly. While we’re always open to trying out the newest shiny tool, Webflow has been the only constant in our tech stack repertoire since 2013! In fact, every marketing website we’ve made over the last 7 years has been built in Webflow.

Webflow is the perfect tool for building design systems, and with the recent release of content overrides for symbols, we can create design systems that help marketing teams build faster without compromising or diluting their brand’s visual identity or core values.

Webflow symbols

Previously, we could reuse symbols across pages, but they had to have the exact same content. Now we can add symbols, create bindable fields to each content node (text, rich text, image, links), and add content overrides on each instance. This means that we can create a card component with a heading, an image, and a text block and reuse it across pages with different text and media.

Thanks to this outstanding improvement, we can now use Webflow to implement every designed component into reusable symbols. This makes the lives of marketing teams so much easier. All they need to do to create websites and update the content is to drag and drop the reusable symbols we’ve created into the canvas and edit the content. Too easy!

Haufe Coaching offers quick and easy access to top business coaches for key leaders and experts on their new website which we are building with using Webflow's New Symbols. Here’s an example in action:

‍

We build design systems to help marketing teams build websites faster, as well as to help them execute their marketing ideas on the web pages they’re creating. To achieve this, we make sure that the symbols we create have the following two key characteristics:

Flexibility: We create symbols that work for different use cases. This way, the design system is stripped down to its essential components, making it easier for teams to browse through them.

Standardization: One key benefit of a design system is that it allows teams to build with the same atoms and components. By standardizing the use of fonts, colors, buttons, and iconography, your internal team can speak the same language, eliminating guesswork and ambiguity in their decision-making and processes. This, of course, boosts productivity, efficiency, and work satisfaction.

Templates

Having a design system is great, but those who don't have a design background can feel stuck the moment they face the blank page. To give them a good starting point, we review the most used components and combinations and then create a set of template pages out of them. Once these templates are up in the design system, marketing teams can create simple landing pages faster and with ease.

SEO and page speed

By defining the symbols in advance, we allow ourselves more room to optimize and refine their performance. But we also do so in ways that fit SEO best practices. After all, we want to make it easy for our clients to build web pages that will rank high in search engine results.

5. Workshops

A robust design system can boost your ROI, but that alone is not enough to turn a client's organization around. We won't simply hand over a design system and let the client run with it without proper training and guidance.

This is why we conduct Webflow Workshops. On top of educating our clients on how to use their custom-made design system, we also help them reestablish their design philosophy so everyone can tailor their processes accordingly. These workshops are instrumental in helping marketing teams get the most out of Webflow’s component library. Moreover, these sessions provide them with the knowledge needed to maximize the limitless possibilities offered by digital solutions like Webflow and Refokus.

What’s next?

To truly empower your marketing team, make them build stuff. Don’t just leave them to draw on whiteboards all the time. Because believe me, if you give them a design system that is tailored to their needs and provide them with the training to help them maximize its benefits, they will accomplish great things. And that will only help elevate your brand and smash your ROI goals.