5 ways having a shared design system has helped us ship our designs faster
Matt Anderson

5 ways having a shared design system has helped us ship our designs faster

As a product designer, have you ever been frustrated trying to find the correct asset to use? Or spent hours debating which color green to use with a colleague? Or needed to re-design a button to suit a specific need?

This was pretty much where we were when we first launched Canva. As our team had no standard rules for design, we’d often need to spend time getting on the same page with each other. Sitting across a table from one another was the best way we could keep in sync and across each other’s work.

Canva Design Team

Some of Canva’s design team

As the size of the team increased and the complexity of the product grew, inefficiencies grew alongside them. Designers were creating slightly different interfaces for the same needs: versions of the same buttons, layouts of the same element, and interactions for the same flows. Engineers started seeing problems where the code wasn’t very modular— any quick changes took a lifetime to initiate.

Not only did we spend a lot of time debating small design details because there weren’t any solid rules for our product, but these inconsistencies made the product less intuitive to use.

The solution? A design system. One that equipped the product teams with a common visual language, sped up the design process, and built bridges between design and engineering that helped to bring our beautiful products to life.

Our design system intended to serve a few key purposes:

  • Provide us with guidelines, constraints, and principles.
  • Aim to solve problems once—so our focus could move onto bigger problems.
  • Provide a shared language for designers, engineers, and product teams.

In this article I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.


1. Created a consistent user experience

Since Melanie—our CEO—first came up with the idea for Canva, our vision has been to integrate the design ecosystem into one page, unifying industries and making Canva accessible to everyone.

Canva editor

The Canva editor

Fitting all those pieces together and keeping things simple, however, is no mean feat! With an increasing number of designers and engineers working across the Canva platform, we realized we needed to set up a common ‘language’ to ensure that our users had an experience that was consistent and our teams weren’t duplicating their efforts. With five years of work leading up to where we were, we set out to reassess our interface. Enter the interface audit: an exhaustive examination and collection of screenshots categorizing all the components that make up the Canva user interface.

Keep in mind that the interface audit doesn’t have to capture every instance of a particular pattern but simply one instance of every unique pattern.

Below are some examples of the categories we looked at.

Alerts

Alerts can be found throughout the product to give simple visual feedback to users on the status of their request.

Alerts

Selection

It’s important that people can interact with objects in their designs in consistent ways when they switch devices, for example when selecting objects.

Selections

Image Contextual

Image grids should have consistent styling in terms of image ratios, spacing and layout.

Image contextuals


Here are some interface categories that can be looked at:

  • Lists: any group of elements presented in a sequential format
  • Icons: favicons, social icons, magnifying glasses, hamburgers (of the non-edible variety), etc.
  • Headings: variations of typographic headings
  • Buttons: big, small, active, loading, disabled, those that look like text links, etc.

With all this powerful information in hand, it doesn’t take a designer to know that having 13 variations on the same button style isn’t a great idea. Having figured out the different pathways, interactions, and elements that made up Canva, we sat down and asked ourselves some important questions: Which patterns were we happy with? Which patterns did we want to get rid of? Which patterns could be merged together?

A collection of UI elements

The next steps were distilling patterns into canonical components before translating the patterns from this interface audit into an active pattern library. Building a holistic library of components meant more time on everyone’s hands and less time spent on quality assurance; repetitively used standardized components allowing our builds to be easier to implement.

What was once something built by a small team of engineers is today a collaborative effort worked on by expanding teams of people. Having standardized components allows our designers to spend less time focused on style and more time developing a better user experience.

And while over time—no matter how consistent or small-scale a team is—new solutions, styles, and efforts will arise causing experiences to diverge. Our goal at Canva is to ensure that at the end of the day we are creating a product that allows our users to have a coherent, consistent experience; no matter what device they’re using.


2. Established a single source of truth

Working across teams, platforms, and locales, it is important that our designers and engineers create work that is aligned with our existing patterns and styles.

We use two primary tools to manage our design system:

Storybook

We use Storybook as a UI development environment for all our UI components. It allows us to develop interactively and visualize different states of our UI components. Storybook also runs outside of our main app so we can develop UI components in isolation without worrying about app specific requirements and dependencies.

Sketch

Using Sketch, our designers are able to access a component library, and easily turn our ideas into interactive prototypes.

One of the things we struggled with early on was creating an easy way for all designers to access the same library. Fortunately, Sketch has introduced Sketch Libraries. We use these libraries that are version controlled using Git. We now use this by setting up shared Sketch libraries in a Google folder which designers sync with their desktops using the Google Drive app. When updating these design library files, everyone now has access to the most up-to-date content.

Libraries in Sketch

Storybook is our single shared source of truth and is used as our living UI kit. Its where the exact components in all their different states, variations, and latest versions are stored. Over the past few months we’ve adopted React for all our components, and using Storybook means designers and engineers can interact with the components and toggle on and off their various states.

Storybook also works alongside the libraries of components built to work within Sketch. Working across Storybook and Sketch our teams are able to design across all platform.

Masonry states and variations

Example of masonry states and variations in its latest version

Icons in Storybook

Example of icons in Storybook

Icon components implemented into designs within Sketch

Example of icon components being implemented into a design in Sketch

Working across both Storybook and Sketch makes it easier for us to do some cool things. Having a single source of truth—an up to date library of tried and tested components and patterns—such as Storybook improves our internal efficiency, through things like branch builds, and visual diffing.

Branch builds

If an engineer is working on a particular feature, they can send designers a branch build. This private version of the feature can then be accessed by the designer to provide feedback and iterate on changes to components before they’re merged and sent to production.

Branch builds

Branches in Canva

Branch builds on GitHub

Visual diffing

If we want to change what a button looks like we can check all the instances throughout the product where that button is used and can then quickly see if the changes have the desired outcome.

Example of Visual diffing

Visual diff of search bar

We are able to decrease avoidable back and forths and focus on experimentation, moving ideas quickly through their life-cycle so that we are able to better the visual consistency, accessibility, and experience our users have with Canva


3. Prototype and launch faster

Regardless of whether we’re making UX changes to how our users collaborate on designs, or developing the style of our UI, our design system has reduced the overall organizational efforts from painfully long steps to a few simple clicks.

Alt text

An outline of our end to end process. Click to enlarge.

The interdependent components of the design system mean that:

  1. Changes that were once critically time consuming, can now be updated within the system in a trivial manner while still having a great impact on our product; what used to take our team’s hours to achieve—if not days—can now be accomplished within minutes.
  2. Piecing together new flows and interactions can be done as quickly as grabbing Lego blocks out of a tub. This allows our teams to experiment, prototype, test, gain data and analytics, and launch products faster than ever before. Gone are the days of confusing tangled up code, reinventing solutions to the same problems, and fiddling around with pixels.
  3. When changes are made in one location, the whole system will inherit these changes throughout.

Testing prototypes

Testing prototypes for our magic resizing tool.

We’re moving towards a process where don’t need to use these ‘middle man’ Sketch procedures and as designers we can instead go to our engineers with a set of components from which they can implement and build the prototypes.


4. Unified and scaled products

Today, Canva is available across all devices—available on the web, iOS, and Android. While getting the design consistent across the board was the first piece of that puzzle, maintaining parity across devices is something that we are heavily focusing on.

Using component-based development will enable us to speed up our programmers’ potential by reducing technical overhead and reusable code, hence, making it more efficient, and easier to scale. This will allow us to lower our efforts and increase the speed of our software development cycles—empowering teams to build better and bigger, products faster.

The vision is to ensure a consistent user experience across every platform. We’ve been doing a lot of thinking from a design point of view, and are working towards unifying the experience.

Cross-platform feature partiy

Example of cross-platform feature parity for Publish menu.


5. Improved accessibility for everyone

Canva was fundamentally designed to work for all people; whatever their software, culture, language, physical, or mental ability. Because our product meets this goal, we can ensure that it is accessible to communities with a diverse range of sight, hearing, and cognitive abilities.

Here’s two different ways in which we make sure that color is accessible on Canva:

Color blindness

There’s a bunch of different types of color blindness, some of which affect a huge portion of the population. A common one is issues telling the difference between green and red. We have tooling that lets us check colour contrast and colour blindness types. The affordances have been distinguishing between which of our colors we can use in certain cases. e.g. text has a restricted colour palette which is baked into the components so we can ensure they have enough readability etc. Tests make sure we don’t rely on just color to indicate errors and the like.

Testing colors

Testing colors for accessibility within the Editor

Color contrast

We aim to meet WCAG 2.0 AA levels for color contrast. Basically, what that means is that there’s enough contrast between text and the background behind the text, for example light grey text on a white background is too low contrast to be able to be read easily.

Employing our design system allows us to effortlessly create these accessible practices which in turn improve the usability of Canva; making it easier to look at, communicate, interact with, and navigate—improving the completion rate of designs and minimizing user errors and complaints.

Canva is now in over 100 languages around the world!

There are a lot of different considerations we have to take into account for all of these languages and cater to our international user database.

  • German, a verbose language can have words that are 2-3 times longer than their English counterparts.
  • Arabic, is a right-to-left (RTL) language and interfaces need to be flipped in order to accommodate.
  • South and Southeast Asian scripts are taller than their Latin counterparts and take up more vertical space.


Takeaways

Build a bridge between design and engineering

There’s nothing more important than successful communication in a team. If you’re able to use the same naming conventions and language as the engineers you’ll find that making iterations and shipping products is a much more efficient process.

Start now

So when’s the best time to establish your design system? The short answer is now. Design systems and their pattern libraries can often be created in conjunction with redesigning projects, replatforming efforts, and other company wide initiatives. However, this can be a massive undertaking involving many teams. So maybe the first steps might just be making a change in your design team, and unifying your designers with a Sketch library.

Start small

If you don’t have the luxury of starting from scratch like we did, start with something specific. One month you may choose to work on colors; go through the whole process for colors, then the next month you may go through your icons. Very quickly you start to make decent headway.

Cater to needs

You may be looking at what we’ve done here at Canva and think that this isn’t appropriate to your needs. Something to always remember is that there is no one size fits all solution; spend a bit of time figuring out what the purpose of your product or company is before you apply these learning to your system. Always update A design system grows with you. The process of developing and further refining a system is maintained over time—and it’s a never ending process. For it to stay relevant to your organization, a design system needs to consistently reflect all of the changing purposes of the product and the needs of the people using it.


Closing remarks

How effective a design system is can be measured by how well its different parts work in collaboration to allow us to achieve the purpose of our product. Having a maintainable, reliable, flexible, scalable, strong, and successful design system has allowed Canva to consistently and efficiently satisfy the needs of our users. But even so, there’s so much more to be achieved.

comments powered by Disqus