Next MQS
Improving the interoperability of NextDoc and Modern Quota System.
My Role
As the interactive designer at the Department of Agriculture, I led the integration effort between Modern Quota System and NextDoc. My key responsibility was creating a functional proof of concept that demonstrated the integration points and user flows, helping both teams understand the requirements and establish consensus.
Overview
This project focused on improving the integration between Modern Quota System and NextDoc, key components in Australian government's exports service. The challenge was effectively communicating the requirements of the Modern Quota System's specialised complex trade application to a much larger system while keeping the user's benefits clear.
The Challenge
The Modern Quota System manages a niche aspect of trade regulations. One of our primary challenges was effectively explaining these specialized requirements to the NextDoc team, whose platform serves a much broader audience of Australian exporters.
The niche complexity lies in trade quota management. The Modern Quota System tracks quota for 6 different international markets and 65 distinct commodities, each with their own unique requirements and regulations. This creates a complex matrix of scenarios that exporters might encounter, making it challenging for outside teams to fully grasp without specialized domain knowledge.
Visual showing the complexity of different markets and quota types
The Approach
Before writing any code, I partnered with design colleagues to create mockups using the Agriculture Department's design system. We held collaborative design jam sessions in Mural to iterate on concepts and map out potential improvements.
Some early designs, where we established the opportunities.
Technical Approach
- Built using React
- Used Tinybase for data storage
- Implemented local storage for generating representative test scenarios
- Focused on showcasing variations across different market experiences
I chose React specifically because the Agriculture Department's design system was built with it, allowing me to leverage existing components and patterns directly. The prototype implemented a progressive disclosure approach, showing only sections relevant to the exporter's request and adapting based on their choices in the flow.
Screenshot of the React prototype showing key functionality
Design Refinement
I presented the initial prototype to the Agriculture Department's design guild, which provided valuable input on several design patterns:
- Table row selection mechanics
- Sidebar navigation improvements
- Introduction of previously unknown components
One significant challenge we addressed was how to best utilize the selectable table component, which allowed for batch changes to rows. I proposed a pattern where users could select multiple items and then apply a single value to all selections simultaneously.
Videos explaining a proposed improvement
Results
The NextDoc team received the presentation well. The presentation clarified the integration requirements in a way that traditional documentation couldn't have achieved. Their developers reviewed the prototype in detail, and this further clarified the requirements.
- First integration feature is already being implemented
- Established an iterative approach for subsequent improvements
- Created artifacts that clearly demonstrate the benefits of each proposed change