Web Design

Canon Australia Design System

My Role
Web Designer
Timeline
Jan - Mar 2020

Current Challenges

After using the style guideline for a few years, we realised it’s hard to maintain and follow the guideline across the team when we creating content and designs. This was leading to inefficiencies in development work, discrepancies between visual design among products, and lack of consistency and clarity on the brand. I facilitated several workshops with designers, developers and product owners to identify problems we had on the current website. The improvement area could be simplify content tiles, consistent the button styles and specify the colour using rules, etc.

Goals

We set out to build and sustain a design system, encoded in HTML and CSS. The design system needed to create a visual language and foundational component library to support the Canon Australia website, each digital touchpoint and web applications complete with documentation available to internal and external partners.

Prioritise Components

We conducted a workshop activity within the wider team, including developers, program project leads, and design and UX to identify what parts the team would prioritise for this system.

This gives us the opportunity to explain our ideas from the designers’ perspective and also brings everyone on board and understand what our stakeholder most care about this project. Our emphasis in this process was to emphasize data collection and displays through normalisation of form controls and standardize UX patterns and best practices.

Design, Develop and Documentation

The process to make and maintain the Canon Design System required cross-functional collaboration. Using an agile approach, we set up sprints to include design critiques and regular reviews to keep tasks a manageable size and identify and address problems quickly.

First, I start working on set up typography, colours and styles using Sketch Nested Symbols
Then start with the core UI patterns and rules like Buttons, Forms, CTA banner, Feeds.
Finalise the components library and guideline with more UI elements, like iconography, layout, images, and writing.
Build and test HTML / CSS / JS for all variations of the components.

Next Steps

The design system is now under development, and we are planning to present it on a new webpage, make it easy to understand and use for internal and external.

We have big plans for the Canon design system continued growth. The library is built in a way that with new releases they can be easily adopted into products and we’re working to generate a backlog of new patterns and components to build.