UI Kit, Global News
Building Global News’s first-ever UI kit.
The in-house Graphic Design team at Global News had just completed a 2-year old visual design rebranding project, and they now wanted to bring their new brand to life across graphics, on-air/broadcast, and select subway screens throughout Canada.
My biggest project of 2022 was to help lead the web & mobile portion of it - all on www.globalnews.ca.
I instantly sought an opportunity to self-initiate a UI kit after attending my first meeting with the Head
of Graphic Design. Taking my learnings from a small start-up I was at, prior to Global News, I also wanted
the intent for this UI kit to comply to accessibility (WCAG and AODA) standards.
Platform
Web, tablet, mobile
Skills
Design systems, visual design, UI design, accessibility, stakeholder management
Role
Sole Product Designer
Timeline
Initial work was completed January - May 2022, updates were made until my departure in February 2024
Launch
October 2022
UI Kit, Global News
UI Kit, Global News
UI Kit, Global News
Building Global News’s first-ever UI kit.
Building Global News’s first-ever UI kit.
Building Global News’s first-ever UI kit.
The in-house Graphic Design team at Global News had just completed a 2-year old visual design rebranding project, and they now wanted to bring their new brand to life across graphics, on-air/broadcast, and select subway screens throughout Canada.
My biggest project of 2022 was to help lead the web & mobile portion of it - all on www.globalnews.ca.
I instantly sought an opportunity to self-initiate a UI kit after attending my first meeting with the Head
of Graphic Design. Taking my learnings from a small start-up I was at, prior to Global News, I also wanted
the intent for this UI kit to comply to accessibility (WCAG and AODA) standards.
The in-house Graphic Design team at Global News had just completed a 2-year old visual design rebranding project, and they now wanted to bring their new brand to life across graphics, on-air/broadcast, and select subway screens throughout Canada.
My biggest project of 2022 was to help lead the web & mobile portion of it - all on www.globalnews.ca.
I instantly sought an opportunity to self-initiate a UI kit after attending my first meeting with the Head
of Graphic Design. Taking my learnings from a small start-up I was at, prior to Global News, I also wanted
the intent for this UI kit to comply to accessibility (WCAG and AODA) standards.
Platform
Web, tablet, mobile
Skills
Design systems, visual design, UI design, accessibility, stakeholder management
Role
Sole Product Designer
Timeline
January - October 2022
Platform
Web, tablet, mobile
Skills
Design systems, visual design, UI design, accessibility, stakeholder management
Role
Sole Product Designer
Timeline
Initial work was completed January - May 2022, updates were made until my departure in February 2024
Launch
October 2022
Platform
Web, tablet, mobile
Skills
Design systems, visual design, UI design, accessibility, stakeholder management
Role
Sole Product Designer
Timeline
Initial work was completed January - May 2022, updates were made until my departure in February 2024
Launch
October 2022
Colour Palette
Colour Palette
A large core of the news division’s brand identity was their colours. I took a foundational direction by taking their signature red, black, and white's hex codes, used those as a base to establish a colour range, and crafted a WCAG and AODA-compliant version of their colour palette.
A large core of the news division’s brand identity was their colours. I took a foundational direction by taking their signature red, black, and white's hex codes, used those as a base to establish a colour range, and crafted a WCAG and AODA-compliant version of their colour palette.
Typography
Typography
The Graphic Design team had already selected Roboto to use as their main font for the rebrand, which meant a type scale needed to be created. Upon finding out there is no mandated web standard for text elements such as H1 headings and body text, but instead, putting an emphasis on a recommended size, I ensured these text elements met at least, the minimum type size requirement on a desktop versus mobile screen, and were legible on both surfaces.
The Graphic Design team had already selected Roboto to use as their main font for the rebrand, which meant a type scale needed to be created. Upon finding out there is no mandated web standard for text elements such as H1 headings and body text, but instead, putting an emphasis on a recommended size, I ensured these text elements met at least, the minimum type size requirement on a desktop versus mobile screen, and were legible on both surfaces.
Accessibility
Accessibility
Admittedly, accessibility that was done during this rebrand consisted of mainly the colour palette and the type scale. Parts that I did get to address were implemented on core components.
Admittedly, accessibility that was done during this rebrand consisted of mainly the colour palette and the type scale. Parts that I did get to address were implemented on core components.
Impact
Impact
Upon launch in October 2022…
Upon launch in October 2022…
Upon launch in October 2022…
♿️
Improved web accessibility
Both the Global News rebrand and the UI kit has received immense positive feedback from the organization and our users. Using a website governance and optimization tool called SiteImprove, our website that was rebranded using the UI kit went up +7.3% on accessibility to a score of 72.3%, when compared to the industry benchmark of 80%.
💪🏻
Levelled UX maturity
The UI kit has levelled up the maturity of our DesignOps practice; an 8-year old gap between the graphics team and my cross-functional team was bridged, implementing a monthly touchpoint session between the two.
♿️
Improved web accessibility
Both the Global News rebrand and the UI kit has received immense positive feedback from the organization and our users. Using a website governance and optimization tool called SiteImprove, our website that was rebranded using the UI kit went up +7.3% on accessibility to a score of 72.3%, when compared to the industry benchmark of 80%.
💪🏻
Levelled UX maturity
The UI kit has levelled up the maturity of our DesignOps practice; an 8-year old gap between the graphics team and my cross-functional team was bridged, implementing a monthly touchpoint session between the two.
🌚
Dark mode
🌚
Dark mode
The UI kit has sparked another visual design project called Dark Mode which would be worked on 5 months later in March 2023. Highlights include elevating our colour palette, educating news stakeholders on the benefits of having and using dark mode, and designing a toggle component resulting from iterations and conducting an internal survey.
The UI kit has sparked another visual design project called Dark Mode which would be worked on 5 months later in March 2023. Highlights include elevating our colour palette, educating news stakeholders on the benefits of having and using dark mode, and designing a toggle component resulting from iterations and conducting an internal survey.
© 2026 Nadia Le.
© 2026 Nadia Le.