I helped Canon build a design system

Tags —
  • Ecommerce
  • UX Design
Roles —
  • UX Designer
  • Prototyper
  • Visual Designer

Canon Design System

Canon's problem statement

Canon wanted us to help them improve the UI & UX of their Canon Store Website.

As it stands, design is wedged into the process as an afterthought. Rather than having the design lead the digital product.

There is a discrepancy between the sources of truth that designers rely on. But also there is a gap in communication between designers and developers. This renders the current website with inconsistencies in both the front-end and design. Which directly hinders Canon's goal of becoming a premium Canon Store.

The solution

A potential solution would be to redesign the whole website. Stamping each design with a premium mark and calling it a day.

But the real solution was to create a design system. A system which embodies: design principles, accessibility, design language and business rules. That would help Canon be more consistent throughout their current digital products. But also future Canon products.

This project has two major deliverables; the actual design system, but also the design process that comes with it.

design system overview image

Why design systems?

Design systems are not new. Design systems have existed in parallel with branding guidelines for a long time. But only recently have design systems taken a more digital approach.

When we looked back at our current design process of Canon. We realised that most designs decisions were sourced from multiple style-guides or systems.

We joked that we'd create another style-guide and confuse everyone even more. So it was important to get this design system right.

How to get it right?

By making sure it's future proofed. Looking back at the old styleguides. We found that most of them lived inside static documents. More sophisticated styleguides lived online, but no one maintained them. So they were essentially no better than static PDFs.

So to get it right we needed to two-way bind the design system and the final production site. To avoid maintaining two separate entities.

What did we do?

We helped educate the client that exploring homepage designs wasn't going to work.

By showing them examples of successful digital products and their corresponding design systems. They were able to see the importance of design systems.

We did our research on other design systems before we dove in. We found that more successful design systems weren't just a library of components. They were a collection jigsaw puzzle pieces, or Atoms. Atoms resonated with me because the word tells what we wanted to achieve; a building block. We wanted fundamental building blocks to build up the whole system.

We discovered the popular Atom-approach to CSS (Tachyons, or acss.io). Where small CSS utility classes would drive the layout and look of everything.

By using these CSS utilities that we'd call Atoms. We were able to build everything we wanted within a design constraint.

Consider the following CSS Atom:

.f3 { font-size: 3 rem; }

This Atom handles two things; the font-size, and how big the font-size is.

Imagine this next Atom:

.f4 { font-size: 4 rem; }

It handles the same thing, but it increases that font-size by 1 rem. We have now successfully created a simple typescale that is constrained to a set of design rules.


We can now put in any font-size inside the CSS declaration. A fundamental example, but it showcases our thinking. Using this formula, we built the whole design system for Canon.

Some homepage design iterations that we're designed during the workshops

Rapid prototype created with HTML JS, and CSS(Tachyons)

What did we solve?

The problem statement mentioned that design was treated like an afterthought, this has been solved with the new design system that works like a two-way binding between the final product and the design rules.

The design systems helps designers to fast-track prototyping. Giving them the ability to produce working prototypes that can be used for user testing. Which will also make the resulting data more accurate.

It gives designers a front-end framework that they can use to build pages that are always up to date.

Business Analysts to refer to the design system when working out new requirements with the business.

It helps developers be more consistent and efficient when building out new features. Because they no longer have to make up new components from scratch by eyeing a static design documents.

CSS is deceptively hard to write on a large scale. By having one CSS file that dictates the content for everything. And not having to write new CSS for every new feature, means that were limiting the mistakes that can be made. (And reduced CSS file bandwidth)

Refactoring is easier because everything is build by Atoms. For instance when removing CSS code, its easier to anticipate what it changes.

A color generator I prototyped to be working alongside the design system. Brand colors should also be based on a logic and a set of principles. Read more about it here here

What did we not solve?

We wanted the design system to be built upon React. To be able to componentize each design pattern such as button, inputs. Our Atoms would live inside each React component. A button for a designer shouldn't be a bunch of CSS utility classes in a row — it should be something like


As opposed to:

<button class="ph2 pv1 bg-red white dib mr2 mb2">Link</button>

We didn't solve this because of resourcing and time constraints. But we're are looking forward to bring React in the next step.

We stress-tested the Atom design approach with a conceptual homepage. But ideally we would have time to stress test the approach with real data and try to re-create the pages that currently exists on the Canon Store.


Above is a screenshot of a HTML prototype. It's showcasing the typographical scale and how powerful the layout Atoms can be.

We user tested the initial home page explorations. We wanted to gauge how well a user can complete a task, along with the visual attractiveness of the site. (Premium experience). We didn't have time to user test the design system. By that I mean re-creating the Canon site as a prototype with the new design system and use the old Canon Store website as a control.

Atomic CSS approach needs a pragmatic approach for it to work well.

For instance; building a custom complex navigation with Atomic CSS will be hard. The Atomic approach has troubles staying reusable. This is because everything is exploded into smaller utility classes.

A primary-button class reused throughout the whole site is trivial to change.

But that logic can be dangerous because you are changing things site-wide and unseen changes are often overlooked.

with React this problem no longer exists because of the decoupled styling it offers.


Creating the design system easy. Actually implementing the system is 90% of the work.

So how does one go about implementing a design system? Like most things in product design, it's about talking to people. Simply sharing the befits of a design system should make heads turn:

  • Higher return of investment due to faster loading times
  • Less time & money is spent on development and design
  • More accurate user testing, thus enabling the business to make better design decisions
  • A more consistent and premium experience for users

What now?

The current system is again lacking major features such as states. But we didn't implement them because we'd need a proper React setup. Which wasn't added due to budget constraints.

Like I mentioned, this deliverable is bundled with a design process. For a company to adopt a design system and making it work requires some effort. In an ideal world, every designer would be comfortable creating mockups in HTML rather than using design software that produces static images. In an ideal world, the developers receive a HTML deliverable that needs very little tweaking. Business requirements would be based of the design system, rather than making a special case for every new feature.

My role

I led, designed and developed the design system.

I prototyped design explorations using the Atomic design system approach (to showcase it's versatility). I also prototyped a brand color generator tool to live alongside the design system.

Other responsibilities include:

  • helping ideate and design the initial homepage explorations
  • Presenting the proof-of-concept homepage designs to the clients and stakeholders.
  • Advocate the use of Atomic design approach for the design system.

This project is still ongoing and there are bits and pieces missing. Regardless of the state of the project I'm hoping this documents gives a better glimpse of my design process and thinking.

Don't hesitate to shoot any questions at: graz@live.se