Designing a Scalable Module Library for Abacus

Overview

As a Product Designer at BMO, I contribute to the design and evolution of the Abacus module library, a system of reusable modules used to build public-facing pages in Contentful.

Built on shared foundations and components, the library empowers designers across lines of business to efficiently create consistent, scalable experiences without custom development.

BMO.com shown on a monitor on the left side of the image, and various modules seen on BMO.com on the right side of the image

Problem

As product and marketing needs evolved:

  • Designers needed to build pages quickly across multiple LOBs

  • New requests often led to one-off solutions

  • Existing modules didn’t always support edge cases

  • Designers lacked visibility into how modules behaved in Contentful

Approach

Enablement & Structure

Modules are designed to empower designers, not restrict them.

Each module:

  • Is built using Abacus foundations and components

  • Includes multiple properties and variants

  • Supports responsive behavior across breakpoints

  • Mirrors functionality available in Contentful

This allows designers to:

design once, and confidently translate that into production

Approach

Reuse & Decision-Making

Reuse is the guiding principle.

When new requests are introduced, we evaluate:

  • Can an existing module solve this?

  • Can we extend an existing module instead?

  • Can multiple modules be combined?

We actively push back on one-off solutions. New modules are only introduced when they:

  • Provide value beyond a single use case

  • Are reusable across LOBs

  • Align with system and business needs

Approach

Governance, Documentation & Alignment

The module library evolves intentionally and is supported by strong documentation.

  • All net-new modules are reviewed through our team

  • Modules are refined, consolidated, or expanded before being added

  • Module behavior, variants, and usage are documented in Confluence

  • Designers, developers, and content strategists contribute to documentation

  • Naming conventions align across Figma and Contentful

To support this, I introduced:

Info Cards with Embedded Changelogs

Each module includes:

  • Functionality and variant documentation

  • Change history for transparency

  • Links for testing in Contentful

This ensures teams can:

access, understand, and apply the system independently

System in Practice

The module library includes patterns such as:

  • Hero banners

  • Content banners

  • Card grids

  • Accordions

  • Tables

  • Etc.

Modules are:

  • Responsive across breakpoints

  • Configurable through multiple variants

  • Designed to support a wide range of use cases

They also serve as:

a foundation and source of inspiration for future modules

Impact

Empowered designers to efficiently build pages across multiple LOBs

  • Reduced reliance on one-off solutions and custom development

  • Increased consistency across public-facing experiences

  • Improved alignment between Figma and Contentful

  • Enabled scalable decision-making through a reuse-first approach

  • Strengthened the system through documentation and intentional evolution

Reflection

Designing the module library reinforced that scalability is not just about building more — it’s about building with intention.

By prioritizing reuse, governance, and enablement, I helped create a system that allows teams to move quickly while maintaining consistency and control.

Next

BMO Design System