bbtvdesign system
about
BBTV (TSX: BBTV) is a media-tech company that helps content creators become more successful. They are a leader in creator monetization, helping creators increase viewership of their content while also helping them make more money. They are specialized in video content.
In October 2020, BBTV completed the largest IPO listed on the TSX across all sectors with a female Founder & CEO. BBTV is one of the Top 10 Tech TSX listings of all time and the first IPO on the TSX with a sole female founder & CEO in the technology sector.
When I was hired at BBTV, my job was to support the R&D team to maintain and evolve the most successful internal products for the Partners. Since BBTV was working to change and modernize its branding and never had any design system, we saw an opportunity to create one using this branding change. Throughout 6 months I have created and matured a UI Kit, component library, and style guide. More importantly, I have made the Design System an integral part of company culture, workflow, and process.
In October 2020, BBTV completed the largest IPO listed on the TSX across all sectors with a female Founder & CEO. BBTV is one of the Top 10 Tech TSX listings of all time and the first IPO on the TSX with a sole female founder & CEO in the technology sector.
When I was hired at BBTV, my job was to support the R&D team to maintain and evolve the most successful internal products for the Partners. Since BBTV was working to change and modernize its branding and never had any design system, we saw an opportunity to create one using this branding change. Throughout 6 months I have created and matured a UI Kit, component library, and style guide. More importantly, I have made the Design System an integral part of company culture, workflow, and process.
Collaboration
I collaborated with a small cross-functional team to create the design system. The team included the following members:
- R&D Manager: Provided an information bridge with stakeholders to decide goals and objectives.
- Product manager: Provided insights into the business goals and objectives and helped in research.
- Marketing team: They ensured that the design system aligned with the company’s branding guidelines and visual identity.
- Developers: They ensured that the design system was easily implementable and consistent with the company’s technology stack.
- R&D Manager: Provided an information bridge with stakeholders to decide goals and objectives.
- Product manager: Provided insights into the business goals and objectives and helped in research.
- Marketing team: They ensured that the design system aligned with the company’s branding guidelines and visual identity.
- Developers: They ensured that the design system was easily implementable and consistent with the company’s technology stack.
initial Research
To begin, I conducted some research to spot the main goals and pain points that our products’ internal stakeholders (designers, developers, product managers, marketing managers etc.) experienced.
After this, I identified common design patterns and elements across all products. With that information and the knowledge about the new products coming to the pipeline, we create a priority list for our design system MVP.
After this, I identified common design patterns and elements across all products. With that information and the knowledge about the new products coming to the pipeline, we create a priority list for our design system MVP.
design
Based on the initial research, we introduced tools and processes to help our team consistently apply the design system in their work. This started with the creation of a shared design library with reusable components in Figma.
Starting from the basic, the colour and font definition was based on the Brand guidelines but improved for the web use. The colours needed to have a tonal variation in order to be in comply with WCAG 2.1 AA standards.
An Icon library (Iconoir set) with more than 1000 icons was selected to be incorporated in the design system for easy adoption by designers, developers and users.
Grid systems, spacing scale, typography scales, color systems, and interactive language was defined and a consistent design language to ensure a light and dark mode variation for any button, input, or interaction.
A initial component library was created with a collection of reusable interface elements themed by their foundations file.
Throughout the design system was referenced different components types such as global, structural, content, data, and utility.
Starting from the basic, the colour and font definition was based on the Brand guidelines but improved for the web use. The colours needed to have a tonal variation in order to be in comply with WCAG 2.1 AA standards.
An Icon library (Iconoir set) with more than 1000 icons was selected to be incorporated in the design system for easy adoption by designers, developers and users.
Grid systems, spacing scale, typography scales, color systems, and interactive language was defined and a consistent design language to ensure a light and dark mode variation for any button, input, or interaction.
A initial component library was created with a collection of reusable interface elements themed by their foundations file.
Throughout the design system was referenced different components types such as global, structural, content, data, and utility.
Implementation
During the creation of the new design system, I was tasked with redesigning two tools that would need to undergo code modernizations and we would already take advantage and bring the new design system applied to them.
These projects were very important to test the applicability of the new system that was under development and to even think about future improvements for better global applicability.
These projects were very important to test the applicability of the new system that was under development and to even think about future improvements for better global applicability.
What's next?
Come March of 2023, due to volatility of the market, our work came to a halt, and some of the R&D team was effectively laid off through a reduction in workforce, me included. However, what was accomplished in the time was no small feat. We effectively built a design system, implemented 3 products using components from the new system, educated and led teams across the organization on web accessibility and the value of a common design language.
While we had big plans for the new BBTV design system and its continued growth and expansion, the system is thoroughly laid out so that adoption of this system can be picked up by any team moving forward.
While we had big plans for the new BBTV design system and its continued growth and expansion, the system is thoroughly laid out so that adoption of this system can be picked up by any team moving forward.
