The Adobe XD pattern library
John Gilfillan
Shaw Sparkle
Building a digital design system
Background
In January 2020 I started a year long project to design, develop, and disseminate a Design Language System (DLS) across the Shaw Digital team. My goal was to create a single source of truth for all our design, code, and brand components.
Why
The Shaw digital team utilizes multiple development stacks and platforms for all of our products. With all of the different styles, components and copy guidelines being used, we were creating a fractured customer experience that increased design and development costs.
How
To kick off the project I established a design system council. This was a group of six designers, copywriters and developers who met frequently to discuss the design system and how it would impact their workflows.
In leading this group I produced a project plan and schedule. I outlined all the steps needed to establish the design system, set project milestones, and assigned tasks to those involved.
The Pattern Library
Adobe XD vs Figma vs Sketch
Before building our design system we had to decide on a design stack. Things we considered were:
Cost and licensing
Ease of use
Prototyping functionality
Cross platform compatibility
Ability to plugin to code
After carefully reviewing the pros and cons of all three, we ultimately made the decision to move from Sketch + Invision (our previous design tools) to Adobe XD. Although Figma was a strong contender, the cost of licensing and overall learning curve was too high.
The Shaw colour library
Design Tokens
After carefully reviewing all existing components and modules used on our digital platforms, I started by defining our design tokens in XD. This included our fonts, colours, border styles, and more.
We completed an audit of all existing modules on our platforms and updated them to use the new tokens.
An example XD component
Module Library
After applying the design tokens to our production environments, our team went through one by one and recreated each module in Adobe XD as a reusable component.
This library was then shared amongst our designers, allowing them to pull and use components as needed when designing new pages or features.
Documentation
The Portal
Every great design system needs great documentation. In order to define and share the rules of our pattern library with people outside of our design team, we used a tool called Zeroheight to build a documentation portal.
The portal includes rules and guidelines around our design tokens and modules, but also includes:
Design team principles and resources
Asset size guidelines and templates
Brand resources such as logos and photography
Copywriting guidelines
A screenshot of the Shaw Sparkle portal
Success
Adoption and Growth
We've just started with Shaw Sparkle, but it's already become a huge success.
It's a resource that gets used frequently by our design and development teams, and the documentation portal has become popular as a brand guideline within the entire company.
We continue to evolve and grow the design system – adding new features for our designers, while working closely with our development team to integrate with their code stack.