BDC Design System

Business Development Bank of Canada (BDC)
UX & Product Designer

Business Development Bank of Canada (BDC) didn’t have any design system for its website and client account portal. They were planning to gradually move away from Axure, Sketch and Zeplin toward Figma in order to simplify the prototyping, developer handoff and to maximize the collaboration between the various UX/UI designers, copywriters and developers. The majority of the designers and writers had never work with Figma before, while the developers use Zeplin.

The objectives

  • Implement a design system for the marketing site and client portal in Figma.

  • Establish a course for designers and writers to teach Figma and cover the main differences with Axure and Sketch.

  • Introduce the design system and the best practices to maintain it over time.

  • Design elements inherent to a singular page or project were excluded of the system; the goal being to include only recurrent elements.

  • Usability, accessibility and ergonomic refinement were not part of this initial release of the design system. While we knew some improvements were needed, we took notes of them and the goal was to discuss it together.

The process

  • To kick-start this project, I began with the brand guidelines and created the color styles and text styles in Figma.

Design System - Color and Text Styles in Figma
From the BDC style guide, colors and text styles are created as color and text styles in Figma.
  • Applying the methodology of the Atomic Design System↗︎ (atoms, molecules, organisms, templates, and pages) I created all the individual components and their variants.

Atomic Design System -  Atoms Molecules Organisms
Components are build following the atomic design methodology, from the simplest to more complex.
  • Designed UI elements were created into components and combined as variants, so it would be easy to change their variables after an instance is inserted into the page without replacing it. Like for example the form field type: text field, text area or dropdown or state: placeholder, focus or error.

Figma variant of components facilitate the permutations of various variables.
  • I browsed the entire marketing site and client portal, grabbing screenshots of the different objects and their variations along the way.

Design System - Text Boxes
Countless text boxes of various styles were designed into only seven components, each having some hidden layer permutations.
  • The actual site had three major break points with corresponding adaptive page layouts (desktop, tablet, and mobile), so it was easy to create the respective pages and make sure the elements inside respect the responsive constraints.

  • The goal would be for a designer to take a page as a base template, change the navigation and breadcrumb to reflect its location, and add all the text and graphics in the content area.

Design System - Page templates
Desktop, tablet, and mobile page templates with their fix and flexible components.
  • I then wrote a course curriculum and use elements of the design system as the examples to cover each subject.

  • All disciplines used different tools (Axure, Sketch, Zeplin) to accomplish their deliverables. I gave the Figma course individually to each group: UX, UI designers, writers, and developers. It was recorded for future team members.

Figma course curriculum with the chapters covered with the UX/UI designers, writers and developers.

The outcome

  • The design system was completed in about two weeks.

  • An internal project was used as a collaborative effort between the disciplines to use the design system and work in the same document. This help each member refine the concept into final mockups without the need to share documents and manage versions.

  • Everyone found it to be a game changer experience, noting how the numerous back and forth between each discipline were now considerably reduced using Figma as the central hub.

  • A bi-weekly meeting to discuss its evolution and to clarify its usage was organized to maintain the design system. The design system needs to be used by all designers, writers, and developers on multiple projects, to see what need adjustments.

  • The Team Library in Figma, is where the system lives and updates are pushed automatically to all members, so everyone’s always up-to-date. Each member can review the changes before applying the update, so nothing is destructive.

  • The creation of the design system has empowered everyone in the organization to launch new pages rapidly and consistently, as well as improve the product’s interface with confidence.

Explore the Design System in Figma