How BMO Financial builds efficient multi-product design systems

4 min read
Brittany Anas
  •  Sep 1, 2021
Link copied to clipboard

Just about every organization has a design system, but often these sets of standards amount to no more than basic principles like colors, patterns, typography and code snippets. This method works for singular product teams, but as organizations mature and multiple product teams make their own usage decisions, documenting these nuances can be challenging and often adds a layer of rigidity.

To address this common dilemma, BMO Financial’s digital team created a sophisticated multi-product design system, scaling organization to benefit the global company.

In a recent InVision Talk, BMO Financial’s digital brand lead Angela Beal discussed how the company built a design system that powers and connects a growing subsystem network.

BMO teams share an overarching design system, but their design team created sub systems for each major product line. These products include retail (secured banking); the public BMO website; internal; sales; and wealth. If more than one team finds a component useful, design system governance bumps it from the product-level subsystem to the common design system. But a component unique to a team deserves to stay within a subsystem.

“It’s a very simplified way of showing how we decided to house shared versus unique components,” Angela explains.

Strong and clear documentation supports this approach, she explains, so designers know when to use which components.

This design system allows for flexibility, too. Let’s say the public team’s subsystem houses a chatbot component, and other teams want a conversational help center: Rather than each subsystem designing their own chatbot, the governing system can float up the chatbot component to the common design system, maintaining a consistent brand experience.

To learn more about BMO’s design system and more governance best practices, watch the full discussion here.

Collaborate in real time on a digital whiteboard