design systems and a refreshed NRMA user experience

building new workflows and redefining the NRMA web and app experiences

project background

The National Roads and Motorists Association serves more than 3.6 million Australians and in 2023 was midway through a website migration and redesign but was facing challenges with the build. I was hired to lead the development and adoption of a design library that would speed up delivery and provide a scalable design function to the business for future initiatives.

Client
NRMA

Period
2023-2024

Sunset over the ocean with rock formations and cliffs along the shoreline.
Screenshot of the NRMA website homepage featuring navigation links, a banner with a smiling woman in a car, and options for roadside assistance, travel, rewards, and other services.
Webpage titled 'Best Value Car Awards' featuring a blue MG3 car in the center, with additional cars in the background, and navigation options such as Road trips, Destinations, Advice and how-to, Car reviews, and News.
A user interface design tool showing multiple button variants with different styles and colors, along with configuration and editing panels for customization.

auditing and systemising agency deliverables

The work began with a comprehensive audit and review of more than 100 agency-delivered assets spanning over 80 page layouts.

From this review, a structured library of reusable components was created, drawn directly from the assets the agency had supplied. These components were then used to build a companion library of page layouts, giving the team a consistent, ready-to-use foundation that reflects the agency’s original design intent while making it easier to scale and maintain.
A digital wireframe or layout design of a website or app demonstrating various components, sections, and elements such as header, cards, images, text, buttons, and icons arranged in columns and rows across the page.

growing the NRMA component library

With the foundation in place, the focus shifted to consolidating project work into a single NRMA component library. This included supporting the agency on the Open Road designs and component builds, then migrating all Open Road project assets into the library and auditing and playing back the 16+ delivered Open Road page layouts.

Cashback project assets were migrated in the same way, and new icons from the marketing team were added to keep the library current. To demonstrate its flexibility, a sample of five or more content hub page layouts was produced entirely from NRMA library components.

supporting teams and enabling adoption

Alongside the design work, ongoing support helped teams put the system into practice. Design documentation was kept up to date, and hands-on development support was provided for current build tasks to ensure designs translated accurately into code.
New users were onboarded to Figma, and training was delivered to development teams so they could work confidently with the components and layouts, strengthening collaboration between design and development across the organisation.
A digital abstract art composition featuring a series of white, donut-shaped rings arranged vertically with varying shadow and lighting effects, set against a light gray background.
Close-up of computer code in a circular frame, showing CSS padding properties such as 'padding-H-0.5em', 'padding-left', 'padding-right', 'padding-top', and 'padding-bottom'.
Virtual meeting with multiple participants in different settings, some with headphones, in a grid layout, with one participant's video turned off.