Accent: ACC Pattern Library

Springload worked with ACC to establish a pattern library across each of their client facing products. The goal was to align the three main customer facing channels at ACC, their public website, business self service and client self service. Each of these channels had varying degrees of consistency, and alignment with the official branding contributed to inefficiencies within ACC and additional costs when establishing new products or services. For ACC clients the experience of using ACC services was wildly different which impacted the overall user experience.

Governance

It was essential that the ACC product teams had full transparency of the process. It was important for them to give feedback early on to highlight any concerns and considerations that would impact how they work.

We established regular guild sessions at the start of the project to provide visibility of the production, process and governance of the pattern library.

Process

We performed a series of process mapping workshops to understand how each of the three teams works and what their priorities are. This highlighted how decisions were made, what the biggest pain points were and any opportunities the team saw for the pattern library.

We then ran a series of design audits on the existing products to see the extent of variation within the design system. We did this by documenting each instance of foundational elements (such as typography, colours, spacing etc) and each example of common UI components, grids, breakpoints, images, icons, tone of voice, principles and logos. It was a lengthy process but helped uncover the extent of variation in each product.

Once each audit had been completed we had a clear understanding of the variation and similarities in ACC's design system. We worked through each category of the proposed design system in Figma to consolidate similarities and highlight differences that needed to be questioned.

Final product

The final pattern library consisted of two parts that enabled ACC's designers and developers to align the three main customer facing channels.

For ACC's designers: a robust Figma library shared within their organisation account, allowing all product teams to use the same base components and styles.

For ACC's developers: a component library in Storybook that contained all the documentation, code snippets and assets aligning with the Figma library.