BDC Design System

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.

• Applying the methodology of the Atomic Design System ↗︎ (atoms, molecules, organisms, templates, and pages) I created all the individual components and their variants.

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

• I browsed the entire marketing site and client portal, grabbing screenshots of the different objects and their variations along the way.

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

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

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.

See more work.