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:

  1. Cost and licensing

  2. Ease of use

  3. Prototyping functionality

  4. Cross platform compatibility

  5. 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 Adobe XD pattern library

The Adobe XD pattern library

The Shaw colour library

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

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:

  1. Design team principles and resources

  2. Asset size guidelines and templates

  3. Brand resources such as logos and photography

  4. Copywriting guidelines

A screenshot of the Shaw Sparkle portal

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.