Canvas Design System
Canvas Design System
Canvas Design System
(brief)
Canvas is the foundation of Scotiabank for elevating beautiful, standardized, and accessible designs and front-end digital products from our communities into reusable elements, promoting autonomous and collaborative culture to nourish a unified design system.
(brief)
Canvas is the foundation of Scotiabank for elevating beautiful, standardized, and accessible designs and front-end digital products from our communities into reusable elements, promoting autonomous and collaborative culture to nourish a unified design system.
(brief)
Canvas is the foundation of Scotiabank for elevating beautiful, standardized, and accessible designs and front-end digital products from our communities into reusable elements, promoting autonomous and collaborative culture to nourish a unified design system.
Company
Scotiabank
Company
Scotiabank
Company
Scotiabank
Tools
Figma
Tools
Figma
Tools
Figma
Role
Designer
Role
Designer
Role
Designer
Year
2023
Year
2023
Year
2023
(my role)
As the senior product designer, I meticulously crafted, monitored, and measured the Canvas design system for iOS, Android and React library. My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens. Additionally, I worked closely with accessibility team to create detailed accessibility documentation to guarantee a seamless and consistent user experience across all platforms.
(my role)
As the senior product designer, I meticulously crafted, monitored, and measured the Canvas design system for iOS, Android and React library. My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens. Additionally, I worked closely with accessibility team to create detailed accessibility documentation to guarantee a seamless and consistent user experience across all platforms.
(my role)
As the senior product designer, I meticulously crafted, monitored, and measured the Canvas design system for iOS, Android and React library. My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens. Additionally, I worked closely with accessibility team to create detailed accessibility documentation to guarantee a seamless and consistent user experience across all platforms.
CANVAS DESIGN SYSTEM
Behind the scenes…
Behind the scenes…
Behind the scenes…
——— Component library
——— Guideline &
Documentation
——— Accessibility
——— Contribution model
——— Teams collaboration
Figma Libraries to support web & mobile components
Web (React) Library
Android & iOS Library
Our team released two separated libraries for Web and Mobile components independent of each other. This offered designers a multitude of benefits, providing a smaller file weight, clear structure of libraries to focus on designers needs, easier data analytics tracking and optimized variant panel.
Parity between design and dev is our goal. We support all digital products in Scotiabank with multiple coding languages, including React, iOS UI Kit, iOS Swift UI, Android Kotlin and Android Jetpack Compose.
Digital teams are leveraging our libraries
Coding languages
Unique components are available to use
——— Component library
Optimize user experience by comprehensive guideline
——— Guideline & Documentation
We have thousands of diverse Canvas users on a daily basis, such as journey team designers, developers and PMs. Documentations is critical to the success of our team by providing a how-to guide for using the design system effectively, and ideally, boosting the level of maturity and expertise of the partnering team members who use it.
Our guidelines include but are not limited to accessibility, patterns, behaviours, usage, voice & tone, examples, etc.
Inclusive and accessible
Colour contrast
WCAG AA: Pass
tab
Keyboard controls
Q
W
shift
Z
X
Focus state
Button
Annotation kit
Screen reader
Love
Canvas needs to meet a high standard for accessibility so all possible group of customers in Scotiabank can use our digital products. Scotia digital has an accessibility team to make sure all digital products fulfil latest requirements and our design system team has a dedicated accessibility partner in our creation process.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. Canvas embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
——— Accessibility
Scale the system with contribution and inner-source
——— Contribution model
Collaboration flow
Component checklist
Given the limited resources of a design system team, Canvas leverages the contribution model to grow the library in a more efficient way. We promote inner-source in our design and dev community. In that way we can effectively bridge the gap between our existing components and any other patterns that we can serve for product teams.
Contribution is also a key OKR for our team success. Instead of being a separate team that builds and maintains the library independently, we see ourselves as an extension product team that ensures governance of quality and system thinkings. We designed a smooth collaboration flow and contribution guideline to empower as many product teams as possible and to allow Canvas to scale with the growth of the bank.
It's all about community and collaboration
⏰ Weekly open office hours
🎨 Weekly design internal sync
🚀 Monthly demo
🛫️ Design system onboarding
🤍 Weekly accessibility touchpoint
Slack channel
Internally Canvas team has weekly design syncs to stay informed on what each other is working on and to jam on solutions together.
We partner with different journey teams in different ways. We have a dedicated Slack channel where we offer cross-functional support. This is generally the quickest way to ask questions and get in touch with us.
We also hold weekly Open Office Hours where designers can sign up for assistance. Our design system team members try to attend relevant product team open sessions to stay informed of what our design partners are working on and what has been productized. More importantly, we can coordinate efforts strategically across product teams.
——— Teams collaboration
Component library
Guideline &
Documentation
Accessibility
Contribution model
Teams collaboration
Figma Libraries to support web & mobile components
Web (React) Library
Android & iOS Library
Our team released two separated libraries for Web and Mobile components independent of each other. This offered designers a multitude of benefits, providing a smaller file weight, clear structure of libraries to focus on designers needs, easier data analytics tracking and optimized variant panel.
Parity between design and dev is our goal. We support all digital products in Scotiabank with multiple coding languages, including React, iOS UI Kit, iOS Swift UI, Android Kotlin and Android Jetpack Compose.
Digital teams are leveraging our libraries
Coding languages
Unique components are available to use
——— Component library
Optimize user experience by comprehensive guideline
——— Guideline & Documentation
We have thousands of diverse Canvas users on a daily basis, such as journey team designers, developers and PMs. Documentations is critical to the success of our team by providing a how-to guide for using the design system effectively, and ideally, boosting the level of maturity and expertise of the partnering team members who use it.
Our guidelines include but are not limited to accessibility, patterns, behaviours, usage, voice & tone, examples, etc.
Inclusive and accessible
Colour contrast
WCAG AA: Pass
tab
Keyboard controls
Q
W
shift
Z
X
Focus state
Button
Annotation kit
Screen reader
Love
Canvas needs to meet a high standard for accessibility so all possible group of customers in Scotiabank can use our digital products. Scotia digital has an accessibility team to make sure all digital products fulfil latest requirements and our design system team has a dedicated accessibility partner in our creation process.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. Canvas embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
——— Accessibility
Scale the system with contribution and inner-source
——— Contribution model
Collaboration flow
Component checklist
Given the limited resources of a design system team, Canvas leverages the contribution model to grow the library in a more efficient way. We promote inner-source in our design and dev community. In that way we can effectively bridge the gap between our existing components and any other patterns that we can serve for product teams.
Contribution is also a key OKR for our team success. Instead of being a separate team that builds and maintains the library independently, we see ourselves as an extension product team that ensures governance of quality and system thinkings. We designed a smooth collaboration flow and contribution guideline to empower as many product teams as possible and to allow Canvas to scale with the growth of the bank.
It's all about community and collaboration
⏰ Weekly open office hours
🎨 Weekly design internal sync
🚀 Monthly demo
🛫️ Design system onboarding
🤍 Weekly accessibility touchpoint
Slack channel
Internally Canvas team has weekly design syncs to stay informed on what each other is working on and to jam on solutions together.
We partner with different journey teams in different ways. We have a dedicated Slack channel where we offer cross-functional support. This is generally the quickest way to ask questions and get in touch with us.
We also hold weekly Open Office Hours where designers can sign up for assistance. Our design system team members try to attend relevant product team open sessions to stay informed of what our design partners are working on and what has been productized. More importantly, we can coordinate efforts strategically across product teams.
——— Teams collaboration
——— Component library
——— Guideline &
Documentation
——— Accessibility
——— Contribution model
——— Teams collaboration
Figma Libraries to support web & mobile components
Web (React) Library
Android & iOS Library
Our team released two separated libraries for Web and Mobile components independent of each other. This offered designers a multitude of benefits, providing a smaller file weight, clear structure of libraries to focus on designers needs, easier data analytics tracking and optimized variant panel.
Parity between design and dev is our goal. We support all digital products in Scotiabank with multiple coding languages, including React, iOS UI Kit, iOS Swift UI, Android Kotlin and Android Jetpack Compose.
Digital teams are leveraging our libraries
Coding languages
Unique components are available to use
——— Component library
Optimize user experience by comprehensive guideline
——— Guideline & Documentation
We have thousands of diverse Canvas users on a daily basis, such as journey team designers, developers and PMs. Documentations is critical to the success of our team by providing a how-to guide for using the design system effectively, and ideally, boosting the level of maturity and expertise of the partnering team members who use it.
Our guidelines include but are not limited to accessibility, patterns, behaviours, usage, voice & tone, examples, etc.
Inclusive and accessible
Colour contrast
WCAG AA: Pass
tab
Keyboard controls
Q
W
shift
Z
X
Focus state
Button
Annotation kit
Screen reader
Love
Canvas needs to meet a high standard for accessibility so all possible group of customers in Scotiabank can use our digital products. Scotia digital has an accessibility team to make sure all digital products fulfil latest requirements and our design system team has a dedicated accessibility partner in our creation process.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. Canvas embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
——— Accessibility
Scale the system with contribution and inner-source
——— Contribution model
Collaboration flow
Component checklist
Given the limited resources of a design system team, Canvas leverages the contribution model to grow the library in a more efficient way. We promote inner-source in our design and dev community. In that way we can effectively bridge the gap between our existing components and any other patterns that we can serve for product teams.
Contribution is also a key OKR for our team success. Instead of being a separate team that builds and maintains the library independently, we see ourselves as an extension product team that ensures governance of quality and system thinkings. We designed a smooth collaboration flow and contribution guideline to empower as many product teams as possible and to allow Canvas to scale with the growth of the bank.
It's all about community and collaboration
⏰ Weekly open office hours
🎨 Weekly design internal sync
🚀 Monthly demo
🛫️ Design system onboarding
🤍 Weekly accessibility touchpoint
Slack channel
Internally Canvas team has weekly design syncs to stay informed on what each other is working on and to jam on solutions together.
We partner with different journey teams in different ways. We have a dedicated Slack channel where we offer cross-functional support. This is generally the quickest way to ask questions and get in touch with us.
We also hold weekly Open Office Hours where designers can sign up for assistance. Our design system team members try to attend relevant product team open sessions to stay informed of what our design partners are working on and what has been productized. More importantly, we can coordinate efforts strategically across product teams.
——— Teams collaboration
Canvas
Design System
Canvas
Design System
Canvas
Design System
Shared tools &
services
Shared tools &
services
Shared tools &
services
Client-facing
Platforms
Client-facing
Platforms
Client-facing
Platforms
Official website
Official website
Wealth management website
Wealth management website
Personal banking app
Personal banking app
Direct investment app
Direct investment app
Personal banking webite
Personal banking webite
Wealth management app
Wealth management app
Official website
Wealth management website
Personal banking app
Direct investment app
Personal banking webite
Wealth management app
Authentication
Authentication
Payments & Transfers
Payments & Transfers
Client collaboration tools
Client collaboration tools
Documents
Documents
Onboarding
Onboarding
File sharing
File sharing
Profile & Settings
Profile & Settings
Authenticated storefront
Authenticated storefront
Help centre
Help centre
Authentication
Payments & Transfers
Client collaboration tools
Documents
Onboarding
File sharing
Profile & Settings
Authenticated storefront
Help centre
Key projects
Key projects
Key projects
(1)
Set up design tokens to enable easy theme switching
In 2023, Figma has released a major update that allows designers to create variables, which enable design tokens being natively used in Figma.
Canvas is the ideal platform for implementing design tokens, especially considering that Scotiabank offers a variety of products across distinct themes, including retail, wealth management, and iTrade. Establishing a robust design token structure enables us to effortlessly switch between themes and enhances the efficiency of component development.
(2)
Create a new library under Canvas to support web revamp
In 2023, as we initiated the revamp of our retail web platform, aiming to establish consistent components and a unified design style compatible with the latest framework, I led the development of a new design library named "Galaxy" to uphold the new design standards.
I constructed the design foundation, components library, and token library from the ground up. Additionally, I restructured the Figma file architecture to enable designers to seamlessly switch between the core library and the Galaxy library.
(2)
Create a new library under Canvas to support web revamp
In 2023, as we initiated the revamp of our retail web platform, aiming to establish consistent components and a unified design style compatible with the latest framework, I led the development of a new design library named "Galaxy" to uphold the new design standards.
I constructed the design foundation, components library, and token library from the ground up. Additionally, I restructured the Figma file architecture to enable designers to seamlessly switch between the core library and the Galaxy library.
