Chassis Design System

Role: UX/UI Design & Front-end Development

Link: arnoldclark.github.io/chassis/

Ever since a rebrand in early 2015, Arnold Clark had been developing a bespoke design system and component library called Chassis. Chassis was conceived as a way to promote consistency and quality across all of the company's digital products and services. Unfortunately due to an initial lack of components, core functionality and robust documentation, the design system was not being utilised by teams within the company and instead some were using off-the-shelf alternatives such as bootstrap

Goals

The design team decided to take ownership of the design system and component library with a view to fulfilling its purpose of providing consistency and quality across products. Some of our goals included:

• Determine missing core functionality.
• Identify reusable components and incorporate them into the design system.
• Keep accessibility at the forefront of our designs (AA WCAG standards).
• Communicate changes to the wider development team in an attempt to tempt them back to using our internal product.

Process

Determining what core functionality was missing from the chassis design system was carried out in two ways.

Firstly, the design team took the time to speak to developers on teams who had chosen to use a third party product when developing their applications. This highlighted a number of areas such as layout, modifiers (padding and margin classes) and poor documentation which could all be improved upon in our existing design system.

Secondly we looked to other companies' design systems to gauge the sorts of content that they contained. awesome-design-systems was a great resource of this. Some of our favourites included Salesorce’s Lightning Design System, IBM’s Carbon Design System as well as GOV.UK Design System.

All these design systems featured a robust set of components and detailed documentation including code code snippets. We agreed as a team that this should be the goal for Chassis going forward.

Taking stock

Once we had an understanding of some of the potential shortcomings of our current design system, we decided to take a look at our current systems and identify components being used and reused and any variances in design between the instances. We quickly identified several key components which were being used across digital products, a lot of which varied drastically in design between applications.

A collaborative approach

Taking these wayward components, the design team made use of downtime between projects to work on bringing consistency to the design of these components and add them to the Chassis component library. This approach worked well and in a short period of time, the design team were able to design, build and document most of the components previously identified, as well as a few new additions.

Accessible to all

During the design, development and documentation of the various components, the design team were committed to keeping accessibility at the heart of our design decisions. Specifically, this meant adhering to WCAG AA accessibility standards where possible. This meant ensuring colour contrast and sizing of typography was clear and legible at all times as well as ensuring we used the correct ARIA attributes while conceiving components to support those users of assistive technologies such as screen readers.

We also took inspiration from Government Digital Service guidelines and implemented best in class form design patterns.

Show and tell

Throughout the process of improving and developing on the Chassis platform, we were keen as a design team to not develop in isolation. This meant involving other members of the development team in key decisions. This helped foster a greater sense of collective ownership among the wider development team. Additionally, we regularly demoed changes and improvements to the wider department which helped demonstrate that the Chassis platform was now in a place where it could be strongly considered when creating new products and applications.

Outcomes

The team's work on Chassis was met with widespread praise by the department. The greater set of components and features as well as the more detailed documentation led to more and more teams turning to Chassis when starting new projects. Many teams also managed to retrofit Chassis into their existing projects and it is still being iterated and added to to this day.