Skip to content
Michael Christie
All work

AA Insurance

Ārahi design system

A connected suite of tools that lets teams collaborate and build digital products with consistency, scale and speed.

Client
AA Insurance
Year
2018 to 2024
Role
UX Design Lead
Discipline
Design systems, Design tokens, Leadership
Tools
Figma, Storybook, Supernova, React, Cypress, Percy, Contentful

Overview

One design language, from Figma to code

I set up the Ārahi project and oversaw the Figma library, design tokens, code quality, Storybook components, documentation and testing. The goal was for the organisation to deliver digital products consistently, at scale and quickly.

The UI sticker sheet: type, form controls, buttons, cards, icons and illustration.

Tooling

Built for each role

Designers, developers, testers and content editors each have tools suited to their job, connected so that a change flows through to every platform.

The connected technologies: Figma, Supernova, Storybook, React, Bitbucket, AWS, Cypress, Percy, Contentful and Adobe Experience Cloud.

Eliminate guesswork

Design tokens

Tokens carry colour, type and spacing between Figma and the code repositories, so the two never drift apart.

Colour and type tokens in Figma.
The same tokens exported as JSON for the code base.

Deploy with confidence

Testing built in

Regression, functional and unit testing support continuous integration, so components can change without breaking the products that use them.

An automated Cypress test running against the live site.