Canon Australia Design System
This project is about to revisit Canon Australia current website, including UI pattern library and Style guide, transform it into the best practice design system build from coding.
Challenge
After using the style guideline for a few years, we realised it’s hard to maintain and follow the guideline across the team. This was leading to inefficiencies in development work, discrepancies between visual design among products, and lack of consistency and clarity on the brand. Here is some example of the problems we had:
-
Amount of variation on tiles
-
Too many different button styles
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.
Design Process
-
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 normalization 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.
-
Set up typography, colours and styles using Sketch Nested Symbols
2. Start with the core UI patterns and rules like Buttons, Forms, CTA banner, Feeds.
3. Finalise the components library and guideline with more UI elements, like iconography, layout, images, and writing.
4.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.
No Comments
Comments are closed.