Timeframe
Nov. 2021 - Present
Team
2 Product Designers and 2 Developers
Deliverables
Create a unified set of UX and visual guidelines
Tools
Figma, Specify
Context
At the start of my role at The Globe and Mail, the web team was in the middle of launching a new layout called Fusion. The website needed a fresh new look, a development system that was less reliant on third-party updates and an audit of unused design elements.
I worked alongside our web team to implement our first design system for our UI library and design tokens.
Opportunity
We implemented a design library to provide designers and developers easy access to reusable components, UI updates and streamline design-to-development handoffs. This initiative aims to aid in the migration for the development and organization of design patterns.
Step one: conception and initiation
This project's scope was expected to develop slowly due to other higher-priority projects. Our dedication to building this system occurred when we had downtime during projects or squeezed in with development tickets.
Organizational approach
The foundation for our system follows the atomic design method created by Brad Frost. Our structure for elements in Figma consists of atoms, molecules and organisms. Page templates live in separate Figma files to limit memory storage and localize UI components in one file.
Foundations
Typography
Colour
Measurement
Borders
Shadow
Radius
Logos
Grid
Components
Buttons
Iconography
Article Meta
Article packages
Headers
Footers
Tickers
Flashes
Containers
Tooltips
Search
Forms
Tabs
Accordions
System alerts
For designers, we utilize Figma’s features like....
Auto layout
Emojis signal available categories or ongoing tasks
Local styles
Variants
Each component is organized with an appropriate naming convention nested for reusable components.
.png)
Step two: grouping components
Throughout the creation of foundational elements, simultaneously we built an atomic-level building approach to construct components.
Setting up template pages
The template page consisted of themes of our product such as article pages, homepage and section pages. In these files, we have all components gathered from the UI library alongside spacing specs. They are recognized as our source of truth for all designers and developers.
Learnings
Developing our component library has been an enlightening experience, as it has required me to navigate the team's dynamics and existing workflows to establish a functional system. At each stage of this process, the significance of post-update touchpoints has provided reassurance and clarity, guiding the final decisions on library contents. While I continue to refine my understanding and adapt to our evolving system through ongoing projects and updates to reusable components, I eagerly anticipate further learning and mastery of design system principles.
The current state of the library
When I say slow…this is slow as a slug.
A year after working on the design system, our teams received higher-priority projects which pushed the exploration of our design system to the back seat. By this time we have integrated our basic design tokens into development, so the urge to do complex design system work is on hold. However, we revisit the system if there is friction within the development of our projects.
