HBT Design System
HBT Design System
HBT is the foundation of CMHC 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.
Client
CMHC
Year
2024
Category
Design System
My Role
My Role
As the lead designer, I meticulously crafted, monitored, and measured the HBT design system implementation & governance.
My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens.
Additionally, I worked closely with developers, accessibility, and QA teams to create detailed documentation to guarantee a seamless and consistent user experience across all platforms.
As the lead designer, I meticulously crafted, monitored, and measured the HBT design system implementation & governance.
My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens.
Additionally, I worked closely with developers, accessibility, and QA teams to create detailed documentation to guarantee a seamless and consistent user experience across all platforms.
My Role
As the lead designer, I meticulously crafted, monitored, and measured the HBT design system implementation & governance.
My responsibilities ranged from establishing design foundations and developing components to formulating comprehensive design guidelines and design tokens.
Additionally, I worked closely with developers, accessibility, and QA teams to create detailed documentation to guarantee a seamless and consistent user experience across all platforms.
Guidelines
Guidelines
We have thousands of diverse HBT users on a daily basis, multi-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.
We have thousands of diverse HBT users on a daily basis, multi-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.
Guidelines
We have thousands of diverse HBT users on a daily basis, multi-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.
Accesibility
Accesibility
HBT needs to meet a high standard for accessibility so all possible group of customers CMHC can use our digital products. all All digital products must fulfil latest requirements and our design system team has a dedicated accessibility SME in our creation process to ensure the assets are inclusive and accessible.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. HBT embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
HBT needs to meet a high standard for accessibility so all possible group of customers CMHC can use our digital products. all All digital products must fulfil latest requirements and our design system team has a dedicated accessibility SME in our creation process to ensure the assets are inclusive and accessible.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. HBT embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
Accesibility
HBT needs to meet a high standard for accessibility so all possible group of customers CMHC can use our digital products. all All digital products must fulfil latest requirements and our design system team has a dedicated accessibility SME in our creation process to ensure the assets are inclusive and accessible.
Accessibility in design system includes many different aspects: sufficient colour contrast ratios, keyboard controls, screen reader, focus states, documentation with annotations and so on. HBT embedded accessibility criteria within the Figma documentation for each component and elevate awareness around designing accessible experiences with clear guidelines.
The design system
The redesign was completed over 5 sprints and deployed on web and mobile.
Contribution & Governance
HBT leverages the contribution model to grow the library in an 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 key 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 HBT to scale with the growth of CMHC teams.
Design Tokens
HBT is the ideal platform for implementing design tokens, especially considering that CMHC offers a variety of products across distinct themes. Establishing a robust design token structure enables us to effortlessly switch between themes and enhances the efficiency of component development.
Design Tokens
Design Tokens
HBT is the ideal platform for implementing design tokens, especially considering that CMHC offers a variety of products across distinct themes. Establishing a robust design token structure enables us to effortlessly switch between themes and enhances the efficiency of component development.
HBT is the ideal platform for implementing design tokens, especially considering that CMHC offers a variety of products across distinct themes. Establishing a robust design token structure enables us to effortlessly switch between themes and enhances the efficiency of component development.
Design Tokens
HBT is the ideal platform for implementing design tokens, especially considering that CMHC offers a variety of products across distinct themes. Establishing a robust design token structure enables us to effortlessly switch between themes and enhances the efficiency of component development.
The web & Mobile Designs
Contribution & Governance
HBT leverages the contribution model to grow the library in an 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 key 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 HBT to scale with the growth of CMHC teams.
Contribution & Governance
HBT leverages the contribution model to grow the library in an 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 key 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 HBT to scale with the growth of CMHC teams.
Key results of growing LCBO’s eCommerce channel
©2025 Jon - Kerr
Back to top
©2025 Jon - Kerr
Back to top
©2025 Jon - Kerr
Back to top
©2025 Jon - Kerr
Back to top