In today’s fast-paced digital landscape, marketing teams need efficient ways to maintain brand consistency while accelerating output. Enter design systems — the structured framework changing how marketing and design teams collaborate. Whether you’re creating landing pages, social media assets, or email campaigns, a well-implemented design system can transform your marketing operations from chaotic to cohesive.

This comprehensive blog will walk you through everything you need to know about design systems for marketing: what they are, their essential components, and a step-by-step approach to building one. We’ll explore the specific advantages design systems offer marketing teams, from streamlining workflows to ensuring brand consistency across all touchpoints. Finally, we’ll share insights from our experience at Refokus, where we’ve helped marketing teams implement powerful design systems that drive results.

Let’s start by understanding what exactly a design system is and why it’s becoming indispensable for modern marketing teams.

What is a design system?

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, code snippets, 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.

Key components of an effective design system

While design systems can be customized to suit your business’ specific needs, the most powerful ones typically include these essential elements:

• Design principles: The foundational values and guidelines that inform all design decisions, reflecting your brand’s unique identity and vision. These principles serve as the North Star for designers and marketers alike.
• Design pattern library: A comprehensive collection of approved, reusable design patterns that solve common visual problems. These patterns — combinations of design elements working together — ensure consistency across all touchpoints while reducing decision fatigue.
• Component library: The practical building blocks of your digital presence, including buttons, forms, navigation elements, and other UI components. This ready-to-use toolkit allows marketing teams to assemble on-brand assets without reinventing the wheel each time.
• Design tokens: The fundamental design variables (colors, typography, spacing, etc.) that can be easily implemented across different platforms and technologies. Tokens translate your brand’s visual identity into code-friendly parameters.
• Process documentation: Clear workflows and methodologies that guide teams through design implementation, ensuring everyone understands how to properly apply the system to new projects.
• Accessibility standards: Detailed guidelines ensuring all digital experiences remain accessible to users of all abilities, compliant with the Web Content Accessibility Guidelines, and inclusive by design.

When seamlessly integrated, these features create an ecosystem that empowers marketing teams to create consistent, high-quality assets while reducing production time.

How to build a design system step-by-step

Every effective design system requires thoughtful implementation. Here’s a streamlined approach to creating one that will serve your organization’s needs:

1. Secure stakeholder buy-in: Form a cross-functional team including product managers, marketers, and executives to ensure organization-wide adoption and diverse perspectives.
2. Audit existing design elements: Catalog all UI components and visual elements currently in use, identifying inconsistencies that need standardization.
3. Define your design language: Establish core principles that reflect how you want customers to feel when interacting with your brand, along with guidelines for color, typography, and imagery.
4. Create a pattern library: Develop reusable UI components built on design tokens (foundational visual elements like colors and spacing) that bridge design intent with implementation.
5. Document usage guidelines: Provide clear instructions on when and how to use design elements, including contribution and maintenance procedures.
6. Include practical examples: Offer real-world applications that demonstrate the design system in action, giving teams visual references to follow.
7. Maintain and evolve: Schedule regular audits, gather feedback, and implement updates to keep your design system aligned with evolving brand needs and industry standards.

A well-executed design system isn’t static — it’s an ecosystem that grows with your business while maintaining the consistency that makes your brand recognizable.

Benefits of design systems for marketing teams

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.

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).

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. Once a design system onboarding is complete, 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 pre-approved 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 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:

Mood board

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 create a baseline that will define the brand’s visual language — a mood board.

By taking all the information we’ve gathered during the discovery session, we can create a mood board that accurately represents and conveys our client’s brand personality.

To come up with the best visual ideas, we conduct a brainstorming session with the client to curate the best ideas 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 a sketch of what the design system will look like. This stage is important because it sets the client’s expectations and helps establish a consensus on how to move forward.

This collaboration allows us to create a prototype of the design system and iterate on layout and structural changes before investing in design and development. Next, we work with the client to conceptualize the layout and structure of the design system.

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 streamline implementation.

3. Design

The design phase is where we define the front-end 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 iconography, illustrations, and animated graphics to provide users with a great overall user experience.

Handoff for development

By this time, all technical specifications are clear, the detailed design is fully approved, and all outstanding questions are 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. 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 seven 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 improves usability signifcantly as 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.

We can now use Webflow to implement every designed component into reusable symbols, streamlining the process for marketing teams. 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:

[embedded content]

‍

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 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 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 don’t simply hand over a design system and let the client run with it without proper training and guidance — we conduct Webflow Workshops instead.

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 products like Webflow and Refokus.

What’s next?

To truly empower your marketing team, provide them with the functionality and usability of a design system. 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.

I know, I know — your calendar is probably bursting at the seams, and I have to craft my best pitch to convince you to carve out a special hold just for us. But the truth is, some events truly do stand out from the rest and are worth putting a “Do not disturb” block on your calendar for. They’re the ones where you’re able to leave with more insights and learnings than just what you can read in a recap blog post or a handful of tweets. Instead, you walk away feeling invigorated, inspired, and with new ideas that actually stick. They’re also the ones that foster a sense of real community, facilitating real-time or future opportunities for genuine connection with fellow attendees.

Webflow Conf checks these boxes and more, but rather than taking my word for it, I sat down with two members of our community — Florian Bodelot and Alexander Diner — who have attended the event in years past to share a bit about their unique experiences as attendees, how the event has influenced how they build websites and collaborate with teammates and customers, and what they are most excited for at this year’s conference.

Can you share a little bit about yourself — your background, a bit about your career journey, and how long you’ve been a member of the Webflow community?

Florian: I’m the cofounder of Digidop, an award-winning Webflow agency with a business-first approach.

We launched Digidop when I was 24, during my last year of business school. We mainly learned everything related to the web — from design to development — online, supported by Webflow University and the Webflow community.

Alexander: I’m a formally trained designer who started designing websites and taught myself custom code while I was in design school. I worked in small startups, had my own small studio building WordPress sites, and hopped around between in-house and freelance gigs for a bit before starting my brand consultancy, Shapemaker, in 2017. 

That’s when a friend of mine introduced me to Webflow. I was cautious at first, but I gave it a try on a project for a client and it blew my mind, quickly becoming a favorite tool of mine. We became one of the earliest partners in the Partner Program, and worked our way up to an Enterprise Partner. I eventually went on to work for one of my clients, who is a Webflow Enterprise customer before joining Webflow’s Creative team this year.

In your own personal experience, what does it mean to be part of the Webflow community?

Florian: It means a lot to me — and to our entire team here at Digidrop — because we’re basically “born” from this community. We’ve built a profitable agency of 10+ full-time people, and that would not have been possible without learning from the Webflow community.

Alexander: I found Webflow at a point in my career when I really needed it because it enabled me to ship great experiences for my clients at a faster rate, putting me on a path toward greater profitability. And because Webflow really leaned into empowering creators in those early days of low-code code and no-code by building resources like Webflow University, the community just formed organically. Today, there are so many folks with similar stories like me — people who have built companies on the back of Webflow — who I know well and am able to still learn from and connect with regularly.

As an attendee of past Webflow Confs, what has been the most impactful part about participating in the event and any associated programming?

‍Alexander: Last year, as someone who was now leading a team in-house, I really went into the event with the mindset of wanting to sharpen my marketing skillset. I leaned into the unique learning opportunities for marketing teams and discovered innovative website strategies from companies doing cutting-edge work using experimentation and AI. This helped me feel more empowered in my new role as a leader, and I was also able to learn more from a technical perspective simultaneously, too.

How is Webflow Conf different from other industry events you’ve attended?

Florian: The energy at Webflow Conf just feels different. That, along with the people you are able to connect with, makes it the one industry event every year that has the most direct positive impact on our business. It always presents great learning opportunities and you feel inspired by its conclusion, which is why I always recommend it to fellow community members.

Additionally, some of my favorite memories with my team have been forged at Webflow Conf, like when we became the first French Webflow agency to win a Webflow Award (which we vlogged when some of us traveled to San Francisco in 2023). These moments are really special and are ones I’ll remember for years to come.

Were there any particular content sessions from last year’s Webflow Conf that really stand out?

‍Alexander: There were so many sessions last year that I still think about. Carla at Docusign’s session with BASIC/DEPT® about building their brand site has been a huge source of inspiration for me, especially as I’ve stepped into this new role here at Webflow and work on big projects that we’ve brought agency partners in for. The team from Greenhouse’s session about experimentation was another one I really enjoyed, especially since I was working on a team that was an early adopter of Webflow Optimize. 

Chuck Gahun from Forrester’s talk about CMS’s also stands out. Being able to hear an analyst discuss how Webflow fits into the future of the CMS landscape was fascinating, especially as someone was working for a company that was both a Webflow customer and also interacted frequently with their own industry analysts. 

Do you have any tips or strategies for first-time virtual attendees or new members of the Webflow community?

Florian: Show up! Attend as many sessions as you can, actively pay attention, and try to attend any local events organized by community members to connect with people in close proximity to you even if you’re attending the programming virtually (I recommend engaging with community members on X to follow what’s happening). Most importantly, appreciate it and have fun — it goes by fast!

Alexander: I’ve found this community to be so open and welcoming — my advice is to be open to forming connections with people. This presents both an opportunity to learn from people, and help people learn. This is a mindset that has been incredibly rewarding and has helped me advance my career.

What are you looking forward to the most during this year’s event?

Florian: I’m really excited to reconnect with fellow Webflow community members! It’s always great to have these opportunities to learn, share, and meet new people. I’m also looking forward to seeing where Webflow is investing in new features and getting a preview of their latest product vision.

Alexander: I’m excited to see the event come to life because now I’m on the other side! My team is responsible for much of the physical and digital experience at Webflow Conf, and I’m looking forward to seeing how we are able to mature the way we connect with our audience. 

I’ve also gotten a sneak peek of the agenda and can’t wait to hear some incredible speakers dig into topics like hyper-personalization and what the future of the web looks like in the age of AI. And honestly, I just love Webflow Conf — the speakers, the learning, the energy, so I’m just excited for the whole event.

Register for Webflow Conf today!

Webflow Conf 2025 is a can’t-miss gathering of the visionaries and changemakers shaping the future of the web in the age of AI — from designers and devs to marketers and execs. Taking place September 17th and 18th, attendees can join our online event from anywhere in the world, for free. 

Don’t wait — register today to save your spot, and stay up-to-date on key announcements like agenda launches, Webflow Awards, and more! 

The best font pairings use varying sizes and styles to complement web layout. By carefully selecting the right pairings, designers make their websites easier to navigate and more compelling to read. 

Because there are so many typefaces and font families to consider, creating a clear visual style can be difficult. This guide will provide eight great font pairing examples and explain everything you need to know when selecting your own font combinations.

Typefaces to consider when coming up with font combinations

The first thing you’ll need to do when pairing fonts is to choose the typefaces you want to use. Typefaces are categories that describe some basic elements most fonts share, such as the following:

Serifs

A serif font includes embellishments on each letter that make them resemble cursive, handwriting, or script. These details add a touch of flair to your text. They work best for website designs that use a lot of detail and styling. 

Sans serifs

As the name implies, sans-serif fonts don’t have any embellishments on their letters. They’re usually plain and generously spaced. That makes them great fonts for legibility, so you’ll usually find them on text-heavy websites like blogs.

Display fonts

Display fonts can be either serif or sans serif. Designers use them as a primary typeface for large headings and titles. 

When selecting a display font, consider how well it contrasts with the other fonts you use and ensure it suits your brand’s overall style. For example, an elegant font like Josefin Sans might not work well for a brand that prioritizes edgy, bold designs.

Monospaced typefaces

Monospaced typefaces are usually sans-serif fonts in which every letter takes up precisely the same amount of space. Roboto Mono is a popular example, and designers typically reserve it for code snippets or quotes that need to stand out from the surrounding text.

8 font pairing examples

Here are eight examples of the best font pairings for legibility and style. Use them as-is in your next web design, or consider how you might mix them up to create new font combinations.

1. Roboto and Open Sans

This font combination appears in everything from white papers to websites. It may be standard, but it’s very readable, approachable, and clean. Roboto has several weight options that can be adjusted for different heading sizes, and Open Sans is the epitome of legibility. This plain but useful combination makes a great font pairing for technical documentation, knowledge bases, or support FAQs.

2. Montserrat and EB Garamond

Montserrat is a neatly spaced sans-serif font. This semi-bold version contrasts with the elegant linework of EB Garamond, which has a classic typewriter appeal. The headings in this font combination are especially easy to pick out, making it great for news articles that readers might want to scan through.

3. Alfa Slab and Source Code Pro

Use this font combination if you really want to break away from the norm. The Alfa Slab font is bold, serifed, and heavy, while Source Code Pro is light and spacious. This monospaced version of Source Sans Pro is useful for code examples, quotes, and long text blocks like the above excerpt. It’s a great font for scripts, too, and when you pair it with a slab font like Alfa Slab, you have a stark contrast that’s pleasing to the eye.

4. Abril Fatface and Bad Script

This all-serif font pairing combines the classic appeal of old-school typography with the handwritten look of script fonts. It’s a great font pairing for printed products like wedding invitations or playbills. The bold, slab appearance of Abril Fatface clearly marks all your headlines, while the scrawled handwriting of the Bad Script font provides a unique look.

5. Playfair Display and Montserrat

Playfair Display is an elegant, modern font that resembles newspaper typography. The medium-weight version adds enough bolding to make the headings distinct from the body text without losing its sharp serifs. Playfair delivers a bold, modern statement when paired with the spacious and consistent Montserrat.

6. Josefin Sans and Lato

Josefin Sans resembles handwriting, and this sans-serif version is the best font for landing pages or homepages where you want the text to appear inviting. If you follow it up with the equally inviting and readable Lato, you get a consistent text block with just enough subtle contrast to draw attention.

7. Open Sans and Lato

Pairing two sans-serif fonts is a great choice that prioritizes readability, or for sites that use a minimalist design style. Open Sans is familiar to most readers, and when paired with the tight spacing of the Lato font, you get strong headings followed by body text that maximizes use of the page. 

8. Source Code Pro and Space Grotesk

If you’d rather put a monospaced font in your headings, try pairing Source Code Pro with Space Grotesk, a generously spaced sans-serif font that’s easy to read. This font pairing works perfectly for tech and science blogs where a monospaced font will be familiar to the audience, while the body text is ideal for long, highly detailed papers and case studies.

Tips for combining fonts in your web design

Consider the following ideas if you’d rather make your own combinations:

Use fonts that have different tones

Every font adds its own personality to the text, and you should select ones that enhance the tone you’re trying to achieve. For example, cursive script fonts like Lucida are great for conveying elegance on a wedding planner’s website, while slab fonts like Alfa Slab are usually better for a disruptive tech brand. 

Create the right amount of contrast with typeface pairs

Your main objective is to keep body text legible and headlines eye-catching, but that doesn’t mean any combination that achieves those goals is the right choice. You don’t have to stay in the same font family or even typeface category, but you should look for commonalities like stroke weights, spacing, and style that make different fonts compatible.

Limit different typefaces to three or fewer

As with color palettes and page layouts, you should stick to a small selection of fonts on your site. Too much variation throughout your page increases the cognitive load required to interpret it, which could cause frustration that leads readers to bounce out of your website. 

Communicate visual hierarchy through font pairing

Your font pairings should clearly distinguish between titles, headings, and body text. If you keep those differences consistent, readers will naturally learn how to navigate through your website. Here are a few ways to achieve this effect:

• Use font size to imply order. Scale your font size down as you move from titles to headings to body text. Somewhere between a 20–30% reduction for each step is usually best, such as 20pt, 16pt, and 12pt. 
• Experiment with different weights. Different weights, such as medium and semi-bold, provide noticeable visual cues for readers. Lean into that behavior by using bold weights for headlines and titles and medium or normal weights for body text.
• Vary font color shades. Your body text should usually be flat black to make it readable, but you can play around with the shades of your heading fonts. For instance, you could increase the saturation of the font color as the headings get bigger to create an obvious visual hierarchy.

Use a font generator

Try font pairing tools to browse hundreds of unique fonts. Notice which ones catch your eye immediately, and then try different font combinations to determine which ones you like most.

Transform your web designs with perfect font pairings

The perfect font combination can make all the difference in website design. Whether you want to leverage the familiar simplicity of Roboto and Open Sans or the elegant readability of Playfair Display and Montserrat, you’ll need a keen eye for detail and a platform that encourages experimentation. 

Start by experimenting in Webflow, testing font pairings side by side on a visual design canvas. Once you’ve locked in the pairing that best fits your brand, use components and global styles to apply them consistently across your entire site — no need to manually update every text class.

Customer acquisition costs (CAC) are on the rise, for both paid and organic channels. Digital ad costs keep climbing as privacy changes make targeting harder, reducing conversions. And many organizations are pre-emptively tightening their belts to weather yet another period of economic uncertainty. 

As marketing leaders face mounting pressure to prove the value of every dollar spent, one proven strategy can help improve return on investment (ROI) across campaigns and channels: website conversion optimization.

Conversion rate optimization captures more value from every visitor

Every visitor who lands on your website represents an investment. You’ve already paid for them through ads, content creation, public relations, SEO, or other channels. But an ineffective conversion path turns that investment into wasted spend.

Conversion rate optimization (CRO) flips this equation. Instead of chasing more traffic, you capture more value from existing visitors — capitalizing on the demand that other channels are driving to your website. 

Optimizing your site for conversions involves tactics like addressing speed and performance issues, personalizing content, refining messaging, optimizing layout and navigation, and tailoring CTAs. It’s all about reducing friction and making it as easy as possible for your audience to convert, whether that’s making a purchase, subscribing to a newsletter, or requesting a demo. 

Pulling this strategic lever is the fastest way to improve ROI from your website, but also creates a multiplier effect across your entire marketing strategy.

How CRO drives results beyond the website

Website optimization isn’t just about changing button colors or tweaking headlines. It’s about building a discipline of constant testing, iterating, and analysis that:

• Improves marketing efficiency across all channels
• Prioritizes audience research and customer understanding
• Promotes a culture of data-driven decision-making 

Increasing conversions is always a good idea. But when marketing budgets are scrutinized and ROI dominates conversations, the broader impacts of optimization help leaders speak to measurable, meaningful results.

1. Make the most of your entire marketing budget

Website optimization can drive big results. For every second a site loads faster, conversion rates improve by 17%. Personalizing content can increase revenue by 5-15%. 

When more website visitors convert, every marketing dollar works harder. It’s simple math: double your conversion rate, and you’ve effectively cut acquisition costs in half without changing your spend.

These improvements cascade throughout your entire marketing ecosystem. Paid campaigns become more profitable. Content marketing delivers higher ROI. Email marketing drives more revenue. All because you’re maximizing the value of traffic you’ve already acquired.

2. Understand your audience and refine lead quality

Conversion optimization also turns your website into a powerful research tool. Every test reveals more about what your audience wants, how they behave, and what motivates them to act.

For example, testing different messaging reveals which value propositions resonate, while experimenting with content types shows what formats drive engagement. This continuous learning cycle creates a feedback loop that informs the rest of your marketing strategy. 

And as you better understand who converts on your site, you can refine your target audience and tailor your content to reach high-quality, likely-to-convert leads.

3. Rely on data, not opinions, for decision-making

Marketing has always balanced art and science. Conversion optimization tips the scale toward evidence without sacrificing creativity. Instead of making decisions based on hunches or opinions, you build a culture of testing and learning. 

Data-driven optimization also aligns every team’s goals around concrete, measurable business outcomes. Designs and copy aren’t judged solely by opinion, but by their ability to drive results. 

Especially when resources and headcount are limited, data-driven optimization keeps teams focused on making changes that drive measurable improvements, not one-off suggestions or personal taste.

How Walker & Dunlop drove ROI with conversion optimization

One other advantage of conversion optimization: it’s gotten a lot easier in recent years. With the right tooling, website teams can autonomously set up multiple experiments and get results quickly — avoiding the need for development resources or dedicated CRO specialists.

Let’s see what this actually looks like — here’s how the team at Walker & Dunlop is using Webflow Optimize’s AI-driven testing and delivery to improve conversions across their site. 

Commercial real estate services firm Walker & Dunlop chose Webflow to transform their rigid, developer-dependent website into a dynamic, scalable marketing asset that could keep pace with their expanding business lines.

“Combined with Webflow’s visual-first platform, Optimize and Analyze empower our teams to evolve with our clients, experiment and pivot quickly, and, ultimately, create more personalized digital experiences,” says Kokko Tso, Vice President of Digital Marketing.

After launching their new site and implementing Webflow Optimize and Webflow Analyze, Walker & Dunlop saw a 56% increase in form fills, 23% growth in YoY organic search traffic, and the ability to push 10-15 content updates daily. The marketing team now leverages real user data to track conversion paths and runs tests to understand exactly how to optimize content for engagement, increasing quote requests and driving more leads.

Unlock the long-term value of website optimization

Conversion rate optimization can deliver fast results, but it’s not a quick fix or a one-time project. It’s an ongoing practice. Each improvement creates a new baseline to improve on, and each test delivers insights that inform your broader marketing strategy. 

To get started, learn how Webflow Optimize helps teams achieve always-on optimization — testing, learning, and improving conversions while connecting website performance directly to business outcomes.

It pairs every step of a website’s structure with the content a visitor needs to continue their journey. Without it, users often get lost, failing to reach — or even find — the destination you want them to get to.

A content map aligns content with your business objectives, guiding users toward the information they need. Creating content with goals in mind helps nudge users toward desired areas, leading them toward additional information about a product or your checkout flow.

Learn more about why content maps matter and how to create one with the right tools and templates.

What is a content map?

Content mapping is a user experience (UX) design technique. Visitors need varying information — product images, FAQs, customer reviews — at each stage of the user journey. Pairing site content with user intent creates a more valuable, relevant, and engaging experience for your target audience.

Content on a website’s landing page, for example, tells visitors about the brand. It directs them to other pages that are closer to a conversion goal, such as “Products” or “Services” pages.

From there, they can get the necessary information before deciding whether this is the product or service they’re after. And if they don’t complete a sale, they leave valuable data to show where they dropped off in the process — giving designers and analysts clues about areas they can improve.

Why do you need a content map?

Content mapping gives users the best possible experience by presenting the right content at the right time. For example, the size chart for an online clothing store isn’t on the homepage — it’s on individual product pages. Customers generally aren’t interested in sizing information before they’re interested in buying.

Next, consider what each page actually needs, versus what you’d like it to have. If you are an apparel brand that has both a physical and online store, for instance, your physical address and a well-designed navigation bar should be on the homepage rather than a size chart that could instead be included on a product page.

How to build a content map: 4 steps

Even in 2025, businesses continue to refine how content leads visitors from discovery to purchase. A content map helps you focus on meeting users where they are in their journey.

A practical website content map increases your understanding of buyers’ interests and uses content to drive them toward solutions. This step-by-step guide to content mapping will help you get started.

1. Develop buyer personas

Identifying different personas is one of the first tasks for a content map. Understanding distinct user profiles helps pinpoint the messaging and resources each group needs.

There are two primary methods to identify buyer personas:

• Reach out directly to potential customers: Run polls on platforms like Instagram and LinkedIn or use survey tools like SurveyMonkey to learn who is and isn’t interested in your product. This is a great time to reach out to your email list if you have one.
• Use competitor analysis: If you can’t implement a hands-on approach, consider analyzing competitors to find out more about what they’re doing. Search for data on their strategies, website functionality, social media campaigns, and more. Someone with a similar product likely targets similar personas as those you’d be interested in.

2. Monitor consumer interests in your industry

Use forums, social media, publications, and blogs to see what people are saying about your niche. You might find a whisper of a potential trend or a new angle you can try in your next ad campaign. Watching your target audience could help you be among the first to offer something new, giving you a competitive advantage when you make these connections.

When you find gaps in the market, include them in your map and create content that fills the void.

3. Learn about the buyer’s journey

Creating buyer personas is just one step of a comprehensive content marketing strategy. After identifying interested personas, analyze how close they are to making a purchasing decision. This is also known as the customer lifecycle.

There are three stages in the customer lifecycle that are also part of a marketing funnel:

• Awareness: A potential buyer likely knows what they want or need. In this stage, your goal is to grab attention and offer a solution. This part of your content map includes advertising or search engine marketing. Your goal is to find and attract.
• Consideration: A potential buyer is looking for a solution to their problem. In the consideration stage, steer your marketing efforts to more product- or service-oriented content so customers can better understand what you are offering and how it can help them.
• Decision: A potential buyer decides to take action. Demonstrate that you can satisfy their needs by using content to address concerns and make it easy for them to complete the purchase.

Each buyer persona moves through a content funnel: Awareness, Consideration, and Decision. Your content map should list which pages and resources best match each funnel segment.

4. Identify the best type of content for each stage

Content maps are all about the customer journey. Map out the journey through the marketing funnel first, then decide what content you need to pair with each stage.

Consider the information a potential customer needs at each point in the marketing funnel. During the decision stage, for example, customer reviews and FAQ pages can answer customers’ questions, address their concerns, and lead them to convert.

During the awareness stage, on the other hand, an FAQ won’t be as helpful because potential customers are not yet familiar with who you are or what you offer.

Different use cases call for different content types. For example, a short infographic might perform better on Instagram than an ad for an ebook. Meanwhile, an ebook could perform well in an email campaign where your established audience is prepared to spend more time reading.

It’s important to consider not just the type of content, but also who it is presented to and when. A short infographic might work well in the awareness stage because it does not deliver too much information at once. An ebook, on the other hand, could be effective during the consideration stage when buyers are looking for more details.

Tools to build and refine your content map

Whether you’re a freelancer, small agency, or large corporation, here are some tools for your next content map.

• SEO tools. SEO tools like Ahrefs help you discover what people search for and what keywords they use. Combining these tools with the best SEO practices can improve site traffic and lead customers to your content.
• Diagramming tools. Tools like Lucidchart and MindMeister help create user flows that visualize the customer journey. With the journey in front of you, think of relevant content ideas for each stage.These insights not only help build a structured content map but also strengthen your overall content strategy.
• Survey tools. Survey tools like SurveyMonkey and Google Forms help you learn more about your target audience. Create a survey about what products, services, and content interest them to align with their expectations.
• Google Workspace. The tools in Google’s professional suite have specialized functions for various stages of content mapping. With Google Docs, you can create diagrams based on surveys and user behaviors. Plus, Google Workspace is collaborative, meaning everyone on your team can work on the same document in real time.

When choosing tools, consider how each platform enhances both your buyer personas and overall content strategy for a seamless user journey.

Even a quick draft of a content map can give you new insights. Try sketching your site’s main pages, noting how each connects to user goals, and list specific content pieces that match each step in the funnel.

Optimize your content map and website with Webflow

Content mapping is one aspect of a broader strategy to get visitors where they need to go. There are lots of factors to consider before launching or updating a website.

More creators than ever use content maps to shape their online presence. By pairing a clear content map with Webflow’s content management system, you can organize your site structure faster and keep your audience engaged. Webflow offers resources and templates to help you create effective and stunning websites.

Last October, we unveiled our evolution from website builder to the Website Experience Platform — a unified, end-to-end solution that empowers teams to build, manage, and optimize beautiful, on-brand websites that drive meaningful growth, customer engagement and conversion.

Today, we’re excited to introduce the latest addition to that platform: Webflow Cloud. 

Webflow Cloud extends the Webflow platform beyond visual development, content management, and optimization. It leverages our robust, native hosting infrastructure, powered by Cloudflare, to empower developers to deploy full-stack web applications and dynamic web experiences on Webflow – from booking engines, to dynamic SEO pages, to custom integrations with top LLMs.

Webflow Cloud is now available in private beta, with support for the JavaScript + React ecosystem including Next.js and Astro. Over time, our vision is for Webflow Cloud to be agnostic across JavaScript frameworks and libraries to ensure developers can work in the tools that best support their use cases. You can learn more about the beta and request access here.

From websites to full-stack solutions

As customer expectations grow and digital touchpoints become more complex, we’ve seen some of our largest customers push the limits of what’s possible in Webflow — powering full-stack, best-in-class digital experiences through custom code and intricate routing workarounds. And while we’ve loved watching teams push the platform to new levels, we also saw an opportunity to make this easier and more scalable.

By unlocking the ability to host full-stack web experiences natively within Webflow we’re making it easier than ever for technical teams to integrate with third-party APIs, build bespoke logic, or deploy real-time data experiences by bringing their Next.js or Astro project right into Webflow, or using the Webflow CLI in their IDE. 

​​And because we know how critical it is for brands to show up consistently across every touchpoint, Webflow Cloud beta users can use the same components from their Webflow site in their Webflow Cloud apps to ensure that their brand shines across their entire digital experience.

Together, we believe these additions to our growing platform eliminate the need for separate infrastructure or fragmented workflows by providing teams with a unified, efficient way to build and manage all your web experiences — with one vendor, one platform, and no compromises.

While this beta is just getting underway, here are some ways we expect to see customers extending their Webflow sites with this new addition to the platform:

1. Highly-customized, full-stack experiences

Webflow Cloud lets technical teams deliver advanced functionality alongside the same level of design control and performance your less technical teams love in Webflow. Connect your Webflow sites directly to GitHub to build and deploy directly to Webflow’s hosting environment so you can create more dynamic, interactive experiences, all without leaving the platform.

Use it for:

• Booking engines with dynamic availability and user authentication
• Custom pricing calculators that pull real-time data from APIs
• Custom integrations with top LLMs
• Headless ecommerce storefronts
• SaaS product sign-up flows or onboarding journeys

By combining visual-first design with developer-grade tools, Webflow Cloud empowers teams to ship high-impact features faster — without breaking the customer experience into disconnected pieces. That means better experiences for your users, higher conversion rates for your business, and tighter collaboration between developers, designers, and marketers working from a single source of truth.

2. Programmatic SEO and scaled content marketing 

For content and growth teams investing in SEO at scale, Webflow Cloud unlocks a whole new level of automation and flexibility. Instead of manually creating hundreds (or thousands) of landing pages, teams can now programmatically generate dynamic pages based on structured data – without sacrificing design consistency and site performance.

Teams can connect to external data sources like product catalogs, location data, or long-tail keyword sets and deploy high-performance pages that are server-rendered, indexable, and fully customizable. And because these programmatically generated pages live within the same platform as your marketing site, you maintain a unified brand experience across static and dynamic content alike — without needing to utilize a subdomain.

Use it for:

• Location-based landing pages
• Long-tail SEO keyword campaigns
• Dynamic landing page for pay-per-click campaigns
• Dynamic pages to power your account based marketing campaigns

With Webflow Cloud, what once required a separate codebase, dedicated infrastructure, and siloed engineering efforts can now live directly on your Webflow domain.

3. Internal tools & admin interfaces

Every business needs internal systems — but building them often means settling for clunky software or expensive custom development. With Webflow Cloud, teams can quickly build and integrate internal tools with your Webflow site. 

Use it for:

• Employee directories and internal HR portals
• CRM-style lead management systems
• Custom analytics and reporting portals
• Content moderation and review tools

One platform, endless possibilities

We’re just getting started, and as we continue expanding the Website Experience Platform, our mission remains the same: to bring development superpowers to everyone.

We’re releasing Webflow Cloud today in private beta and will be giving customers who sign up for the beta access over the coming weeks. During the beta, Webflow Cloud will be available on all site plans. We will be sharing more about our pricing during the beta. You can request beta access now, and start exploring our developer documentation to get familiar with the platform’s full-stack capabilities.

Over the coming months, you can expect to see continued investment in new tools and infrastructure for developers in Webflow – from expanding framework support to enhanced deployment workflows and improved code management, we’re building toward a future where anyone on your team can contribute to exceptional digital experiences that move the needle for your business.

Scheduling apps automate appointment booking, eliminating the need for emails or phone calls.

With everything that’s out there, picking the best scheduling systems and tools can feel overwhelming. The good news is that you have options. Here’s a closer look at some apps that might make appointment booking straightforward for you.

What are appointment scheduling apps?

Appointment scheduling apps let you manage booking requests online without endless email chains or phone calls. They streamline your schedule by showing real-time availability to clients, saving you effort while improving their experience.

Top appointment scheduling apps for booking client meetings

Here’s a quick overview of each tool’s main features and price points:

• Google Calendar: Straightforward scheduling, free for personal use, booking page with Business plan at $12/month
• Calendly: User-friendly interface, free basic plan, more features from $8/month
• Square Appointments: Customization, free for basic features, advanced options from $29/month
• Doodle: Fast setup, free with ads, Pro tier at $6.95/month
• Zoho Bookings: Advanced scheduling, $6/month Basic plan, $9/month Premium plan
• SimplyBook: Multiple booking channels, free for up to 50 bookings/month, paid plans start at $8.25/month
• Calendar: User-friendly, free basic plan, Standard plan $6/month

1. Google Calendar

If you’re already using Gmail, Google Calendar comes with a suite of tools built into your account. It’s the go-to scheduling tool for many teams and freelancers, offering an intuitive interface that makes setting up one-time or recurring client meetingsfast.

The system is flexible. You can create and view multiple client calendars, automatically set up video conferences with Google Meet or another platform, and sync appointments and tasks to one main calendar.

Google Calendar is incredibly user-friendly. If you’re looking for a tool that lets you set up appointments with a select group of contacts, it’s probably all you need. However, if you want a dedicated booking page, you’ll need a Google Workspace account and a paid Business plan.

Pricing: Google Calendar is free to use. Appointment booking pages are only available with the Google Workspace Business plan, which is $12 a month per user.

Takeaway: If you already rely on Gmail, Google Calendar is a straightforward option for basic scheduling.

2. Calendly

Calendly stands out with its user-friendly design. This appointment scheduling app lets you create a booking page that you can share or embed on your own website in minutes. The app has ameticulous layout, with a user-friendly interface that makes online scheduling a breeze, and it excels at time management too.

Along with its main booking system, Calendly offers workflows for client communications through its paid plans. One feature you might appreciate is Calendly’s automated email reminders and follow-ups, which saves you the time you’d spend reaching out yourself.

Pricing: Calendly has a free Basic plan that lets you set up an online scheduling calendar with a customized booking link and automated event notifications. If you need more features and customization, there’s an Essentials plan for $8/month and a Professional level for $12/month.

Takeaway: If you want a quick, user-friendly booking page with flexible integrations, Calendly is a solid choice.

3. Square Appointments

Square’s free scheduling app provides all the features that most freelancers and small businesses would need for an online appointment booking system.

If you’re looking for personalization, Square Appointments offers plenty of options. Color schemes, typography, and layout options can all be customized, giving you everything you need to create a booking page in line with your brand. Given the creative freedom and features, there’s a bit of a learning curve.

Pricing: The free plan likely has everything a freelancer needs, including automated SMS reminders and a mobile app for tracking bookings. It also includes a Book Now button that easily integrates with an Instagram business page. If you’d like Google Sync or text and email booking confirmations, you’ll need to sign up for the Plus plan at $29/month.

Takeaway: If brand customization is important and you don’t mind a learning curve, Square Appointments can fit your needs.

4. Doodle

Doodle offers a fast setup, guiding you through a few prompts to generate a booking page with a shareable URL. Its calendar sync lets you connect with Google Calendar or Office 365, so you can see upcoming bookings without confusion.

One drawback is the amount of ads with the free plan. Both your admin panel and booking page have ads, which can feel distracting.

Pricing: The Free plan is enough to get you started, but you’ll have ads on your booking page. The Pro tier is $6.95 a month, ad-free, offers unlimited booking pages with custom branding, and includes conferencing through Microsoft Teams, Webex, and Zoom.

Takeaway: If you need a quick setup and don’t mind ads in the free version, Doodle’s straightforward approach could work for you.

5. Zoho Bookings

Zoho Bookings is a solid option for those looking for a more advanced scheduling tool. Its industry-specific templates are visually appealing and offer user experiences geared toward different audiences. They also let your clients pay you ahead of time through Stripe, PayPal, and several other payment processing options if you sign up for their Premium plan.

Another advantage is the features discouraging no-shows and cancellations. You can set time limits for canceling or changing appointments and require a deposit. If you’ve dealt with the hassle of last-minute cancellations, you’ll appreciate these features.

Pricing: Zoho Bookings’ Basic plan of $6/month offers color customization, Zoom and Zoho video conferencing, and a Zapier integration. If you want to accept online payments, sync with Zoho’s CRM, or need three or more workspaces, go with their Premium level for $9/month.

Takeaway: If you deal with frequent cancellations or want industry-specific templates, Zoho Bookings might be your best bet.

6. SimplyBook

SimplyBook offers quick setup, along with several well-designed themes that will work for almost any type of business. Instead of a one-size-fits-all approach, SimplyBook provides booking pages tailored for a wide range of industries, including beauty and wellness, sports and fitness, medical and health, and more.

SimplyBook also lets you accept bookings through Facebook and Instagram or through your own website via an embeddable widget. Having diverse ways to display your booking page can help you reach more potential clients.

Pricing: If all you need are 50 bookings a month, the free plan will suffice. If you have multiple people on your team and need more bookings, you’ll have to go with one of their paid plans starting at $8.25/month.

Takeaway: If you want multiple ways for people to book with you, SimplyBook can be a flexible choice.

7. Calendar

Calendar is well established, with over 80,000 companies in its user base. It’s a booking system with plenty of features, all in a lightweight interface.

Scheduling appointments based on mutual availability is simple. Calendar factors in all your linked calendars to keep your availability updated. You send one link to clients, and they choose a slot from a standard calendar layout.

Pricing: The Free plan works well for individuals or small teams. It lets you sync one calendar (Google, Office 365, or Outlook) and invite up to five people per event. The Standard plan at $6/month expands these options and adds analytics and Zapier integration.

Takeaway: If you want a single link to share for scheduling, Calendar offers a simple approach with options to scale.

How appointment scheduling apps help you run a better business

Trying to juggle multiple appointments and email exchanges can waste your valuable time. Appointment scheduling apps let your clients choose a time that also works for them, helping you grow your business without extra hassle.

With so many aspects to running a business, you shouldn’t have to worry about repeated back-and-forth. The right solution frees you to focus on what you love.

How to get started

Pick the scheduling app that best fits your needs and sign up for an account. Set your availability, integrate it with your calendar, and add the booking page to your website or social media channels. Test your booking flow, then share the link so clients can schedule without hassle.

As the first Website Experience Platform, our goal at Webflow is to empower modern teams to create engaging, brand-differentiated experiences that turn visitors into customers — and the best-performing sites we see are interactive and use animation to stand out.

This is why in the fall of 2024, Webflow acquired the industry-leading JavaScript animation library, GreenSock Animation Platform (GSAP), to take our Interaction solutions to the next level. We’re honored to be able to partner with GSAP on this journey to give web animation superpowers to everyone — whether you want to bring your ideas to life visually or through code.

Today, we’re excited to share some major updates to GSAP and Webflow, made with the broader GSAP community and our shared customers in mind.

GSAP is now 100% free — here’s why

We’re fully committed to investing in GSAP’s future, guided by your feedback and the expertise of the original GSAP team who brought this technology to life. And that investment starts with making GSAP 100% free for all users. 

This means everyone — whether or not you’re a Webflow customer — will be able to leverage all of GSAP’s tools completely free of charge, including the previously paid Club plugins. We’re also expanding the standard license to cover commercial use, so you’re fully empowered to use GSAP anywhere, at no cost to you.

The GSAP team has always strived to make their offerings free to as many people as possible while maintaining high quality standards that benefit the entire community. That’s why Webflow is excited to be able to help them achieve this goal of becoming 100% free. With Webflow’s support, the GSAP team can continue to lead the charge in product and industry innovation while allowing even more developers the opportunity to harness the full breadth of GSAP-powered motion. 

What’s new from GSAP and Webflow

In addition to making GSAP 100% free, we’re excited to release a series of improvements for GSAP developers and our shared Webflow customers. Here’s what we’ve been working on together: 

Major upgrade to GSAP’s SplitText plugin

As part of our ongoing investment in GSAP, we’ve honed in on making one of GSAP’s most popular plugins even better. SplitText has been completely rewritten from the ground up with exciting improvements that include:

• 50% file size reduction for faster load times and improved performance 
• Baked-in accessibility for screen readers
• Easy masking for advanced “reveal” effects
• New deepSlice feature that intelligently handles nested elements that spill onto multiple lines
• New responsive features allowing for cleaner reflows and more seamless animations
• And more!

With 14 new features in total, we’re excited to see more community members leveraging the improved — and now free — SplitText plugin. To get started, see GSAP’s updated documentation on SplitText.

Easier GSAP plugin integration in Webflow

Previously, using GSAP Club plugins in Webflow was often a cumbersome process. We’ve made it easier by making all GSAP plugins directly available in and hosted by Webflow. Here’s how it works: 

1. Go to Site Settings and toggle on the GSAP Core library and plugins you want to include on your site.
2. Create your animations with custom code. 

And that’s it! To learn how to get started, check out GSAP’s Webflow guide. 

Preview custom code in Webflow before publishing

To give you more confidence and control in your deployment, we launched site previews with custom code. This allows you to preview the effects of any custom code before publishing it on your Webflow site — including animations written with GSAP.

What’s next 

In the coming months, we’ll be expanding our native Webflow Interactions with:

• Popular GSAP features, so you can start building GSAP-powered animations visually
• The ability to create with and preview your Interactions on a horizontal timeline for a more intuitive motion development experience
• The ability to reuse any Interaction across your site, resulting in increased workflow efficiency and design consistency

These updates unlock the ability for anyone — regardless of coding knowledge — to build GSAP-powered motion into Webflow sites. It also sets the foundation for the next generation of native Webflow Interactions. This will be entirely replatformed on GSAP and deeply integrated with our Website Experience Platform — from design systems to collaboration workflows and much more.

We can’t wait for what’s to come. Together, GSAP and Webflow are committed to shaping the future of web animation and continuously raising the ceiling on what developers, designers, marketers, and agencies can build — visually or with code.

Stay connected with us:

• Learn more during our announcement video: Join us on May 9 at 9 AM PT on YouTube to hear from myself (Rachel Wolan, CPO of Webflow), Cassie Evans (GSAP Developer Education Lead), and Keegan O’Leary (Webflow & GSAP Developer) as we share more about these Webflow and GSAP updates, including live demos. Subscribe to Webflow’s YouTube channel to get notified.‍
• Participate in our community challenge: In partnership with Codepen, we’ve kicked off an exciting Webflow and GSAP community challenge running throughout May. We invite all GSAP developers — Webflow customer or not — to participate. We can’t wait to see what you build — learn more about the challenge.

The real challenge begins when it’s time to optimize for conversions, engagement, and business outcomes. Teams pour countless resources into attracting visitors, but what happens next? How do you ensure every click counts?

At Webflow, we set out to answer that question with Webflow Optimize – an AI-powered tool designed to help customers test, analyze, and improve their websites. Our approach follows a structured cycle: idea generation → testing → actionable insights → iteration.

Webflow Optimize streamlines the user experience for marketers to create, test, and analyze their website content, saving them valuable time. This innovative solution leverages a sophisticated system that combines proprietary neural network models and generative AI.

This blog post will delve into the engineering choices, trade-offs, and solutions that drive Webflow Optimize’s optimization engine and illuminate how AI is harnessed to empower marketers.

AI suggestions: Accelerating idea creation

Generating high-impact website improvements – such as headlines, layouts, calls to action (CTAs) – is often slowed by creative blocks and time constraints. To address this, we built generative AI tools like Suggest Copy and the AI Landing Page Generator.

Suggest Copy helps marketers craft compelling headlines, CTAs, and other types of variations. The AI Landing Page Generator goes a step further, proposing both text and precise placement suggestions tailored for new landing pages.

As with many applications built on large language models (LLMs), a key challenge is ensuring that outputs are not only inspiring, but also highly relevant to the user’s context. For the AI Landing Page Generator, this also meant ensuring that the proposed placements could integrate seamlessly into the structure of an existing page.

To tackle these challenges, we built a webpage “crawler” to collect metadata about the target webpage, including detailed context around the areas being tested. We also retrieve live testing information from our internal system to give the model a complete view of the environment. Because relevance to the context is essential, we created interactive playgrounds where users could test suggestions and provide feedback. That feedback was distilled into our prompts.

To validate the outputs from the AI Landing Page Generator, we use our placement validators to ensure the AI responses are legitimate. In some cases, a final touch is inevitable – specifically, correcting common errors in AI-generated code using specialized programs. Doing this final validation for part of our “last mile” approach greatly boosted the accuracy of the output.

Below are some screenshots that present an example of our solutions.

We prompted the AI Landing Page Generator to create an updated webpage with the instruction: “Update this page to appeal specifically to college students.” In response, it suggested five changes in a list format.

In the two screenshots below, we see that the updated text explicitly refers to “university students” rather than the more generic “students.” The AI’s output was contextually relevant, aligning well with both the surrounding page content and the original request.

We can also see that AI suggested updates to two heading items separately, showing that different headings are uniquely identified.

AI-optimized tests: Engineering for dynamic traffic allocation

Traditional A/B testing splits traffic randomly across variations, which works, but it can be inefficient. Poor-performing variations waste traffic. Moreover, the method assumes a static environment, but in reality a winner identified over a specific period might not remain the best option in the future.

Webflow Optimize takes a smarter approach. Using Bayesian neural networks, we dynamically allocate more traffic to better-performing variations as the test progresses. Initially, traffic is distributed evenly across all variations. But as data accumulates, the model begins to predict the probability of each variation being the best. Based on these estimations, more traffic is steered towards the stronger variations – while still continuing to explore others to avoid overconfidence. When performance trends shift, traffic allocation shifts accordingly, ensuring that emerging winners receive greater exposure.

Characteristics of web traffic

It is the dynamic and continuous optimization nature of our approach that sets it apart from the traditional multi-armed bandit algorithms. Why is dynamic and continuous optimization so important? Because a website is never static. In practice, we see this play out in many ways. Content frequently changes to support new product launches, time-limited promotions, or event-based campaigns. The sources of incoming traffic shift regularly as ad campaigns evolve. Even patterns in traffic volume vary throughout the week, with clear differences between weekdays and weekends.

To account for these domain-specific dynamics, our training processes are designed with several technical considerations in mind. First, we apply weighted sampling to ensure that traffic patterns are balanced over a longer time horizon. Second, we include contextual features such as ad campaigns, traffic source patterns, and device types into our models to help us tease apart confounding factors that might otherwise skew variation performance.

Why Bayesian neural networks?

Bayesian neural networks (or neural networks trained through Bayesian methods) are a well-known framework with extensive literature and broad applications [reference 1, reference 2]. They offer two key advantages that make them especially suitable for our setting: quantifying uncertainty and preventing overfitting.

Quantifying uncertainty helps the system balance exploration (trying all variations) with exploitation (focusing on strong candidates). Preventing overfitting is particularly useful in domains where data is scarce. While web traffic may seem large, the number of samples for any specific combination of feature values is often quite limited.

Taken together, these benefits make Bayesian neural networks particularly well-suited to the volatile nature of web traffic, especially when models must account for many interacting and impactful features.

Training

Whenever you train a neural network model with a large number of samples, efficiency is a major concern. Here are some tactics that we use in our training pipeline to boost efficiency:

To accelerate training, we use Apache Spark on AWS EMR (Elastic MapReduce) for efficient and scalable feature preparation. AWS EMR dynamically scales compute resources, enabling us to process large datasets quickly and cost-effectively. Once the features are prepared, we leverage AWS Batch for TensorFlow model training, allowing us to run up to 10,000 training jobs in parallel for individual customers.

In training a Bayesian neural network, we need to sample the weights based on their estimated distributions. It would be prohibitively expensive if we did this naively for every sample. The Flipout trick [reference 3] provides an efficient implementation of the equivalent group sampling, so that’s what we used in training.

When we examined memory usage during training, we found that it clearly increased as training batches/iterations progressed. That indicated a memory leak. The root cause was a bug in TensorFlow’s tf.py_function, which is not an issue for tf.numpy_function [reference 4]. We refactored our code to use tf.numpy_function when necessary.

In general, training a neural network involves a great deal of detailed tuning – not only for the model’s performance, but also for training efficiency. There’s no shortcut; you must test extensively.

AI insights: Turning data into insights

Running tests is one thing; interpreting the results is another. Experiment results often include complex metrics and a great deal of information from various dimensions, making it difficult to identify clear, actionable insights.

To simplify this, we built the AI Insights feature, which uses LLMs to analyze test outcomes. This LLM-powered tool highlights key patterns, answers questions, and summarizes the experiment results, saving teams time and effort.

Using LLMs

From an engineering perspective, this feature posed challenges similar to those in AI suggestions, though with different details. These included:

• Context management: LLMs need a structured understanding of the experiment data to provide accurate answers.
• Performance optimization: Reading and synthesizing large datasets is challenging.
• Professional jargon: The insights should be in language that marketers understand.

To address these issues, we adopted several engineering strategies. We leveraged assistant and thread APIs for AI Insights, following a chatting format with chat history maintained in the threads. Since the UI alone doesn’t carry all necessary background information, we equip the assistant with product “manuals” by placing them in its system context, enabling more grounded and relevant responses.

Instead of trying to load and summarize all data at once – which is infeasible at scale – we take a multi-stage approach. When a session begins, the assistant preloads information shown in the default dashboard view. To enrich the initial response, we also preload several frequently referenced stats, even if they are hidden in the default view.

As the conversation continues, the assistant can dynamically fetch additional statistics through function tool calls. These stats are the same ones surfaced through our server APIs, but we expose a simplified version specifically for the LLM. This design helps reduce token usage and makes the data easier for the model to interpret, given its limited visibility into our internal systems.

To round out the experience, we carefully prompt the assistant to communicate in language that resonates with marketers, making technical insights easier to understand and act on.

Evaluations

Robust evaluation is critical for any LLM application, and we’ve built a multi-layered system to assess quality and guide improvements.

We begin with tool-level accuracy, where it’s straightforward to determine whether the assistant triggered the correct functions. On top of that, we use a custom “LLM judge” – an assistant prompted to act like a savvy marketer – to provide automated quality assessments of generated responses.

Finally, we incorporate human feedback. Internal reviewers from across the company regularly evaluate outputs, providing scores and comments that help calibrate both the assistant and the automated judge. Post-launch, we continue improving through real-world signals: customer feedback helps us evolve both the product and the evaluation criteria, including how the LLM judge itself is tuned.

UI/UX

We also want to emphasize the critical importance of UI/UX design. Effective UX techniques are pivotal in addressing common challenges associated with using LLMs, such as lengthy response times for data analysis, inconsistent analysis quality, and limited user engagement. The use of conversational dialogs – rather than static summary reports – combined with suggested initial and follow-up questions, is particularly impactful.

This approach not only mitigates the challenges mentioned above but also delivers a significantly enhanced, interactive user experience. It feels as though the user is consulting with an expert, guiding them to iteratively refine their questions for deeper, more precise insights.

Engineering for speed, scalability, and accuracy

At the heart of Webflow Optimize is a deliberate focus on handling massive data loads in real time without compromising the quality of insights. We achieve this by using generative AI to inspire new test ideas, Bayesian neural networks to dynamically adjust traffic distribution, and LLMs to transform raw metrics into clear recommendations. Together, these technologies empower marketers to optimize their websites quickly and effectively, all while supporting tens of thousands of tests across diverse traffic patterns.

Looking ahead

Webflow Optimize is just getting started. As AI technology evolves, our goal is to continue building tools that empower teams to optimize websites effortlessly, making every visitor interaction count. Behind every AI-powered tool lies a series of engineering challenges: balancing speed with scalability, inspiration with accuracy, and creativity with structure. In Webflow Optimize, we’ve brought together proprietary models and LLMs to deliver a robust solution for website optimization. We will continue training our own models and leveraging state-of-the-art multimodal models alongside agentic frameworks.

References

1. Probabilistic Backpropagation for Scalable Learning of Bayesian Neural Networks
2. A Survey on Bayesian Deep Learning
3. Flipout: Efficient Pseudo-Independent Weight Perturbations on Mini-Batches
4. Unbounded Memory leak when using tf.py_function in tf.data.Dataset.map()