Agriculture Design System

  • Design Systems
  • Project Management
  • TypeScript
  • React

From 2021, I have been working on the Agriculture Design System (AgDS), for the Exports Service division of the Australian Department of Agriculture Fisheries and Forestry (DAFF). AgDS exists to support product teams who are building web applications that support agricultural producers sell their products overseas.

My role on the team is to design and build new components, patterns and enhancements for AgDS, in collaboration with product teams and in a manner that is consistent with the Design System's principles and guidelines. I also present AgDS to stakeholders and product teams across DAFF, and support product teams in adopting AgDS and frontend development more generally.

The component library is built using React and TypeScript. We use Storybook to test, document and showcase the components, in conjunction with the website. We also use 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.