Without a modern CMS in place, CTOs end up investing significant engineering resources in maintaining existing systems and websites rather than building new capabilities or innovative experiences. Development teams are constantly juggling security patches, plugin updates, server maintenance, compliance requirements, and content performance optimizations — just to keep the lights on. This creates a “maintenance-first” mindset that forces CTOs to be reactive rather than strategic when choosing a CMS. 

To overcome this mindset, CMS providers have introduced new offerings to reduce maintenance overhead, but these often create new trade-offs. For example, headless CMSs and digital experience platforms (DXPs) promise maintenance efficiency through minimal plugin dependencies and modular architecture, but limit marketing agility and creative freedom. This leaves CTOs in a lurch: should they prioritize lower maintenance overhead or operational velocity and flexibility? 

With Webflow’s Website Experience Platform (WXP), CTOs don’t have to choose — they can finally treat their CMS as strategic infrastructure. The platform handles security, performance, and updates automatically, while giving marketing teams the independence to publish or update content without requiring significant engineering resources, freeing up bandwidth for innovation.

What CTOs need from a CMS

For CTOs, a CMS is a critical component of their technical infrastructure, providing marketing agility (e.g., quickly shipping content, viewing campaign analytics) without introducing significant technical risks, resource allocation concerns, and operational overhead (e.g., performance challenges, security breaches). Specifically, they want: 

• Minimal maintenance overhead: A CMS that’s easy to integrate and maintain saves development time on tech debt or maintenance. This makes it simpler for CTOs to staff against the CMS and manage budgets, creating room for innovation. 
• Enterprise-grade performance and scalability: As traffic grows, CTOs want a CMS that scales with them, rather than requiring custom database optimizations or hosting management. 
• Built-in compliance and security: Many teams lack the expertise to handle specialized security and meet standards such as GDPR or SOC2. Therefore, CTOs want a platform that already meets these requirements. 
• Seamless collaboration: Modern teams need real-time collaboration capabilities to effectively work together and ship more quickly, rather than stringing together other tools. 
• Developer-friendly APIs: To innovate, development teams need full-featured, developer-friendly APIs to extend CMS functionality and integrate with other key systems. 

Common CMS challenges CTOs face

Unfortunately, most CMSs fail to meet the above requirements. Instead, CTOs must navigate persistent scalability and security concerns, tech debt, cross-functional collaboration friction, and limited integration flexibility. 

Performance and scalability constraints

As traffic increases, many websites encounter performance constraints, leading to slow page loads that negatively impact conversion rates and SEO rankings. There’s also a risk of downtime, which can cost as much as $1 million per hour for large enterprises. 

Some development teams solve this problem by modifying core CMS files or adding performance optimization plugins. However, this patchwork solution requires deep expertise and results in fragile systems that can break during updates (creating more technical overhead) or limit functionality (limiting marketing agility). 

Additionally, as content volume grows, marketing teams might struggle to manage their content pipeline independently. As a result, CTOs need to make staffing tradeoffs between supporting marketing teams or slowing down marketing initiatives (which can have a negative business impact).  

High maintenance overhead and technical debt

Traditional CMSs are often built on legacy systems (like old PHP codebases) and rely heavily on plugins and integrations to extend basic functionality. As a result, the CMS becomes a complex web of patches, plugins, and custom code, forcing development teams to manage compatibility across dozens of components that were not designed to work together. For instance, CMS core upgrades are rarely simple tasks, requiring a backward compatibility audit of all the plugins, themes, and custom integrations, as well as workarounds for any incompatibilities. 

This maintenance overhead also extends to hosting. Traditional CMSs often require development teams to manage their entire hosting stack, including maintaining web servers, databases, and runtime environments, to ensure optimal performance and security. Teams are also responsible for backup and disaster recovery planning, including setting up automatic backup and monitoring (and fixing any issues). 

As a result, CTOs must invest more engineering resources and budget towards servers, premium plugins, and security tooling to keep the existing CMS functional. Over time, this makes seemingly affordable solutions expensive. 

Security and compliance risks

CMS platforms present attractive targets for attackers because a single vulnerability can simultaneously impact thousands of websites. Further, these systems are often built on open-source frameworks, which makes it easy for attackers to study the code and uncover vulnerabilities. This results in a persistent security risk: according to research by Storyblok, 32% of enterprises suffer a CMS-related security breach every single week.

Therefore, CTOs must allocate engineering resources to continually monitor threats across CMS platforms and third-party plug-ins and patch any discovered vulnerabilities. However, many teams lack the expertise or bandwidth to handle all of these responsibilities at onc, creating gaps that increase the likelihood of a security breach. When breaches occur, the consequences are severe. On average, a breach costs $4.88 million while damaging the brand’s reputation (which can take years to rebuild). 

Additionally, traditional CMS platforms weren’t designed with modern regulatory compliance in mind. They lack built-in support for meeting the key requirements of regulations such as GDPR, HIPAA, and SOC2. For example, these platforms can’t typically generate audit trails showing who accessed what data or handle user deletion requests, required by GDPR. 

Limited integration and API support

Marketing teams often want to add third-party integrations (like a CRM, analytics software, and automation tools) to measure outcomes of campaigns and iterate on marketing strategy. However, traditional CMSs have limited plugins and APIs that don’t fully support the marketing integration use case. To bridge this gap, CTOs must allocate significant resources to build and maintain custom integrations, which takes away resources from innovation and core product development. 

For example, let’s say that the marketing team wants to build a personalized experience to show customized content based on visitor attributes (stored in a CRM). This would require custom development to integrate the CRM and CMS, unless the CMS supports content personalization based on CRM data. 

Cross-functional collaboration friction

Modern marketing, design, and development teams must collaborate effectively to ship content quickly. Oftentimes, teams work across multiple tools: Slack for communication, Figma for design handoffs, Google Docs for content review, and email for final approvals. This creates a fragmented workflow where important details get lost between platforms, resulting in inefficient handoffs and miscommunication, which can introduce or deepen cross-collaboration friction. 

To avoid this challenge, teams can use real-time collaboration tools to work together directly in the CMS. However, most traditional CMSs lack in-built support for handoff workflows, version history, or collaborative editing, making it challenging to create streamlined workflows. For CTOs, this results in decreased developer productivity and slower velocity. 

How Webflow solves common CMS challenges

Traditional CMSs force CTOs into an impossible choice: reduce maintenance overhead to free up developer resources for innovation, or enable marketing teams to move quickly and independently. 

Webflow eliminates this tradeoff through an integrated platform that automatically handles security, performance, and compliance while empowering marketing teams to publish or update content independently. As a result, development teams can focus on innovative projects and website experiences in and out of the CMS, treating it more like a strategic asset rather than a burden. Other benefits include: 

• Consolidated platform: Everything in Webflow lives in one integrated platform, eliminating the constant cycle of plugin updates, security patches, and compatibility fixes that plague traditional CMSs. The platform simplifies the tech stack, as organizations no longer need subscriptions for other design, CMS, hosting, and optimization tooling. This translates to cost savings with some Webflow customers reporting savings of up to $850,000 by decommissioning outdated systems, eliminating subscription costs, and reallocating resources. 
• Reduced engineering tickets: Webflow’s visual, composable CMS empowers marketers to create and update content without developer support. As a result, engineering teams can focus on core product development and innovation, leading to faster deployment cycles and measurable business value. 
• Built-in security and compliance: Webflow is backed by enterprise-grade security, including SSO, advanced DDoS protection, a reliable hosting infrastructure, and more. Additionally, we meet common compliance requirements, like SOC2 Type 2, ISO 27001, and GDPR, making it seamless to meet regulatory requirements. 
• Enterprise-grade performance and hosting: Webflow manages hosting for your CMS through partnerships with AWS and Cloudflare, ensuring 99.99% uptime and automatic site backups. This optimization extends to performance as well. Webflow Enterprise supports over 100,000 CMS items (along with built-in performance optimizations like lazy loading images and CDN hosting), so your site’s performance scales with your content. 
• Developer-friendly APIs and integrations: Install an app from the Webflow Apps marketplace or utilize our full-featured headless CMS APIs to build custom integrations. For instance, common actions like creating, reading, updating, and deleting content are optimized for performance. 
• Streamlined cross-functional workflows: Technical teams can feel secure with Webflow’s built-in version control that allows for quick rollbacks when needed. This way marketers are empowered to own their projects while technical teams know everything will flow smoothly. 

Scale content without scaling technical complexity

A modern CMS like Webflow can uplevel both marketing and development teams. Through real-time collaboration workflows and a visual, composable CMS, technical teams can focus on complex projects while feeling secure in knowing their site is easily managed. Meanwhile, the platform automatically handles security, compliance, and maintenance (without incurring additional fees), freeing up developers to focus on core product development and website innovation. This enhanced marketing agility and streamlined tech stack deliver measurable cost savings, driving business growth.

Ready to transform your team’s workflows? Learn more about Webflow for developers and technical teams.

Our mission is to create a place where high-leverage thinking meets high-velocity execution, and AI is a key part of how we achieve that. We believe that increasing our pace is a key element in today’s market. That does not mean typing faster, but using the tools to make informed decisions and move faster.

We’ve made a company-wide commitment to bring AI into every engineer’s daily workflow. Every engineer at Webflow is equipped with the most advanced AI tools available, helping them reduce complexity, eliminate repetitive tasks, and build systems that are both elegant and scalable. It’s how we move fast without sacrificing depth or quality.

AI-enhanced engineering from day one

From the moment an engineer joins Webflow, they get access to a complete AI toolkit built to maximize productivity and insight. This includes a ChatGPT Enterprise license for every employee, unlocking shared rules, collaborative discussions, and customized GPTs that reflect the way our teams work. 

We also provide access to Cursor, a context-aware IDE that acts as an engineering co-pilot. Cursor understands the structure of our codebase and can orchestrate sophisticated refactors across hundreds of files. We also leverage Augment Code to bring the best of LLM assisted engineering into VSCode, WebStorm or Cursor. It answers long-context questions, finds bad assumptions developers are making, helps find logic flaws, scaffolds unit tests, highlights regressions, and more.

To work alongside these IDEs, we built a pull request (PR) bot that automatically suggests clear PR descriptions in our preferred format, helping reviewers assess changes faster with less manual effort. Using this bot is optional, the descriptions are editable, and they update automatically as the PR evolves. Developers just need to add the “ai-pr-description” label to their PR, and a suggested description will appear within about a minute. If the developer provides an initial PR description, this is taken into consideration alongside the code changes to generate the PR description.

We also built an opt-in AI-powered PR linting tool that engineers can trigger by tagging a PR with “ai-linter” on GitHub. This starts a GitHub Action to gather internal documentation on best practices and design guidelines. The action then invokes Claude Code to automatically leave an informed code review comment. These tools are not fringe or experimental and are part of our core engineering stack, and nearly everyone uses them daily.

We’re now also using remote agents in combination with tools like Cursor and Augment Code. This setup enables parallelism for our engineers making it possible for them to work on many PRs concurrently as they manage a team of remote agents. We see this integrated approach as a promising and exciting development that opens the door to entirely new ways of working and amplifies what our engineers can accomplish.

These tools are only as good as the context you provide them which is why we’ve invested deeply in maintaining Cursor rules and Augment guidelines versioned within the codebase. We also rely on MCP servers for integrating context outside of our codebase like Confluence and remote documentation. Whether an engineer is writing a tricky regular expression, exploring architectural tradeoffs, or summarizing a design doc, they are never starting from scratch.

These capabilities help engineers spend less time managing complexity and more time building high-impact solutions. They give our team real leverage, and the impact is clear. 

In the last 90 days:

• Cursor usage is up 80%
• Cycle Time is down 21%
• Deployment rates have risen 11% (off an already high baseline)
• Change failure rate remains below 2%

This is what AI at full scale looks like. Engineering productivity and pace continues to improve week after week.

From prototyping to production, AI at every step

We believe AI should be involved in every stage of the software development lifecycle. That starts with prototyping, analyzing data and user research, doing competitive analysis, and structuring product requirements that are translated directly into working outlines for engineers to review. Engineers can quickly validate assumptions, share early implementations with designers and PMs, and iterate with speed and confidence. The use of AI at each of these steps helps us continue to move at the pace we desire. 

Testing is another area where AI makes a measurable difference. We use AI code generation tools to generate unit, smoke, and functional tests based on recent code changes. These tests are automatically inserted into our CI pipelines and reviewed for coverage and quality. This gives our engineers confidence in every deployment without slowing down release velocity.

In production, we use internal anomaly detection systems powered by machine learning to monitor deployments and system behavior. These systems help us catch issues early, understand their root causes, and respond before they affect customers. AI keeps our systems healthy and our engineers focused on what matters most: building innovative and great products for our customers.

Even as AI plays a growing role in development, we continue to rely on human judgment where it matters. Code reviews remain an essential part of our process. Every change, whether written by a human or generated by AI, is reviewed by an engineer. We treat code review as a core engineering practice and expect everyone to continuously sharpen this skill, including the ability to evaluate AI-generated code with precision and accountability. AI-generated code is held to the same standards as human-authored code. Our philosophy of “you build it, you deploy it, you run it in prod” applies no matter how the code is written.

Accelerating collaboration and knowledge flow

Great engineering isn’t just about code but also about communication, coordination, and shared understanding. At Webflow, AI supports these dimensions as well.

We use AI-powered meeting assistants to automatically capture, summarize, and distribute action items from discussions. This makes every meeting more actionable and dramatically reduces overhead. Engineers stay aligned without having to rewatch calls or dig through scattered notes.

We’re using AI to help with our interviewing process (and candidates can opt-out). This helps us have better interviews by automatically generating timestamped highlights and providing summary transcriptions. The system also creates concise notes, making it easier to review and share key insights from each session. Engineers spend more time actively engaging in the interview instead of focusing on taking notes.

Our documentation and knowledge management systems are augmented by intelligent summarization and enterprise search. With tools that span Slack, Google Docs, Jira, Confluence, and task trackers, engineers can ask a question like “what was decided about the new Designer API?” and instantly find the relevant context, decisions, and implementation plans. This eliminates the cognitive overhead of digging through siloed systems and ensures everyone can move forward with clarity. Finding the relevant document or dashboard or Jira is easy and fast. 

We also rely on AI-driven operational tools to run incident response workflows, streamline coordination during incidents, and automate post-mortem generation. This brings speed and consistency to high-pressure moments, while ensuring every incident becomes a learning opportunity for the entire team.

These capabilities free our teams from friction and create a culture where insight flows naturally. Engineers spend less time looking for information and more time building the future.

A culture of intentional innovation

We don’t view AI as a trend. We see it as a new operating system for how software teams function. At Webflow, innovation is intentional, and AI is a central part of how we design that future. We constantly evaluate and adopt new models, new tools, and new ways of working. This is not passive adoption but an active, deliberate integration of AI into our engineering DNA. 

By creating an environment where experimentation is encouraged and excellence is expected, we help engineers do the best work of their careers. AI doesn’t replace engineers but rather it multiplies what they’re capable of every day.

Why this matters

At Webflow, we are building more than a product. We are building a new standard for how software teams work, collaborate, and scale. The result is faster iteration, clearer thinking, and more ambitious product outcomes.

For engineers who want to shape the future of development, Webflow offers a rare opportunity. Here, you’ll work with cutting-edge tools, build with amazing leverage, and contribute to a culture that values craft and creativity in equal measure. Be prepared to speak to your experience with AI, including how you’ve applied it in your work, what tools or models you’ve used, and how you see it shaping the future of software development.If you’re drawn to deep technical challenges, high-quality systems, and tools that make you better every day, come build with us. This is where engineering moves fast and thinking runs deep. It’s where you can do your best work and level up your career like never before.

Background

Software Composition Analysis (SCA) is a critical security control for managing vulnerabilities introduced through third-party software dependencies. While scanning codebases for known issues is foundational, a mature security program goes further, by operationalizing those findings and enabling teams to act on them efficiently and effectively. Incorporating SCA into a security program often presents significant challenges, including the overwhelming volume of alerts and false positives, inconsistent coverage across diverse tech stacks, and difficulty integrating seamlessly into existing Software Development Lifecycle (SDLC) pipelines, all of which can hinder timely remediation and reduce overall program effectiveness.

We wanted to shift left SCA to allow developers to receive timely, actionable feedback within their existing tools, reducing friction and response times. Shifting SCA left enables greater visibility, faster triage, and alignment with secure-by-design principles. It paves the way for a mature and proactive Application Security program that scales effectively across the organization.

One of the most valuable lessons we learned while implementing SCA was the importance of building a solution that aligned with both engineering needs and company culture. Flexibility was the key. For every control or process we proposed, we offered multiple implementation options and empowered teams to choose what worked best for them.

We also embraced an incremental rollout strategy. Every new initiative started small, targeting one to five teams, repositories, or Jira tickets. We gathered feedback, made adjustments, and only proceeded once we received 100% positive feedback. With that confidence, we gradually expanded the scope, onboarding additional teams, repositories, or issuing broader ticket coverage. Once we achieved full coverage for that phase, we repeated the same measured approach for the next step in the process.

‍

SCA challenges

Implementing a Software Composition Analysis (SCA) solution brings significant benefits for securing software supply chains, but there are several challenges we had to face. Here are some examples:

• False positives and noise – Many SCA tools report vulnerabilities that are:
  • Not actually exploitable (e.g., only in test/dev code).
  • Already mitigated by application logic or configuration.
  • This leads to alert fatigue, reducing developer engagement.
• Vulnerability context and prioritization
  • Not all CVEs are equal. Without context (e.g., reachable code paths, in-use libraries), it’s hard to know what to fix first.
  • Teams need help triaging real vs. theoretical risk.
• Version conflicts and fixability
  • Even when a vulnerability has a fix, upgrading a library might break other parts of the system.
  • Dependency complexity and tight coupling slow remediation.
• Developer adoption and workflow integration
  • If the tool isn’t integrated into CI/CD or developer tools (e.g., GitHub, VS Code), adoption suffers.
  • Manual processes for reviewing or suppressing issues create friction.
• License compliance issues
  • Many teams focus on CVEs but overlook open-source license violations, which can introduce legal risk.
  • Managing license policies (GPL, MIT, BSD, etc.) across dependencies is a separate layer of complexity.
• Inconsistent policies across teams
  • Without centralized governance, each team may handle vulnerabilities differently, some patch immediately, others ignore or delay.
  • Lack of standard SLOs, suppressions, or exception processes leads to inconsistent results.

In the following section, we walk through how we successfully implemented an SCA program at Webflow, overcoming the key challenges that came with it.

‍

Implementation steps

Step 0: Inventory – you can’t protect what you don’t know

A fundamental starting point for any SCA program is establishing an accurate, continuously updated inventory of repositories. In a fast-moving engineering organization, engineers create and retire repositories regularly, so our SCA solution needed to adapt dynamically to these changes.

To identify which repositories should be covered by SCA, the AppSec team proposed three inventory approaches:

1. GitHub topics: engineering teams tag their repositories with predefined topics (e.g., business-critical-yes or business-critical-no) at creation time.
2. Metadata file: each repository maintains a metadata.json file containing fields like “enable SCA scanning”, associated microservice, deployment info, etc.
3. External database: a centralized spreadsheet, jointly managed by engineering teams, listing all repositories with ownership and SCA-related metadata.

Engineering picked the GitHub topics option. Based on that, we automated this process with a bot that runs weekly and compiles three lists:

• All repos tagged business-critical-yes
  • These repos are added to our SCA scanning tool if not already scanned.
• All repos tagged business-critical-no
  • Those Repos are removed from the scanner.
• New repos with no business-critical topic and inferred ownership (via CODEOWNERS file or repo creator)
  • AppSec reaches out to the owners to have the appropriate topics assigned. We follow a “trust but verify” model, engineering teams are encouraged to tag repos at creation, and AppSec only steps in when tags are missing.

The automation consumes the metadata to also generate an inventory.json config file to be used during the SCA scanning process (More about the inventory.json in the next sections).

Step 0.1: Ownership – knowing who’s responsible

Accurate ownership is essential for effective SCA, particularly when it comes to reporting and remediation. For most repos, ownership can be derived from the CODEOWNERS file or the original creator. However, in monorepos or shared codebases, ownership must be more granular, down to the level of specific third-party dependencies.

We proposed three options for capturing ownership:

1. CODEOWNERS file
   
2. Metadata file
   
3. External source of truth (e.g., Google Sheets, Confluence, Renovate)

Our automation was designed to be agnostic to the source of ownership data. No matter which option a team selected, the script would parse and normalize the data before passing it to the reporting module.

By allowing engineering teams to choose the ownership mechanism that best suited their workflow, we significantly increased adoption and accuracy. In our case, the preferred approach was an open source tool called Renovate, that our Developer Productivity teams introduced for automated patching. Our scripts pull the Renovate data (renovate.json) via API to correlate package ownership before issuing any reports.

This flexibility helped establish stronger partnerships between AppSec and engineering, by solving problems together instead of enforcing rigid processes.

Step 1: Onboarding – scanning for vulnerable dependencies

While most modern SCA tools support the necessary API integrations to automate repo onboarding, scan execution, and results retrieval, we ensured our SCA scanner would also provide good value regarding:

• False positive rate and tuning capabilities
• Scan result quality
  
• Ease of integration and configuration‍

We built our automation layer to be vendor-agnostic, replacing the underlying scanner would simply require updating the API calls within our scripts. The SCA tool scans every new PR looking for dependencies being added to the codebase. On top of that, it also runs a daily full scan with the goal to catch new vulnerabilities that might have been disclosed after the dependency has been added to the codebase. 

Step 2: Integration – bringing scan results into the software development lifecycle (SDLC)

Once repositories are onboarded and scanned regularly (daily full scans and at every PR for new dependencies), the next step is to integrate the results into the engineering workflow in a way that aligns with existing processes and minimizes friction.

At Webflow, engineering teams use Jira for work tracking, organizing items into epics, tasks, bugs, etc. To integrate SCA into their SDLC naturally, we designed our automation to generate findings as Jira tickets, formatted and categorized in a way that matches how teams already operate. The integration lambda will cover every single repo from the inventory.json and run at least one synchronization per month to ensure SCA scanner data and Jira tickets are consistent. 

Rather than flooding teams with tickets immediately after onboarding a new repo, we take an incremental and controlled approach to avoid overwhelming them.

Dry run mode by default

When a repo is first onboarded to SCA, it enters a “dry run” mode according to the default config in the inventory.json file. During this phase, scans are executed, but instead of creating tickets, the results are compiled into an internal report. This gives the AppSec team a chance to:

• Review critical findings before escalating them.
• Weed out false positives.
• Adjust severity ratings if needed.
• Validate the signal-to-noise ratio before handing it off to engineering.

If we confirm any Critical issues, we notify the owning team and issue a ticket immediately. Otherwise, we queue findings for later triage or de-prioritize them accordingly.

Syncing with engineering teams

AppSec maintains monthly syncs with each engineering pillar. These touchpoints serve two purposes:

1. Hear about upcoming changes on their roadmap (e.g., features needing security input).
2. Share updates from AppSec, such as new tooling, initiatives, or findings.

We also discuss dry run findings during these meetings. Giving teams a heads-up allows them to plan ahead and allocate resources in upcoming sprints. When the repo is ready to exit dry-run mode, we enable ticket generation, starting only with Critical and High severity issues.

Once the high-priority backlog is under control, we gradually start surfacing Medium and Low severity findings, helping teams continuously improve without being buried in alerts from day one. We put the settings in place by customizing the inventory.json config file. The snippet below shows a “dry run” config for the Webflow monorepo that is run every second day of the month and only reports P0 and P1 findings (Critical and High).

"jira_dryrun AppSec webflow/webflow:package.json": {
  "input_args": {
    "jira_dryrun": true,
    "min_priority": "P1",
    "project_name": "webflow/webflow:package.json",
    "day_of_month": 2
  }
},

Step 3: Automation – reporting findings at scale

At this stage, we’ve identified the repositories to scan, integrated our SCA software to scan them continuously, and established a review process for findings. Now, the challenge becomes: how do we efficiently report these findings across many teams, while maintaining centralized visibility and control?

The solution was to automate ticket creation in Jira, enriched with custom metadata using labels and custom fields. This allows us to both integrate with engineering teams’ workflows and maintain AppSec oversight.

Metadata-driven tickets

Our automation scripts parse the SCA scanner findings and create Jira tickets with metadata-driven fields. For example:

• A high-severity issue with a CVSS score of eight automatically gets tagged as sec-sev-high and the due date is set according to the severity.
• Tickets may also be tagged with the affected package name, repo name, and scan source.

This structured tagging and custom fields allows AppSec to:

• Track vulnerability trends across teams or services.
• Build dashboards and heatmaps to visualize open issues by severity or location.
• Monitor remediation progress per team or per vulnerability class.

The AppSec team organizes its work in sprints. After each stand-up, we review Jira linters to track new vulnerabilities identified by SCA scanners, as well as monitor the status of issues already assigned to engineering teams. In addition to these linters, Jira dashboards provide a broader view of trends. If we spot anomalies, such as an unexpected increase in vulnerabilities, we proactively investigate the root cause and take action before the situation escalates.

Routing and workflow control

Instead of immediately assigning tickets to engineering teams’ Jira projects, we first create tickets for all new findings in an intermediary Jira project used for overall Vulnerability Management (eg: VULN jira project). This  step allows for a manual review before pushing bulk tickets into a team’s SDLC.

This review helps ensure accuracy and relevance. For instance:

• A high-severity issue in a package used only by a service scheduled for deprecation might be downgraded.
• A finding could be flagged as a false positive or reclassified based on external business context unavailable to the scanner.

Once reviewed and approved, we move the ticket  to the appropriate engineering team’s Jira project, based on metadata or routing rules.

Engineering autonomy

While AppSec owns and controls the security metadata, engineering teams retain full control over their SDLC-specific fields, such as priority, effort estimation, or sprint planning tags. This separation of concerns ensures alignment without stepping on team-specific processes.

This structured automation approach gives AppSec a central view of SCA vulnerabilities while seamlessly embedding remediation workflows into engineering pipelines.

While engineering teams vary, we found that the vast majority consistently resolved SCA findings within the AppSec SLA. This has enabled the AppSec team to bring critical findings down to zero and confidently project similar progress on high-severity issues within the next one or two quarters. For the few outliers unable to meet the SLA, we provide support through follow-up syncs, as detailed in the following sections.

Step 4: Corner cases – can we patch everything?

Most SCA workflows focus on severity, vulnerable versions, and remediation status, but real-world scenarios often introduce edge cases that don’t fit neatly into those categories. At Webflow, we built our program to handle these corner cases effectively, avoiding unnecessary friction with engineering teams while still maintaining a strong security posture.

Reachability: Not all criticals are equal

One key metadata field we leverage is reachability, whether the vulnerable code is actually invoked in the application.

A finding marked Critical by the SCA scanner would typically trigger a high-priority response, possibly even a security incident. But if reachability is marked as false, we treat it as a non-exploitable vulnerability. In that case, we may downgrade the severity to High, allowing it to remain urgent but avoiding disruption to team workflows.

This approach helps us balance risk with pragmatism, ensuring we focus incident-level urgency only on exploitable issues.

Third party licenses and end of life

Even if a third-party package has no known vulnerabilities, that doesn’t mean it’s automatically approved for use. To address this, the AppSec team collaborated with Webflow’s Legal team to define a standard for third-party library usage. Our automation also creates Jira tickets for packages that use unauthorized licenses, as well as those flagged by Renovate as end-of-life or unmaintained. This process enables the AppSec team to review these edge cases and partner with Engineering to ensure only approved third-party packages are adopted.

No fix available: don’t spin wheels

Another important field is “Is fix available”. If a confirmed Critical vulnerability has no available fix, that’s an immediate concern. AppSec and the owning engineering team work together on mitigation strategies, such as replacing the dependency, implementing compensating controls, or isolating affected components.

However, if the issue is non-critical and unpatchable, it doesn’t make sense to create noise. These are tagged as sec-no-fix and tracked as inactive Jira tickets in the VULN project.

Our automation re-checks these findings regularly. If a patch becomes available, the script updates the ticket with the fix version and a sec-new-fix tag and reactivates it for review.

Linter-drive triage for late fixes

We also maintain Jira linters that monitor for tickets tagged with sec-new-fix. These represent previously unfixable vulnerabilities that now have a patch available, meaning the window of exposure is finally closable.

During AppSec sprint standups, we review these flagged tickets multiple times a week. Once verified, we triage and assign them immediately to the correct engineering team for remediation.

Why this matters

SCA tools will always surface edge cases. If not handled carefully, these can:

• Generate friction between AppSec and Eng Teams.
• Lead to unnecessary back-and-forth.
• Cause delays in remediation or weaken engagement.

‍SCA findings – corner case triaging

By combining smart process design with custom automation, we’ve created a system that accounts for these nuances, filtering out noise and ensuring only actionable findings make it to engineering.

Step 5: Supporting the eng team – be a partner, not a blocker

Once SCA findings are flowing into engineering teams’ Jira pipelines through automation, the real work begins. A mature AppSec program doesn’t stop at ticket creation. Security isn’t just about identifying issues, it’s about enabling teams to fix them effectively.

Findings are the start, not the end

Expecting engineering teams to handle every vulnerability on their own is unrealistic. Even with good tooling and clear severity tags, real-world development introduces complexity:

• Upgrading a package may cause breaking changes.
• The vulnerable dependency might be scheduled for deprecation in an upcoming roadmap item.
• Fixing a vulnerability immediately might delay a larger refactor that would eliminate it entirely.

If AppSec wants to raise the security bar, it must be ready to engage beyond detection.

Shift the mindset: enable the mission

The AppSec mindset should be:

“We’re here to protect the company’s mission and its customers, not to patch everything blindly.”

This means understanding the context behind each issue. Security must align with business and engineering goals, not disrupt them.

What support looks like in practice

AppSec teams should be prepared to:

• Collaborate on prioritization when a fix isn’t feasible right away.
• Propose alternatives, like safer libraries, or recommend compensating controls (e.g., Web Application Firewalls, HTTP headers, etc.) to reduce risk while buying time.
• Contribute directly to the codebase by helping write PRs, or offering guidance on implementation challenges for shared packages.

Being willing to dive deep, whether that’s joining an engineering planning session or helping troubleshoot a failing build, transforms AppSec from a policy enforcer to a trusted partner.

Why it’s worth the effort

Yes, this model adds more responsibility and pressure to the AppSec team. That’s why it’s so important to tune the earlier steps, especially filtering out noise, so that only the most meaningful and actionable vulnerabilities reach engineering.

But the payoff is huge: engineering teams will start to see AppSec not as a bottleneck, but as a valuable ally, a team that doesn’t just flag problems, but helps solve them.

Over time, this trust leads to stronger security culture, faster response times, and better adoption of secure development practices across the organization.

Step 6: Closing the loop – validating fixes and strengthening Webflow’s security posture

One more thing before we can call the SCA work done. We need to validate that reported issues were actually resolved, and use it to drive continuous improvement. This approach has strengthened the SCA program, reducing critical findings to zero and ensuring any new ones are addressed within days. It also sets the stage for achieving the same level of control over high and medium findings. We estimate this will be accomplished in the next 3 to 6 months.

Automated validation after ticket closure

A new validation ticket is automatically issued to AppSec once the original Engineering ticket is closed whenever the severity is high or critical. This ticket prompts the AppSec team to verify the fix, checking that the patch fully mitigates the reported vulnerability and that the repo’s next scan reflects a clean result.

Proactive monitoring of SLA and stale tickets

The same automation also tracks SCA tickets that are approaching or exceeding SLA thresholds, or are marked as open but show no recent activity.

Rather than letting these issues linger, we proactively surface them in our regular check-ins with engineering teams. The check-ins are performed monthly between AppSec and engineering team leadership. Among several routine topics in the agenda, we go over a Jira linter and discuss all tickets that need attention due to their due dates. 

This final step ensures accountability and follow-through, preventing critical issues from falling through the cracks. Most importantly, it reinforces that SCA is not just a compliance checkbox, it’s a collaborative, continuous process that raises the organization’s security posture over time.

Conclusion: building a sustainable SCA program that engineers will actually use

Implementing a successful Software Composition Analysis (SCA) program is not about pushing tools into the pipeline and hoping for the best. It’s about building trust, creating flexibility, and embedding security into the way engineering teams already work.

At Webflow, we approached SCA not as a one-size-fits-all mandate, but as a collaborative effort. By designing processes that were incremental, customizable, and automation-friendly, we enabled security at scale, without disrupting developer velocity. Every step in the workflow, from repo inventory and ownership mapping, to ticket triage, validation, and follow-up, was crafted to reflect a single principle: security should be an enabler, not a blocker.

The payoff? Engineering teams are more responsive to security issues, more confident in the tools and processes we’ve built together, and more open to working with AppSec as a strategic partner. And that, more than any dashboard metric or vulnerability count, is what real AppSec maturity looks like.

If you’re building or scaling your own SCA program, start with the people, then build the automation. Empower engineers with context and support. And always aim for meaningful, actionable findings, not noise.

Special thanks

This project succeeded thanks to the support and collaboration of many individuals and teams who not only helped build the solution, but also adopted it, provided feedback, and reported issues along the way. I’m especially grateful to the Webflow Engineering teams for embracing our SCA program and strengthening our security posture.

Special thanks to Topher Chung, Ankit Agrawal, Albert Chang, and Matias Altman for leveling up the SCA efforts at Webflow.

But many dedicated ecommerce platforms fall short when it comes to storytelling. Products get boxed into cookie-cutter templates, and brands lose the chance to stand out. That’s why modern businesses are turning to platforms like Webflow, where they can combine best-in-class ecommerce tools with rich, expressive content experiences.

With Webflow, businesses can craft websites that don’t just captivate, but convert. And thanks to our ecosystem of top-tier ecommerce Apps like Shopyflow, CartGenie, Stripe, and Smootify, marketers can scale sophisticated ecommerce experiences without complexity.

Here’s how four innovative brands are leveraging ecommerce Webflow Apps to blend content and ecommerce, accelerate time-to-market, and deliver more powerful, conversion-driving experiences.

Bond & Grace x Shopyflow: Pairing the art of storytelling with ecommerce design and development

Bond & Grace isn’t your typical publisher. It’s a lifestyle brand redefining what it means to engage with classic fiction with a delightfully unique business model. Customers can take a beloved public domain novel, like The Secret Garden, commission original artwork inspired by the text, and produce a coffee-table-worthy Art Novel that pairs timeless storytelling with high-end design. Each title also inspires a broader collection of products — think candles, prints, and curated gifts — transforming literature into a sensory, shoppable experience.

For a brand so rooted in visual storytelling, Webflow was the obvious choice. “Previously we were running a headless setup, but it was too rigid,” says Ana, Head of Operations, and lead developer. “Now I can build a new product showcase in a day. The flexibility has been game-changing.” Webflow lets them highlight product nuances — like the texture of a book’s cover or the glow of a candle — in immersive, editorial ways that static platforms can’t replicate.

To power ecommerce experiences, Bond & Grace integrated Webflow App, Shopyflow, which bridges Webflow with Shopify’s backend. With real-time data sync, Shopify data is imported into Webflow CMS collections, and ecommerce components, like “buy now” buttons, are available as native Webflow elements. 

For teams like Bond & Grace who work in Webflow every day, Shopyflow feels instantly familiar — giving them the tools and confidence to build, manage, and scale rich ecommerce experiences with ease, and since integrating it with their website, they’ve cut their time-to-launch in half.

“Shopyflow’s documentation is great, but what really impressed us was the team. We collaborated closely to create custom filters, improve product search, and manage complex syncs between platforms.”

‍— Ana Garza, Head of Operations and lead developer, Bond & Grace

As Bond & Grace expand their product offerings,, they’re exploring which Webflow features can help them better showcase premium inventory. “We’re excited to build more immersive pages that bring a tactile experience and help customers feel products, and we’re exploring GSAP animations, user reviews, and even VR,” Ana explains.

Zip Running x CartGenie: Streamlining the path to purchase 

Zip Running was born out of a simple insight: there are people who want to run to work, but lack the gear to do it. An industrial designer by trade, founder John Swain spent four years perfecting a run-commute backpack that’s as refined as it is rugged. Now, with the brand finally scaling, the website plays a vital role: it’s the product showroom, the conversion funnel, and the brand’s emotional handshake with new customers.

Zip Running’s audience is urban professionals who care deeply about performance, design, and sustainability. These are not impulse buyers, but rather detail-oriented, values-driven consumers who expect premium experiences, which is why the brand needed a platform that could match the product’s ambition.

John chose Webflow for its professional-grade design control and responsive flexibility. “I’m not a web designer,” he says, “but I knew what I needed: a site that looks amazing on every device, loads fast, and builds trust instantly.” With Webflow, he was able to translate the product’s story into an online experience that communicates its value clearly and convincingly.

The Zip Running website is highly visual and designed to tell a story, showcasing well-known community members such as Harvey Lewis, an ultra-runner who has run to work as a school teacher every day for over ten years. Activations drive visitors to the website, which must engage them and direct them to the product page for checkout.

For its ecommerce engine, Zip Running uses CartGenie to fine-tune every touchpoint. It ensures every buyer has a smooth, confidence-building path to purchase and offers a number of features. CartGenie supports a variety of payment options, including credit card, Klarna, and offline payments, as well as custom checkout fields and address validation for international customers, and even enables embedded reviews. 

“Moving to CartGenie cut my time spent on order fulfillment in half. Their shipping integration is more advanced than competitors, plus the ability to collect custom information at checkout streamlined our entire ecommerce process. Ecommerce isn’t just functionality — it’s part of the brand experience, and CartGenie helped us make it ours.” 

— John Swain, founder of Zip Running

SportsVisio x Stripe: Transforming highlights into high-converting content

SportsVisio brings computer vision technology to sports, transforming raw game footage into highlight reels, advanced stats, and coaching insights. Their customers include leagues, tournaments, coaches, and players — some chasing scholarships, others just celebrating a child’s passion. Spanning basketball, volleyball, and baseball, their now 200+ customers across 16 countries need clarity, ease, and trust from the insights generated.

That’s why the website is so central to SportsVisio’s strategy. “It has to educate, inspire, and sell  — sometimes all at once,” says Seán O’Connor, Chief Revenue Officer. Their previous site on their legacy CMS couldn’t keep up, but with Webflow, they’ve been able to build a modular, design-friendly platform that works for everyone: from sales-led enterprise prospects to solo-coach parents.

Offering one-off purchases and subscriptions, SportsVisio needed the ability to easily create and update flexible offers, as well as provide information to help customers understand pricing and complete a purchase.

At the heart of their ecommerce setup is the Stripe App for Webflow, enabling instant and secure self-serve purchases through embedded links and landing pages. But this isn’t just about payment; it’s about conversion. “We’re creating pages tailored to very specific personas, high school basketball coaches, so we needed something flexible and fast to iterate,” the team says. Webflow’s visual canvas and Stripe’s global-ready infrastructure made it happen.

With Webflow, SportsVisio can spin up new product flows in hours — not weeks — and tell a brand story that evolves with every highlight reel, and as a result, SportsVisio has boosted conversion rates by 150%.

Wizard Pi and Alcester Schoolwear x Smootify: Ecommerce that fits just right

Webflow Certified Partner Wizard Pi is a UK-based design and marketing agency that builds exclusively with Webflow. When they teamed up with Alcester Schoolwear, they saw an opportunity to transform a utilitarian and sometimes complex shopping task — buying school uniforms — into something intuitive and even delightful.

Alcester Schoolwear serves busy parents across dozens of schools, helping them find exactly what their child needs, fast, and the ideal customer journey starts with one question: which school does your child attend? 

From there, the experience becomes completely personalized thanks to Webflow’s flexible CMS and a front-end, designed with GSAP animations and a thoughtful UX. “This was about creating a site that feels helpful, not transactional,” Alex Williams, Lead Designer for the project, explains.

To handle inventory, checkout, and logistics, the site uses the Smootify App, which bridges Shopify and Webflow seamlessly. Products and collections live in Shopify but are surfaced and styled through Webflow, enabling full creative control without the usual synchronization headaches. Smootify’s library contains over 150 pre-configured components that are fully customizable in Webflow and integrate seamlessly with Shopify.

“The best part is how easy it is to update. Adding a new school is done by creating a new collection in Shopify. Once added, it automatically syncs with Webflow and adds the school as a new CMS item. This takes just a few minutes, not hours.”

— Helen Sharkey, Head of Digital Design, Wizard Pi

Alcester Schoolwear also benefits from Shopify’s point-of-sale (POS) system in-store, connecting their online and offline experiences. This makes stock management and customer experience fully unified across channels. 

By leveraging custom metafields and real-time syncing via Smootify, Wizard Pi eliminated the need for manual updates, giving the client greater autonomy and accelerating time-to-launch. The result is a storefront that evolves as fast as the academic year progresses — without sacrificing design or performance.

Unlock greater ecommerce potential with Webflow Apps

When content and ecommerce are seamlessly integrated, brands are able to achieve more than just clicks. They are able to design ecommerce websites with more intention, build more engaging digital experiences, and scale in a fraction of the time.

Webflow and our ecosystem of ecommerce Apps unlock that advantage. Whether you’re selling art books, performance backpacks, AI sports analytics, school uniforms, or any other product, service or subscription, you don’t have to compromise between storytelling and scalability. You can have both. And in today’s market? That’s a major win.

To get started with Webflow Apps today, visit our App Marketplace.

We’ve been busy since announcing the acquisition of GSAP last fall. At the end of April, we were thrilled to make GSAP 100% free for the entire web community. And today, we’re excited to begin rolling out a new version of Webflow Interactions, replatformed on GSAP. This empowers all Webflow designers and developers to visually build smooth, expressive, and performant animations powered by the best animation engine on the web.

Webflow was one of the first platforms in the world to make it possible for anyone to build robust web interactions and animations — visually. Now, with GSAP directly built into Webflow, we’re delivering unprecedented power and creative control without requiring the use of code. You can achieve complex, custom animations like stagger effects and granular text splitting more easily than ever before — and on an intuitive horizontal timeline that sets a new standard for visual-first motion development. Webflow Interactions with GSAP empowers our customers to build top-tier animations without sacrificing creation speed, and we’re just getting started!

Thoughtful motion is the pinnacle of creative and brand differentiation 

As visuals continue to flood digital channels, static experiences often fall short of building fast, meaningful connections with users. Coupled with the rising popularity of homogeneous AI design in web development and shrinking online user attention spans, businesses are feeling the pressure to stand out. 

Strategic motion and interactive elements are no longer optional; they’re fundamental to how brands tell their stories, convert visitors, and create lasting connections. When a visual storyteller hand-crafts these interactions, they offer an unmistakable quality that stems from human intention and care — something no AI can authentically reproduce. While AI excels at speed, only human creators can bring the nuanced judgment needed to craft motion that feels purposeful, guides visitors intuitively, and creates the kind of elevated experience that turns casual browsers into engaged customers.

This is why together, Webflow and GSAP are democratizing sophisticated, visual-first motion development. And today, we’re laying the groundwork for the next generation of Webflow Interactions with a major first release that will serve designers, developers, and agencies alike. 

What’s launching today

In this initial release of Webflow’s new Interactions with GSAP, we’re delivering:

• The ability to craft sophisticated and performant animations powered by GSAP — without writing a single line of code.
• A completely reimagined workflow featuring a horizontal timeline and purpose-built controls that give designers and developers surgical precision over their animations — without compromising speed. 
• The ability to reuse interactions across your entire site, eliminating repetitive work and driving consistency. 

For more details and to see what our customers and partners are already saying about Interactions with GSAP, read on.

Visually build GSAP-powered interactions

Webflow designers and developers can now visually build smooth, reliable, and performant interactions with the confidence that best-in-class GSAP code is running under the hood for all of them. And with this first release, you’ll be able to animate with some of GSAP’s most in-demand capabilities without writing a single line of code, including:

• SplitText, letting you precisely animate each character, word, or line independently, such as gradually revealing content to build suspense, or drawing the reader into key words or phrases for emphasis. 
• Staggers, enabling you to effortlessly animate groups of elements (like cards or nav links) with a delayed, sequential effect, creating a sophisticated entrance and guiding the visitor’s eye.
• ScrollTrigger, empowering you to transform even the most static page into a dynamic experience, unfolding and intuitively controlled by your visitor’s scroll. 

Check out what Joseph Berry, a Certified Webflow Partner, built using Interactions powered by GSAP, leveraging all of the aforementioned features! 

“GSAP and Webflow coming together feels like a dream I’ve had for years finally becoming a reality. Right out of the box, this latest version of Webflow Interactions is a total game-changer; nothing else even comes close. It completely shifts our workflow, allowing us to focus on delivering next-level animations for our clients faster and more creatively, without diving deep into complex custom development. The possibilities feel endless, and it’s truly just the beginning.”

‍ — Joseph Berry, Founder of JB Studio and SkinGame Media

Animate faster on a new horizontal timeline with intuitive, advanced controls

We’ve completely transformed the user experience for building interactions, featuring a horizontal timeline for creating extended interactions and sequences — an industry standard for motion design experts. With this more intuitive interface, users have a clear visual representation of animation sequences, timings, and easing curves. Here’s what it unlocks:

• Intuitive visual sequencing: A horizontal timeline with action blocks makes it easier than ever to sequence and orchestrate complex animations, whether in parallel or series.
• Precision timing & control: Gain precise control over animation timing, playback, and scrubbing directly on the timeline, with easy drag-and-resize of action blocks and numerous keyboard shortcuts for efficiency and accessibility.
• Effortless exploration & refinement: Navigate complex animation sequences with fluid zoom, pan, and drag functionalities, enabling rapid iteration and refinement of motion effects.

Within this new experience, we’re also introducing a number of powerful new capabilities.

• Fine-tuned interaction triggers: Get your interactions just right with robust, event-type-specific configuration for click, hover, page load, and scroll triggers. And for even more creative control, after visually crafting an animation, developers can programmatically trigger it in custom code. 
• Advanced element targeting: Target elements with CSS combinators to animate specific descendants, ancestors, or siblings in complex layouts — allowing for highly sophisticated and nuanced interactions. 
• Purpose-built controls for repeating and staggering animations: Easily create engaging, repetitive animations or sequential reveals in just a few clicks, like a pulsating arrow or cards unveiling one by one.
• Class-based animations: Trigger entire style changes with a single interaction by adding, removing, or toggling classes — making it fast and scalable to apply custom states or themes.

Reuse pre-built interactions across your site

You spoke, we listened. Interactions are now reusable across your Webflow site. With this newest version of Interactions, you’ll be able to define an interaction once, then apply it to various elements or classes across your website — saving valuable time and helping you maintain design consistency.

But that’s not all! You can now save your own custom actions as reusable presets through the Interactions panel. This means you won’t be limited to triggering or targeting a single interaction on multiple elements; you have the flexibility to apply the very same animation effect across entirely different interactions. Imagine designing a unique fade effect just once. Now, you can seamlessly reuse that exact preset for a page scroll animation, a hover interaction, or any other dynamic element on your site. 

We’re excited to start getting this initial launch into your hands and hearing what you think. Your feedback will directly shape how we continue expanding these GSAP-powered capabilities — always with a focus on performance, scalability, and reusability. We want great web animation to be your competitive advantage, not a technical burden.

“Integrating GSAP directly in Webflow is a revolutionary leap that feels like a cheat code: the GSAP ecosystem is just one click away, in a delightful visual and code-free interface. I can prototype next-level animations in minutes, preview everything live in the viewport — no republishing needed — and spin up reusable interactions that power hundreds of pages in an instant. It’s a massive productivity and creativity boost that has reshaped our entire workflow.”

‍— Thomas Bosc, Lead Webflow Developer at Lattice

What’s next

This launch lays the foundation for the next generation of Webflow Interactions, which will unlock visual-first animation superpowers for all — whether you’re a designer, marketer, developer, or agency. By the end of July, it will be available to all users, and in the coming months, we’ll continue to expand on Interactions with more GSAP features and strengthen integrations with both Webflow’s Website Experience Platform and third party design tools. This includes:

• Inclusive motion design: Support accessibility and honor your site visitors’ motion preferences —like “reduced motion”— from directly within the Interactions panel.
• Ability to enable/disable interactions based on different design contexts — such as specific breakpoints.
• Deeper interoperability with Webflow’s scalable design systems, such as the ability to set individual component instances as animation triggers or targets, set a variable value on an interaction, Shared Libraries support, and more.
• Compatibility with advanced collaboration workflows like page branching and site activity logs. 
• Integration with popular third-party design tools like Spline, Lottie, and Rive. 
• Support for additional in-demand GSAP tools like ScrambleText, Text, ScrollSmoother, ScrollTo — with much more to come.

Webflow and GSAP have joined forces to revolutionize web animation, empowering everyone with the tools to bring their most creative visions to life. Today’s launch is just the beginning, and we have many more exciting updates planned for Webflow Interactions in the coming months. Stay tuned!

Get started today

Webflow Interactions with GSAP has begun rolling out to Webflow users today and will be available to all users by the end of July at no additional cost from Starter through Enterprise plans. If you have access, you’ll see a Versions dropdown at the bottom of your Interactions panel and have the ability to select Interactions with GSAP (new). To learn how to get started animating with this new version of Interactions, visit our Help Center.

As websites grow more essential to business success, the pressure to understand what’s working (and what’s not) has grown too. But getting those insights still proves to be difficult.

Most analytics tools live outside the creative workflow, in separate dashboards (and sometimes separate teams), built for postmortems, not real-time decisions. The result? Teams miss key windows of opportunity for adjustments or worse — they miss optimization opportunities entirely.

With the launch of visual analytics, now available in Webflow Analyze, we’re changing that.

What are visual analytics?

Visual analytics bring behavioral data to life, by layering it directly onto your site. Instead of digging through dashboards or interpreting abstract metrics, you get a clear, visual understanding of how people interact with your pages.

At its core, visual analytics are a way to see user behavior in context. Clickmaps show you exactly where visitors are clicking, revealing what’s attracting attention, what’s being ignored, and if visitors are taking the actions you intended. Scrollmaps, on the other hand, indicate how far down the page visitors are scrolling. They help answer questions like: Is important content visible? Are visitors dropping off before reaching a critical call to action?

Together, these tools offer an intuitive, real-time look at performance directly in the Webflow canvas. It’s analytics that speaks the same visual language as your design.

Your site, from their perspective

Visual analytics are now live in Webflow Analyze. They include:

• Clickmaps to highlight exactly where visitors are clicking on your site‍
• Scrollmaps to understand how far visitors scroll down a page before leaving

From guesswork to growth

For years, Webflow has helped teams visually build and launch sites with speed and flexibility. Visual analytics expands on that foundation, unlocking performance insights that were out of reach for the teams closest to the actual website work. 

Teams can now see key behavior data — like where people are clicking or how far they’re scrolling — in the context of their design, right on the page. There’s no tagging or setup required, just direct visual feedback that helps answer questions like:

• Are visitors reaching the content we expect?
• Are certain elements being ignored?
• Where are visitors dropping off?
• Is a certain button placement getting more clicks than another?
• What are points of friction we can address?

Example: After launching a new mid-page feature section, a team noticed 70% of visitors dropped off just before reaching it. With scrollmaps, they identified and fixed the issue by repositioning the content for better visibility.

The result is less guesswork and fewer delays, plus a tighter connection between what you’re building, how it’s performing, and how it’s meeting (or not meeting) your audiences’ needs.

Made for teams who ship fast

We built visual analytics for designers, content editors, and marketers who care about performance but may lack a dedicated analytics function or easy access to the data they need. It empowers these teams to move fast and measure performance at a granular level — understanding engagement with individual components, navigation elements, and content blocks — so they can make real-time, data-backed decisions.

With visual analytics there is:

• No learning curve: Insights are embedded in the canvas and mapped to real elements.
• No setup required: It works out of the box without tagging or scripting.
• No invasive tracking: Privacy-conscious by design, with no session replay. 

It’s analytics built to match your speed, work with your tools, and align with your goals.

Launch, learn, ideate, iterate.

For many teams, shipping a site is just the beginning. The real work is what comes next — understanding how the site is performing and optimizing for the outcomes that matter.

Visual analytics make optimization a continuous part of your workflow. Track how a new layout performs, test different button placements, or fix a friction point as soon as it appears.

It’s a faster feedback loop with fewer blockers. No more waiting for reports, translating data across teams or context switching from different tools. Just actionable insight, in context, as part of your design process.

And because it surfaces behavior visually, like where visitors are clicking, pausing, or dropping off, it sparks instant ideas for what to try next, helping teams see their site from a visitor’s perspective. Let’s explore how this situation played out on our own site, where visual analytics uncovered a friction point and unlocked a substantial lift in conversions:

How visual analytics drove a 10% lift in signups on our pricing page

Insight

Using visual analytics on our own site, our Growth team discovered that visitors weren’t engaging with our plan CTAs as expected. After digging in, they noticed that a long header was pushing CTAs too far down the page, placing them below the fold for most visitors.

Change

They shortened the header copy to reduce the vertical space and pull the CTAs higher up on the page.

Result

This quick adjustment led to a 10% lift in signups — no A/B testing or complex analysis. Just a fast, impactful change driven by clear visual behavior data. 

The future of data is visual

Visual analytics from Webflow is the first step in reimagining how data insight fits into the creative process. It’s analytics that speak your language, built into the environment where you already work. 

And we’re just getting started. Watch this space for more news — including deeper insights (right on the canvas) into how visitors are interacting with your site, and AI-powered recommendations to help you identify what to improve next.

Sites with the Analyze add-on can now access clickmaps and scrollmaps. If you’re new to Analyze, you can get started or learn more here.

To build on this momentum, we launched the Webflow x GSAP Community Challenge, which encouraged designers to build with GSAP, take creative liberties, and push the limits of what the tool can do for them. 

Over four weeks, we gave designers four prompts to challenge their skills and push the boundaries of animation. Let’s take a look at some of the standout creative on display from our winners and finalists.

Prompt 1: Breaking typography boundaries

The first prompt challenged designers to create a creative animation that breaks apart or reveals text — think typewriter effects or scrambled poetry. 

Thomas Carré, a freelance creative developer specializing in frontend interactions and animations, won this prompt and brought humor to his creation, Hover Killer. It’s a play on the death of hover effects, where users enter text that they “kill” by hovering over it, complete with sound effects. 

When approaching the challenge, Thomas focused on GSAP’s SplitText feature in a new creative direction. To make this come to life, he built the full structure and styling in Webflow over the course of a single day, and added a loader to guide users through the experience. 

The loader experience was especially important to hook users right from the start. Thomas adds: “I’m proud of the little storytelling moment that helps keep people engaged right from the start. It sets the tone, builds some anticipation, and then I just went all in with the endless private jokes.”

Here’s a look into how he created Hover Killer:

A few other submissions worth checking out came from Isaac Farrow with Black Terminal and Kabarza with Nothing Is Original!

Prompt 2: Playing with interactivity and dragging

For the second prompt, we asked designers to create an experience that involves flicking, spinning, snapping, or dragging something across the screen. Ilja van Eck, the co-founder of design platform Osmo and a freelance designer and Webflow developer, won the prompt by combining the Draggable and Inertia plugins with their engaging cannonball game, Osmo Alt Text Minigame.

In the game, the user’s objective is to match the alt texts to empty image boxes, but there’s a twist — they have to use a cannonball launcher to fire alt text into boxes, revealing the corresponding images. The game shows how designers can creatively use technology to get people to care about important topics, like web accessibility. This submission won for its technical competency and the idea itself. Triggering actions when elements intersect requires clever logic. 

Honorable mentions for this prompt to view are from Filip Zrnzevic with Audio Visualizer Experiment and Dennis Snellenberg with 404 Error Minigame

Prompt 3: Transforming visuals into something new

The third challenge required designers to morph shapes or bring line drawings to life using DrawSVG and MorphSVG. Youness Benammou, a freelance Webflow developer, and his 16-year-old daughter Ambreen worked together on their project to reimagine a typical memory/match game with his Mini Memory Game. In the game, users must match cards of custom objects (like a four-leaf clover), animated with MorphSVG. Users can flip cards to reveal and match them.

“This win feels especially meaningful because I worked on the project with my 16yo daughter, who’s aspiring to become a web designer,” says Youness. “Sharing this moment with her makes it truly special.”

This project uses smooth morphing which requires careful asset preparation. The morph from the Webflow logo to the GSAP flair shapes flow smoothly. 

More submissions for this prompt came from Maria Karava with The core and Dennis Snellenberg with Logo Quiz

Prompt 4: Building momentum with animation

The last prompt encouraged designers to animate using velocity, acceleration, and friction. We really wanted them to go beyond the traditional exploding confetti!  

Dave Post, a DevOps director at creative and digital agency Junction, built a fun, interactive Pong-style CTRL ALT DELETE game. To save time, he leveraged Cursor’s Agent mode and built a simple playable prototype within a few hours. Then he created interactions with GSAP’s Physics2D plugin, reworked the color-shifting grids, calibrated hand tracking, and made the gameplay feel responsive and crisp with acceleration curves. 

Dave is most proud of the dynamic pixel-grid animation and the hand-tracking paddle control. These two features, one visual and one experimental, represent what excites him most about web animation: marrying bold design with novel interactivity to create a memorable and fun experience. 

This is especially true for the dynamic pixel-grade animation, which gives the game its personality. He adds, “Every time the ball makes contact or a bonus is triggered, the grid ‘detonates’ in a burst of colour and motion. Because those reactions are driven by live game events, the screen never looks the same twice, and the feedback makes each rally feel more dramatic.”

When asked about the hand-tracking paddle control, he admits it took the longest time to get right. “Turning a webcam feed into precise, low-latency paddle movement, complete with a quick-start calibration step, lets players ditch the keyboard and control the game with subtle wrist motions. It’s an unusual interaction for a browser-based Pong clone, and pulling it off in such a short timeframe felt like a real win.”

You can see an example of CTRL ALT DELETE here

More honorable mention submissions for this prompt came from Filip Zrnzevic with 8-Bit Snake Exploding Game and James Vreeken with PageInvader

Continuing to explore creative GSAP projects

Beyond individual winners, this challenge showcased our community’s incredible depth of talent. From accessibility-focused games to hand-tracking experiments, creators proved that GSAP isn’t just an animation library. It’s a platform for innovation.

This challenge marks just the beginning. Stay tuned for the next GSAP challenge, and in the meantime, see all the submissions and explore GSAP websites by the Webflow community.

Over the years, I’ve learned Swift to build real iOS apps at Airbnb, created Chrome extensions to test new interfaces at Google, and constantly pushed Figma to its limits trying to communicate complex interactions — creating enough prototype spaghetti to feed a small Italian village. 

I believe that while a picture is worth a thousand words, a prototype is worth a thousand meetings. There’s something magical about building and showing how things actually feel, rather than just talking about them.

But traditional prototyping always had limits. Testing complex enterprise scenarios with multiple user roles and system states required enormous setup. Dialing in fine-grained interaction details that bring ideas to life meant weeks of development work. Validating usability across realistic end-to-end flows was time-consuming and often came too late in the process. These constraints meant we often had to imagine how experiences would work rather than actually experiencing them.

Over the past few months, we’ve been experimenting with AI coding tools like Cursor, Augment, and Copilot for prototyping. The results convinced us to build something more systematic: a prototyping platform that transforms how our entire design team works.

What we built (and why)

We created a dedicated prototyping platform that bridges the gap between design ideas and functional prototypes. At its core, it’s a GitHub repository that packages our Spring design system into AI-friendly conventions, complete with educational materials and Webflow Cloud deployment infrastructure. The vision was simple: enable any designer to go from concept to shareable prototype in under an hour.

Rather than using our existing production codebase to start, we built this as a separate repository partly for speed (no complex build processes slowing down experimentation), and partly for AI optimization given the current performance expectations of frontier models. Modern models excel at commonly used web patterns like Next.js, React, and Tailwind, while our custom design system conventions require additional fine tuning.

The prototyping platform itself is deceptively simple but strategically designed:

• Pre-configured foundation: A Next.js app with our Spring design system components, already styled with Tailwind classes that AI understands. No more explaining custom CSS conventions. The AI can immediately use familiar patterns that it has been pre-trained on.
• Smart constraints: Cursor Rules that guide AI toward good design system usage. The AI knows to use our icon library, follows our spacing conventions, and structures layouts according to our patterns.
• Basic app structure: Pre-built navbar, canvas area, left sidebar, and right panels that mirror our product structure for Design and Dashboard experiences. Designers can focus on their specific feature without rebuilding UI chrome from scratch every time. It also allows designers to contribute to improvements to the base structure for others to reuse similar to our design templates.
• Deployment pipeline: Integrated with Webflow Cloud so prototypes can be shared with a URL instantly. No more screen recordings or static screenshots. Stakeholders, colleagues, and research participants can get a real feel for the software by interacting with the actual prototype. We’ve also taken the opportunity to “eat our own ice cream” and give feedback to the engineering team about ways to improve Webflow Cloud deployment workflows.
• Educational materials: Step-by-step setup guides, prompting best practices, and video walkthroughs were published to ramp the team smoothly. We discovered that the setup process is as important as the platform itself. We organized a Build Day to encourage the whole team to onboard and create their ideas. We plan to continue hosting full day sessions with more team members on Design and beyond.

The entire workflow is: Clone repo → Open in Cursor (or other IDE) → Start prompting → Deploy and share.

Real examples from our team

The best way to understand this approach is through the prototypes we’ve actually built. Each one solved a different design challenge and taught us something new about what’s possible when you can build functional experiences instead of describing them.

AI Assistant state management

How do you communicate a complex, multi-surface assistant experience to stakeholders? We built a working prototype with real Anthropic API integration, conversation state management, and contextual entry points. Instead of explaining how an AI Assistant might work across our platform, we could show it and build it faster than creating static screens in Figma.

Interactions timeline behavior

We needed to validate complex animation controls for our new interactions timeline. We built a working version with sophisticated multi-track controls that looked like basic wireframes. This taught us that interaction fidelity can be independent of visual fidelity. We could validate the interaction model without getting distracted by visual details. Those patterns are now shipping in production.

Access control simulation

Testing granular permission states in our CMS seemed impossible to document clearly. One team member built a working simulation that let us experience how complex permission hierarchies would actually feel to users. We discovered UX issues that would have been invisible in written specs—this was functional exploration of complex product concepts, not just interface mockups.

Scrollmaps

How do you validate whether a complex analytics visualization will actually be useful to designers? We needed to test scrollmaps— a visual, page-by-page view of how far visitors scroll with heat-style gradients and dynamic overlays. We built a working prototype that let us experience the actual interaction patterns, test the visual clarity of different gradient approaches, and validate whether the persistent scroll ruler would feel helpful or intrusive. This helped us dial in the interactions and experience of such a visual feature before committing to the full implementation.

Each prototype taught us something new about this approach and gave us some great demos for design crits and org level show-and-tell meetings.

Getting started: What we’ve learned

Start with setup 

The technical setup is crucial but often overlooked. Invest time in creating a smooth onboarding experience because friction can kill adoption. You’ll need to help your team get comfortable with using the terminal and some basic git commands.

Design system integration 

AI needs consistent patterns. Teach it about your design system, add components, typography, and color rules. You will find yourself experimenting and updating the rules and system prompts to get better results with fewer shots. 

Prompting is a skill 

Good prompting requires understanding both the design problem and how AI models processes context. We’ve developed internal best practices and share them through training. For example:

• Avoid: “Build a commenting system,” that’s like ordering ‘coffee’ when you actually want a ‘venti-iced-brown-sugar-oatmilk-shaken-espresso with extra cinnamon.’ 
• Try: “Create a commenting feature with a toggle in the nav bar that switches to comment mode, hides the left toolbar, replaces the right panel with a comments list, and lets users click canvas elements to add threaded comments with timestamps.” Planning the interaction details upfront — state changes, UI behavior, data structure — leads to much better results than iterating through vague requests.

Think interactive-first

The biggest mindset shift is starting with behavior rather than appearance. What should this feel like? How should it respond? Visual polish can come later (nothing wins over a skeptical PM like a prototype that actually responds to their clicks).

Encourage sharing 

We created a dedicated Slack channel where team members share their prototypes, techniques, and learnings. This motivates others to get over the initial setup hurdle, teaches effective prompting strategies, and gets everyone excited about what’s possible. Seeing colleagues build impressive prototypes is the best advertisement for the platform.

The bigger picture

We’re sharing this approach because we believe it represents a fundamental shift in how digital products get built. As AI makes execution easier, ideas become more valuable—but not just any ideas. The Designers and Builders who can rapidly translate user-centered concepts into working prototypes, then validate them with real user interactions, will have an enormous advantage.

This isn’t about replacing traditional design tools either. It’s about adding a new capability to our ever expanding, always evolving, toolkit. Figma remains essential for visual design, design systems, and collaboration. But when we need to validate complex user flows, test how customers will actually experience new features, or communicate sophisticated interactions, our prototyping platform has become indispensable.

The lines between design and development are blurring, and that creates opportunities for designers willing to expand their toolkit. We’re not becoming developers. We’re becoming builders who can combine design thinking with technical capability while maintaining our focus on user needs to create better products for the people who use them.

What’s next

We’re continuing to evolve the platform based on team feedback and exploring ways to share our learnings with the broader design community. We’re also investigating how to better connect our prototyping platform with production development, creating stronger pathways from validated prototype to shipped feature leveraging our product design system. The future of design is interactive, collaborative, and built on the foundation of rapid experimentation. 

The question isn’t whether AI will change how we design — it’s whether we’ll embrace that change to amplify our creative capabilities or watch the world move forward without us. At Webflow, we’re choosing to build the future. What about you?

‍

My ultimate goal is to hand off high-quality leads in our ideal customer profile (ICP) to Sales. To do this, I spend a lot of time understanding the needs and pain points of buyers at our target accounts so we can develop content and messaging that resonates with them. If we’re successful, these things work together to bring the right buyers to our website. 

But the work doesn’t stop when a buyer arrives on our website. Personalization is the strategy I use to make sure the journey continues once they’re there. 

Website personalization gives you more control — and influence — over the buyer experience

For enterprise marketers who are used to waiting weeks for site changes, personalization with Webflow Optimize is a dream come true. It lets you have more control over the experience specific buyers have — even when they’re unknown to you. It’s also a scalable way to tune a single page to multiple segments. 

If you’re not used to this agility, figuring out where to start can be daunting. At Iron Horse, the question we hear most from our enterprise clients is, “How can I make sure we’re using personalization effectively?”

In this article, I’ll walk you through a 3-step framework for incorporating personalization in a meaningful and impactful way. Then I’ll show you a concrete example of how it works.

A framework for creating a high-impact personalization strategy

The easiest way to get started with website personalization is to look for opportunities in your existing buyer’s journey and campaigns.

1. Identify campaign gaps and journey drop-offs 

Look at your current marketing efforts and find the places where you’re not seeing the results you expect. This could be:

• Low conversion rates on high-traffic landing pages. This usually means the initial pieces of your campaign are working, but something on the landing page isn’t connecting with your audience. In this scenario, it’s important to A/B test messaging, CTA placement, and other aspects of the page structure, but it’s also a prime opportunity to create a more tailored experience for different audience segments.
• High bounce rates from specific traffic sources. Social media’s driving a lot of traffic, but the LinkedIn audience isn’t converting as well as your email audience. Activating those folks can have a big impact on your bottom line.
• Drop-offs at specific points in your buyer journey. Is there a clear point in your funnel where your audience disconnects? Turning a one-size-fits-all experience into something more targeted may make the difference.
• Content that gets consumed but doesn’t drive next steps. Making it easy for buyers to find and take the next action after consuming a piece of content can really make a difference in how fast they move down the funnel. 
  2. Ask whether personalization can help

Webflow’s integrations mean you can think creatively about audience segmentation. For example, you might segment visitors based on intent from your ABM platform, previous engagement from your adtech platform, traffic source, or a specific UTM. 

For each opportunity you’ve identified, ask yourself:

• Could segmenting visitors and serving different experiences help improve this metric? 
• What visitor segments could benefit from a different experience here?
• Do I have the data in my martech stack to identify and target these segments?

If you can’t answer these questions with confidence, the opportunity might not be right for personalization.

3. Prioritize based on impact and effort

Now that you’re armed with a list of areas where personalization could help, evaluate the ideas in these three areas:  

• Impact: Will this directly move the needle on your campaign or company goals? 
• Reach: Will this personalization be seen by a significant portion of your target audience?
• Effort: Do you have the data in your martech stack to identify and target the audience segments that will benefit most? How much work will this require from your team and other departments?

The best personalization projects are high-impact, high-reach, and relatively low-effort. After you’ve identified where you want to start, it’s time to get to work. 

Putting the personalization framework into practice

Here is an example of how to use this framework to address a common challenge and  increase pipeline velocity. 

The challenge: High-value deals going silent

There’s nothing more frustrating than a promising high-value deal that starts with momentum but suddenly hits a wall. When decision makers stop responding to emails and calls, those opportunities can languish in your CRM for weeks or months. These stalled opportunities represent significant untapped revenue potential.

Passive nurture sequences often fall short in these situations. Generic follow-up emails lack the relevance and urgency needed to break through the silence and re-engage dormant prospects.

The solution: Leverage anonymous website activity

Silence doesn’t mean disinterest. Even when prospects stop responding directly, they often continue researching your solution behind the scenes. They visit your site, browse your resources, and continue to evaluate your offerings — they’re just staying anonymous while they do it.

This presents a unique opportunity to re-engage at exactly the right moment when they’re actively consuming your content. By leveraging CRM data in Webflow Optimize, you can create targeted interventions that feel timely and relevant rather than pushy or generic.

How to implement it

Here’s how to identify and reactivate these stalled opportunities:

Step 1: Create the segment. Start by creating a segment within Webflow Optimize of the stalled opportunities in your CRM that have been open for 30 days. (Or whatever length of time works for you.) Then layer in return visitors from these accounts.

Step 2: Create the experiment. Decide what experience you will use to target these visitors and set it up using the page editor. When we did this on our own site, we chose to edit our Hello Bar, but a modal or banner could work as well. You can see the copy we used in the image below. The key is to come up with something that feels right for the user — without being creepy. 

‍Step 3: Run the experiment. Give it enough time to see trends. KPIs to look for include a lift in the reactivation rate for stalled opportunities and an increase in account velocity to the next stage. Based on what you see, consider these optimizations:

• Try out different copy, button text or colors.
• Use a different personalization experience. If the Hello Bar didn’t produce the results you wanted, a modal or banner still might. 
• Experiment with a different CTA. If they’re still not ready to talk to Sales, maybe surfacing a sales enablement asset like a case study, ROI calculator or buying guide, or pointing them to an FAQ,  would encourage forward movement.

The results

This strategy delivered measurable impact in two critical areas. First, we saw significant reactivation for opportunities that had been dormant for months, bringing them back into active sales conversations. Second, we accelerated the movement of existing opportunities through our pipeline stages, reducing overall sales cycle time.

This worked because we were treating website personalization not just as a tool for generating clicks, but as a strategic method for reigniting genuine sales momentum. By timing our outreach to coincide with demonstrated interest, we were able to restart conversations that might otherwise have been lost forever.

The bottom line

As you get more comfortable with personalization, you’ll begin to incorporate it more into your campaign planning, the same way you think about ads, nurtures, and other tactics. The goal isn’t to personalize everything; it’s to personalize the right things in service of the real business outcomes that matter most to you. When you take that approach, personalization becomes a strategic advantage.

If you’re ready to do more with personalization, check out the B2B Website Personalization Playbook for 9 more proven plays for improving marketing ROI and driving sales.

In the recent Webflow webinar Architecting for AI: Strategies to drive AEO, conversion, and impact, industry experts Steven Male (Head of Growth Marketing, AirOps), Sarah Mendham (Technical Lead, Beyond), and Dan Locke (Head of Digital, IMB Bank) shared practical strategies for adapting to this new reality. Their insights reveal how businesses can balance AI automation with human expertise to create content that performs well in both traditional search and emerging answer engines.

The stakes are high: research from Semrush shows that visitors from large language models (LLMs) are worth 4.4 times more on average than traditional organic search traffic. This dramatic shift in user behavior demands new approaches to content creation, structure, and optimization.

Optimize for answer engines

AI-powered search prioritizes up-to-date, deeply valuable, well-structured content.

Steven Male, Head of Growth Marketing at AirOps, believes that while the tactics for SEO and answer engine optimization (AEO) will eventually merge, the quickly growing traffic from LLMs represents a huge new opportunity for brands. He recommends grounding AEO efforts in five pillars — freshness, structure, authority, snippet extractability, and brand alignment — to deliver value to both users and LLMs.

Data in a recent AEO report by AirOps shows that sites with content updated every 90 days receive 4.8 times more citations than those that update less frequently, while pages with visible last-updated schema get 1.8 times more citations than those without.

To optimize for answer engines, regularly update pages, include visible timestamps and schema recency signals, and ensure concise formatting for snippet extractability. Also:

• Schedule quarterly content audits to refresh existing pages.
• Add visible “last updated” timestamps to all content pages.
• Implement schema markup for articles, FAQs, and dates.
• Structure content with clear H-tags and concise paragraphs.
• Create easily extractable snippets using lists and Q&A formats.
• Focus on brand alignment and author personas with proper schema.

The shift from keyword-based searches to conversational queries — averaging 23 words on LLMs versus 4 words on Google — means your content structure and unique insights matter more than ever. Pages need to answer specific, contextual questions while maintaining the clarity and organization that makes information easy for both humans and bots to extract.

Automate accessibility improvements

AI tools can also be used to ensure that the websites you’re building are accessible. 

Sarah Mendham, Technical Lead at Beyond, highlighted how AI tools excel at accessibility tasks that have always been important, but are often neglected due to resource constraints. 

“A lot of the things that are important for AEO have always been important for creating an accessible website, like the semantic structure of the page,” she explained. 

Sarah’s team uses AI to retrofit legacy pages where the structure of the site may be off, or where heading levels are based on styling rather than semantic structure. AI-generated alt text and automated bulk uploads can transform legacy content into structured pages. This saves manual effort while maintaining quality.

Key accessibility automation opportunities include:

• Batch-processing images to add descriptive alt text
• Restructuring pages to follow proper heading hierarchies
• Converting styling-based layouts to semantic HTML
• Validating content structure before client handoffs
• Testing templates with bulk AI-generated content
• Ensuring consistent accessibility standards across large sites

Sarah also emphasized using AI for bulk content uploads during testing phases. This approach helps teams validate that templates work correctly across all content scenarios before going live, which prevents the accessibility issues that often arise when clients add their own content later.

Accelerate migrations and accessibility improvements with MCP

Sarah also breaks down how Model Context Protocol (MCP) servers enable AI applications to connect with website services, and can be used to accelerate workflows and migrations. Pre-built options, like Webflow’s MCP, offer immediate value for content-heavy workflows.

“Webflow’s MCP server lets developers securely pull site structure and content into local AI environments (IDEs or tools like Claude Desktop),” Sarah explains.

With your site’s content and structural data readily accessible from the MCP server, you can utilize AI to support in:

• Content migration: Transform unstructured data into organized collections.
• Accessibility updates: Generate alt text for images at scale.
• SEO optimization: Restructure content for better search visibility.
• Quality assurance: Identify broken links or missing metadata across pages.

The MCP setup process is straightforward:

1. Authenticate your connection. Add an API key to your local mcp.json file to allow connections to your website.
2. Pull your site structure. Download your current content organization.
3. Apply AI transformations. Let AI analyze and restructure your content.
4. Review and deploy. Check AI suggestions before pushing changes live.

“MCP is how AI tools communicate with services, whether that’s querying an internal database or using APIs,” Sarah explained. 

This means you can connect multiple services — your CMS, analytics platform, and customer database — through a single MCP implementation.

For teams managing legacy websites, pre-built MCP servers offer a path to modernization without complete rebuilds. You can gradually improve content structure, enhance accessibility, and optimize for AI-driven search while maintaining your existing design and functionality.

Build strategic AI frameworks

Develop a framework that maps AI use cases — such as call-transcript analysis or social listening — to business objectives. This clarifies governance requirements and ensures focused investment.

Dan Locke, Head of Digital at IMB Bank, discusses how regulated industries can successfully adopt AI by linking every initiative to strategic outcomes. His team partnered with a local university to conduct multi-year research, combining academic rigor with practical application. 

“We built a framework that […] said, there are significant benefits if we can unlock […] what people are saying through calls, through chats, through searches, through customer feedback,” he shared.

Essential framework components:

• Map AI use cases directly to business strategy.
• Assess data sensitivity for each application.
• Start with low-risk applications like content creation.
• Build stakeholder confidence through education.

Dan’s team discovered that AI-powered listening, including call and chat transcript analysis, could surface insights within hours that previously took weeks of research through manual sampling. By establishing clear governance early, they were able to move quickly on low-risk initiatives while maintaining compliance and a safe path to including sensitive customer data applications.

Transform your workflows with Webflow

The convergence of AI-driven content creation, AEO, and accessibility automation represents a fundamental shift in how we build for the web. Success requires balancing AI efficiency with human creativity, maintaining content freshness while ensuring accessibility, and building governance frameworks that enable, rather than restrict, innovation.

These strategies work best when implemented on a platform designed for rapid iteration and optimization. Webflow’s visual development platform empowers teams to quickly update content structures, implement schema markup, and maintain the accessibility standards that both users and AI systems demand.

As search behavior continues to evolve and AI becomes more integrated into content workflows, the businesses that thrive will be those that adapt their strategies now. The insights shared by Steven, Sarah, and Dan provide a roadmap for that transformation.

Watch the full webinar to discover more practical tips for optimizing your content workflows and preparing for the future of search.

Webflow’s Continuous Integration (CI) system is critical for our monorepo’s development process. As part of that process, we execute an extensive suite of unit and browser-based tests by dynamically sharding the suite across Buildkite jobs and horizontally scaling as needed to meet compute demand. Running tens of thousands of builds a month with Engineering continuing to grow at Webflow has meant that our pre-existing cost savings measures have been outgrown. For example, we utilize the Nx build system to optimize test execution in our monorepo, but our complex dependency graph limits its effectiveness. Additionally, our smoke testing suite is in its infancy, so we still run all of our 88000 (and counting) tests for every pull request test branch in our merge queue, which merges thousands of PRs a month.

As a result, the Delivery Loop team’s CI costs are substantial, ranking third in overall spend within engineering. This high cost is primarily driven by the volume of EC2 instances required to execute our test suite while keeping the feedback loop short for engineers. A full monorepo Buildkite pipeline execution (a.k.a. build), which includes building our code for testing and then running the tests, can take over 30 machine-hours. We utilize over 9000 vCPUs and 36000 GiB of memory at peak.

How can we significantly reduce our CI costs without sacrificing system reliability or runtime, and without introducing any manual work for engineers? We undertook a targeted optimization effort, focusing on key areas like EC2 instances, AWS Config settings, and EBS volume sizes. According to Cost Explorer, these areas were our account’s top three sources of spend. Our efforts achieved a 33% reduction in amortized monthly CI costs while maintaining performance and reliability.

Leveraging Spot Instances

We significantly reduced our CI costs by transitioning most of our workloads to EC2 spot instances. While we had an active EC2 Instance Savings Plan, it locked us into a specific instance family which discouraged experimentation with other kinds of instances. Furthermore, the savings plan’s coverage was not sufficient for typical weekday compute needs and wasteful on the weekend when there was little compute needed. Spot instances offer flexibility and substantial cost savings, up to 60% compared to on-demand instances, which directly addresses our team’s number one cost driver: EC2 spend. The majority of our compute workload consists of testing jobs, so we gradually moved them over while leaving critical jobs, such as our target determinator job, alone. This move required addressing the inherent risk of spot instances being interrupted — we observed a 13% spot interruption rate for the month of April. We handled the risk in two key ways: building resilience into the system and carefully managing the rollout.

Designing for interruptions

To ensure our CI pipeline remained stable despite potential spot instance interruptions, we implemented robust retry mechanisms and test checkpointing. Our approach here mirrors successful strategies used by other companies.

• Use Buildkite’s automatic job retries. This feature allows us to specify that jobs interrupted by a spot instance being reclaimed should automatically restart, preventing manual intervention by engineers at Webflow. Since interruptions can occur at any point in time and a job could unluckily be interrupted multiple times, we specified a limit of 5 retries.
• Add test checkpointing. This more complex solution allows us to save progress on test runs. If a spot instance is interrupted, we can resume testing from the last saved point rather than restarting the entire file. We leveraged a Redis instance in our CI cluster’s VPC as a fast, temporary datastore for this checkpointing information. This choice was driven by the large volume of tests, high daily build count, and the temporary nature of the data. One challenge we faced here was having to implement checkpointing four different times for the four test runners we use within our monorepo.

A gradual, monitored rollout

Finally, to avoid disruptions to our engineers during this transition, we carefully managed the rollout of spot instances.

• We selected the price-capacity-optimized allocation strategy for Spot instances. This strategy results in fewer spot interruptions than a price-optimized strategy at an increased cost. While test checkpointing reduces the time cost of a spot interruption, there is still fixed overhead from our agents needing to clone branches, fetch missing Docker images or node_modules directories from our cache, and start up services. Initially, we did not specify enough instance types for the strategy, so we ran into capacity constraints because EC2 could not provide enough spot instances. We saw CI performance regressions until we manually fell back to on-demand instances. To resolve the problem by giving the allocation strategy more options to work with, we used the Instance Advisor to add similar instance types with the same vCPU count and a low interruption rate. In some cases that included network-optimized, disk-optimized, or memory-optimized instance types.

• We ran initial experiments in a staging version of our CI environment. We started with interrupting individual instances across multiple job types, then moved on to running aggressive interruption experiments using AWS Fault Injection Service (FIS). These tests allowed us to identify and address issues with our automatic retry configuration and dynamic pipeline generation code without affecting production builds.
• For changes requiring production-level load testing, we implemented a lightweight feature flagging system. This system enabled us to control the use of spot instances without requiring code changes to be merged into PR branches. Using FIS did not accurately represent the real-world spot interruption rates we would see by allowing autoscaling for our spot instance queues up to their maximum instance counts. If we saw an unhealthy amount of interruptions, we could retreat to our on-demand queues which were still in place.
• We then followed a gradual rollout strategy, starting with draft pull requests, then expanding to all pull requests, and finally enabling them for the merge queue. This phased approach minimized the risk of disruptions and gave us time to monitor the system via CloudWatch and Buildkite advanced queue metrics. We adjusted the system and built up teamwide knowledge along the way:
  1. We wanted to cap the amount of increased spending resulting from doubling the amount of queues and ASGs. Across each phase of the rollout, we gradually adjusted max instance counts by decreasing the max for our on-demand auto-scaling groups (ASGs) and increasing the max for our spot instance ASGs. In other words, we were temporarily overprovisioning the system, so we reduced where the overprovisioning was as compute needs shifted to spot instance queues.
  2. Prior to and during the spot instance rollout to draft PRs, we created a new dashboard, added automated alarms for spot interruption rates and long Buildkite job queue times, and wrote on-call runbooks to manage the system. We needed whoever was on-call to be able to handle spot capacity constraints, which was addressable by either adjusting the percentage distribution of the ASG between spot and on-demand or adding base on-demand capacity. We typically chose the latter option and found it to work well in practice for our situation. We eventually stopped seeing capacity constraints by adding more instance types to the mix as described above.
  3. After rolling out to all PRs and due to the spot interruption rates we observed, we made the decision to implement test checkpointing starting at the file-level with Buildkite metadata as the checkpointing data store. We deemed the metrics acceptable enough to not roll back to draft PRs only. Following that implementation, we saw improvements in our metrics, enabling the smooth rollout of spot instances to the merge queue. We then followed up with suite-level or test-level checkpointing depending on the runner and moved to Redis to store test results to handle the increase in volume of data.

This methodical approach to adopting spot instances and handling spot interruptions allowed us to capture significant cost savings without compromising the stability and reliability of our critical CI pipeline.

Exempting AWS Config resource types

To further reduce costs, we optimized our AWS Config settings, which were generating unnecessary overhead due to our high volume of short-lived EC2 instances. AWS Config tracks changes to AWS resources, which is crucial for security and compliance. However, for our CI pipeline, we create thousands of temporary EC2 instances each day, leading to a massive amount of tracking data and associated costs. With the increase in instance count due to our rollout of spot instances, we also saw increases in Config costs. We needed a way to filter what was being recorded, without creating a security hole. Thankfully, these adjustments were relatively straightforward.

We addressed this issue by selectively exempting certain EC2 resource types from AWS Config recording.

Certain resource types such as EC2 volumes were not critical for our security monitoring, so we created fine-grained exceptions to exclude them. We added exceptions, checked the Cost Explorer after a day, and made additional tweaks to the settings until we saw significant cost reductions here. To counteract some cost-associated compliance rules not being able to function without these data being recorded, we’ve chosen to periodically check the Cost Optimization Hub.

As a result, we eliminated unnecessary costs without compromising our overall security posture.

Shrinking our EBS volumes

We significantly reduced our CI costs by right-sizing our EBS volumes, which were previously over-provisioned. This was a surprisingly large area of potential savings, as many of our EC2 instances had unnecessarily large attached volumes. By analyzing our usage patterns and metrics via post-job logging, we identified opportunities to reduce volume sizes without affecting performance.

For our EC2 instances with local storage, we optimized the volume size to match the size of our base AMI, plus a small buffer.

• We played it safe here and chose the minimum EBS volume size and then added some extra space “just in case.”
• We also ran into inode exhaustion issues with the default ext4 filesystem due to the large number of small files that is typical of `node_modules` directories. To resolve this, we switched to the XFS filesystem for our SSDs, as it is better at handling a high number of inodes and generally has better performance for our workloads.

For our other EC2 instances, we conducted a detailed analysis and discovered that the attached disks were significantly over-provisioned.

• Metrics showed that many volumes could be reduced by roughly half. We took a cautious approach and cut back on all volumes, while making sure to monitor usage afterwards.
• We also optimized our extensive `node_modules` caching system, improving its handling of disk exhaustion. This optimization involved refining our cleanup policies to ensure we efficiently managed space by iteratively cleaning out old cache entries and removing old Docker volumes whose cleanup was previously not needed.

By addressing these issues, we significantly reduced EBS volume costs while maintaining our overall system performance.

What’s next?

Our CI cost optimization journey doesn’t stop here. We’ve identified several exciting areas for continued improvement and potential for even greater efficiency gains.

Graviton Adoption: We evaluated AWS Graviton instances and observed promising cost-performance benefits. However, we encountered some incompatibility issues with parts of our CI stack and had to wrap up the project before we were able to fix them all. We plan to revisit Graviton instances later in the year. We’re confident this will unlock further cost reductions without sacrificing performance.

S3 Lifecycle Management: We have S3 buckets storing data that have grown nonstop. Simply deleting all old data is not feasible due to how we handle site assets and snapshots since there’s no common prefix we can use to apply lifecycle rules. We should be able to enhance our asset and snapshot copying scripts to use S3 Object Lock in governance mode on these objects then turn on lifecycle rules, which would enable us to save tens of thousands of dollars per year.

By tackling these next steps, we aim to further refine our CI infrastructure, driving down costs and optimizing our resources.

Conclusion

As a direct result of these optimization efforts, we’ve achieved a significant 33% reduction in amortized monthly CI costs when comparing end-of-Q4 spend last year to end-of-Q1 spend this year. To break the reduction down a bit further, we saw a 42.7% reduction in EC2 instance spend, an 89.6% reduction in Config spend, and a 42.4% reduction in EC2 other spend. We’re already seeing these savings reflected in our budgets and expect that reduction to grow even further in Q2 as the full impact of our more recent changes takes hold.

But these numbers represent more than just cost savings. For Webflow’s engineers, this means a faster, more reliable CI pipeline as my team reinvests our savings into enhancements elsewhere. It means less time waiting for builds and tests to complete as we can horizontally scale further than before, and more time spent building features and solving complex problems. With these optimizations in place, we’ve laid a foundation for future growth and innovation without being hindered by excessive CI costs. The positive impact of these changes will ripple through our daily workflows, enabling us to deliver higher-quality software more efficiently. We’re excited about the momentum we’ve gained and the potential it unlocks for our team and our users.

According to Lucidpress, consistent brand presentation can increase revenue by up to 23%. However, in practice, ensuring brand consistency can be challenging. As organizations scale, they create multiple web properties: custom landing pages, blogs, and microsites. Each introduces new opportunities for inconsistency without proper guardrails. Over time, these inconsistencies create compounding costs that hurt brand trust, ultimately hurting customer conversion and retention and slowing down the pace of execution. 

Companies can overcome this challenge by investing in design systems. These systems help enforce a consistent brand experience across all touchpoints while improving cross-functional collaboration, resulting in faster time to market without compromising brand integrity. 

In this blog post, we’ll explore the hidden costs of brand inconsistencies and how investing in a design system can prevent them.

Design systems: Building the foundation for a scalable, consistent brand

A design system helps organizations conceptualize, create, and iterate on web experiences and collaborate cross-functionally. It’s the single source of truth about how the brand manifests in the digital experience. By creating a design system, brands can: 

• Create a consistent brand experience: Design systems automatically ensure that any design decision across a property is consistent with brand guidelines, whether typography or font size. 
• Increase execution speed: Instead of building new pages from scratch, teams can use reusable components, accelerating the time to market. Additionally, if teams update guidelines or need to make any changes, developers can easily change one part of the codebase to replicate it across others. ‍
• Improve cross-functional collaboration: With a shared source of truth, developers, marketers, and designers have a shared language and understanding of the brand guidelines, which can help them work more effectively together.

The compounding costs of foregoing investment in design systems

Despite the advantages, brands often delay investing in design systems because of the significant time investment. Teams must audit their existing digital experience for inconsistencies, align on the solution, implement the new design system across all their digital properties, document everything, and train team members on the new system. This is a significant undertaking, but without these systems, brands risk creating an inconsistent brand experience across their websites. Over time, these inconsistencies can impact business outcomes and team performance in several ways: 

1. Reduce conversion and retention

If your website doesn’t follow consistent brand guidelines (like conflicting UX behavior or mismatched fonts), it will confuse and frustrate your customers, resulting in lower conversions and poor customer retention. Here are a few different ways this can play out: 

• Increase abandoned visits: Customers might get confused about your brand and leave your site. For example, if a customer visits your product page but the style or brand treatment on the page doesn’t match the rest of your website, it can be a disorienting experience, leaving them confused and even prompting them to exit the page altogether. 
• Reduce conversion: Inconsistent user interfaces create friction in conversion funnels, reducing completion rates. For example, when Brad Frost created United Airlines’ design system, he streamlined three different date pickers across the homepage, booking page, and logged-in experience into one. This reduced friction by simplifying how users entered dates into the website, reducing cognitive overload, and improving the overall user experience. 
• Reduce brand recall: When customers encounter inconsistent brand experiences, they struggle to recognize your identity across touchpoints, which hurts brand recall and loyalty. Think of how confusing it would be if Starbucks used its familiar green logo in stores and on coffee cups but different colors and fonts in its app (like bright orange Comic Sans font). Customers would struggle to connect these as the same brand, hurting Starbucks’s brand recognition.  

2. Erode brand trust and credibility 

Brand inconsistencies can impact how customers perceive your company. At best, they make you look careless. At worst, they can make you look unprofessional, eroding trust and loyalty. Over time, this can impact your standing in the market and lead to market share loss. 

For example, if you’re a financial services company, and your navigation bar looks different in one part of the app versus another, users might feel as if the website is “broken,” which might raise other questions about your product’s capabilities. This doubt can make it more likely for users to switch to another service, or not recommend your product to their network. 

3. Create operational inefficiencies

Marketing teams can leverage design systems to ship on-brand campaign assets quickly. Without them, they have to redesign components from scratch, which slows down execution and delays time to market. Redesigning these components also introduces room for human error, resulting in brand inconsistencies that require manual effort to resolve. Over time, these inefficiencies shift teams from a proactive optimization mode to a reactive, firefighting mode. 

This inefficiency also extends to maintaining or updating existing assets. Without a design system, developers must manually update the same component across all marketing assets. A design system makes this process more efficient by automatically propagating updates across all instances of the components. Developers must change one part of the codebase to automatically update the component across all assets, simplifying the project’s scope and effort. Marketing teams can leverage this agility to experiment and optimize their brand’s identity. 

4. Introduce (and deepen) cross-functional collaboration friction 

Without a shared source of truth, cross-functional teams, such as design and development, might make assumptions about how your brand identity translates into actual digital components and experiences. This can introduce friction in the relationship or, if teams already operate in siloes, worsen misalignment. Ultimately, this weakens an organization’s agility to launch bold initiatives that require cross-functional collaboration (like rebrands, new product rollouts, etc.).

Reduce brand inconsistencies with Webflow Shared Libraries

A website platform can make it easy to build and deploy a design system and maintain brand consistency while scaling. Webflow takes this further by enabling true reusability, consistency, and change management through multi-site design systems. 

Webflow Shared Libraries enable brands to easily share, discover, and experiment with components and style guidelines across all their web properties. Whether you’re making minor tweaks or executing a major rebrand, Shared Libraries provide governance and scalable change management flows that empower marketers to build on-brand experiences. Here’s how: 

• Centralize: Share variables (i.e., for color, typography, spacing, etc.), components, and assets across the organization. 
• Safeguard: Leverage roles and permissions to control who can share, install, and manage Shared Libraries.  
• Review: Each designer can review and accept updates to Shared Libraries when ready, rather than rushing to implement changes all at once, ensuring a smooth and stable deployment.‍
• Evolve: As your brand evolves, update your Shared Library just once. After the updates are accepted, Webflow cascades them across all sites — no extra effort required.

• ‍Optimize: Brands can use Webflow Optimize to run experiments on components across all their sites, making it easy to test and optimize a brand’s visual identity. For example, you can use Webflow to test the effectiveness of a particular CTA button sitewide so that you can make data-driven updates to your design system.

Turn brand consistency into your competitive advantage 

Brand inconsistencies can feel like death by a thousand paper cuts — each successive one chips away at your customers’ trust and erodes brand loyalty. But it doesn’t have to be this way. 

By investing in a platform like Webflow, your design system can live in the same place where your website is built. This eliminates the time-consuming back-and-forth handoffs between designers and developers (that become increasingly complex as your digital presence scales) and reduces the risk of brand inconsistencies across your design system. 

Further, with a design system that curtails this handoff process, the process of accessing, managing, and updating components is simpler and centralized. Best of all, this streamlined approach speeds up development cycles, resulting in faster time to market and greater brand consistency at scale. 

Ready to take the leap? Learn more about Shared Libraries and get started with Webflow today to design consistent, on-brand web experiences.