Back

Agriculture Design System

  • Design Systems
  • Project Management
  • TypeScript
  • React

In late 2021, I joined the Export Service division of the Australian Department of Agriculture, Fisheries and Forestry. The Exports Service exists to support Australian agricultural producers in selling their products overseas.

I was brought on to build the Agriculture Design System (AgDS), which supports the product teams in building consistent, accessible and user-friendly digital experiences.

I played a part in building the foundations of the Design System, and in developing more than 60 highly-accessible components, patterns and templates.

As a member of the Design System team, I was responsible for the ongoing maintenance of the Design System, including the development of new components and patterns, in collaboration with product teams and in a manner that is consistent with the Design System's principles and guidelines.

My role also included community engagement and growing the culture around the Design System. This includes the facilitation of design and development guilds, presenting AgDS to stakeholders and product teams across DAFF, and support product teams in adopting AgDS and frontend development more generally.

One of my proudest contributions was introducing “Design System Team Office Hours”. This inititve aimed to reduce the friction felt in supporting a fully remote team, and grew the relationships between the Design System team and the product teams.

The Tech

The component library is built using React and TypeScript. We used Storybook to test, document and showcase the components, in conjunction with the website. We also used Playroom to enable co-design with Designers and Developers, using the actual components rather than static mockups.

Accessibility is a core pillar of this Design System. As a Government agency, we are required to meet the WCAG 2.1 AA accessibility standard. We have a strong commitment to inclusivity, and we are working to ensure that AgDS is accessible to all users, including those with disabilities. In 2022, an independant accessibility consultant conducted an accessibility audit of AgDS. They deemed it to be not only WCAG 2.1 AA compliant, but also as an exemplary implementation of an accessible React-based Design System.

You can hear more about the project in this video on Thinkmill's YouTube channel, where I talk about the project with my colleague, Jordan Overbye.

Read more about the project in this case study on Thinkmill's website.