MPI - Official New Zealand Pest Register

Size: an online search tool covering 25,000 pests and pathogens

Government status: Government Ministry

My professional status: contractor at MPI

Website client: Ministry for Primary Industries

Dates: September 2019 - June 2020

Categories: IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Responsive web design/dev, CSS-based layout, CSS3, HTML5, e-govt/WCAG compliance, ASP or ASP.NET, Government websites, Large sites

Brief: The Ministry for Primary Industries is responsible for export opportunities for our primary industries, improving sector productivity, ensuring the food we produce is safe, increasing sustainable resource use, and protecting New Zealand from biological risk.

I worked at MPI as UX designer, responsive web designer, front-end developer, e-govt compliance specialist and post-integration tester, designing and building a series of web-based applications and tools within the biosecurity sphere, under the umbrella of the PIER (Product Import and Export Requirements) project.

The PIER project's first application began life as the "Organisms Register", then became the "Pest Register" and was finally renamed just before launch as the "Official New Zealand Pest Register" or ONZPR.

The ONZPR is a searchable database of almost 25,000 pests and pathogens relevant to New Zealand, and includes general information about each pest, as well as specific details for researchers, importers, exporters and the general public. Initially it was divided into two parts - a search tool for NZ importers, including regulated pests and action upon interception; and a search tool for NZ exporters, featuring overseas quarantine pest lists and NZ Country Freedom Status information.

The ONZPR replaced a number of old MPI tools - BORIC (Biosecurity Organisms Register for Imported Commodities), UOR (Unwanted Organisms Register), and MPI's Country Freedom Status lists - and combined the data from these to form our initial database. This was a huge job in its own right, as the data was inconsistent across the different tools, and had to be reconciled and merged by hand.

I was responsible for the UX design, content design, responsive web design, front-end development, cross-browser and mobile device testing, e-government compliance and accessibility, and post-integration testing and QA.

Achievements:

Designed and built an online search tool that catered for the very wide range of personas and user types listed in the original specifications
Designed and built an online search tool that replaced a number of existing MPI tools - with no complaints from existing users who had no choice but to switch
Created a simple and clean interface that worked for everyone - regardless of their level of interest or expertise.

My responsibilities included:

Using Balsamiq to wireframe the UX for the search tool, tables of results and pest detail pages
Wireframing additional screens including action upon interception instructions for border inspectors and quarantine officers, and potential vector tables
Continually updating these wireframes as the team added functionality requirements, working through 23 iterations as we refined how the application would work and the scope of the project gradually expanded
The wireframes then acted as a blueprint for the design and build processes, and included functionality requirements and detailed instructions for the developer, as well as a full set of responsive screens shown at various breakpoints
Content design - writing the microcopy, introductory text and help text for the entire application
Working closely with the product owner, Udo Froetschl, to brainstorm and figure out some of the trickier functionality he wanted to include, and to wireframe our solutions
Working to solve a wide range of edge case scenarios from the product owner, which we needed to cater for in the finished product
Running fact-finding meetings with various expert-level MPI staff who would be using the new search tool - including Import and Export Advisers, Market Evaluators and Quarantine Officers - to ensure that I was incorporating the functionality they needed into my designs
Regularly presenting my wireframes to the rest of the team within the context of a group critique, requiring me to clearly explain each part of the process and allowing us to make ongoing improvements
Regularly presenting my wireframes to major stakeholders across MPI within the context of a show-and-tell presentation inviting feedback, requiring me to clearly explain each part of the process in order to ensure we were meeting their expectations
Close collaboration and consultation with the database developer, to ensure that what I wanted the search tool to do, could actually be done and made sense
Using HTML to quickly mockup various options and keep a strict eye on the design practicalities - for example the maximum number of columns that can be fitted into a responsive table
Using these mockups to push back on impractical requests - and finding an alternative solution instead
Attending bi-weekly standups and other meetings with the team, within an (informal) Agile working environment
Regularly updating our ongoing sprint records and bug-tracking system
Designing of the look and feel of the ONZPR, using the existing MPI website design as a starting-point
Tweaking the MPI design elements to give us more horizontal width (many multi-column tables of results to display) and with an improved level of e-govt compliance and accessibility
Focusing the design on a clean and minimal interface, where elements were logically positioned and easy to use, and as intuitive as possible
HTML5 and CSS3 build of the application using the existing MPI page templates (HTML and CSS) as a starting-point, writing a new override stylesheet for ONZPR to save time, designing and building new elements as I needed them
Improving and expanding the responsive behaviour of the templates, including giving us more horizontal real-estate at various breakpoints, multiple breakpoints for the layout of the search form, and resizing header and subheader text responsively
Providing the developer with a full set of HTML/CSS templates for the various page layout types, together with modal windows for help text and a print stylesheet
Extensive cross-browser and mobile device testing (screen and print) before I handed over my templates - using a combination of real devices and BrowserStack
Making as many improvements to the accessibility and e-govt compliance of the existing HTML/CSS as possible, within the tight time constraints of the project
Close collaboration and consultation with the application developer, reviewing the build as it progressed (custom .net build, based on my templates)
Post-integration testing and QA, working alongside our full-time website tester.

MPI ONZPR responsive screens in various devices

The ONZPR was an interesting challenge to design and build, not least because the initial specifications had identified nine different persona groups who had to be catered for, with 42 unique user types being listed.

This included MPI advisors, MPI border security officers, professional importers and exporters - plus the general public. A huge range of requirements and personas that needed to be covered in a single web search application.

It was also an interesting challenge because it was the first time that MPI had attempted to bring together the pest-related data from quite a wide range of sources, to create a database which would be the "source of truth" on all pest-related matters from then on. It replaced BORIC (Biosecurity Organisms Register for Imported Commodities), UOR (Unwanted Organisms Register), and MPI's Country Freedom Status lists and combined the data to create the first iteration of the ONZPR database.

My design, right from the very first wireframe, was simple, clean and clear. At its core the ONZPR is just a search tool. You tell it what you're looking for, it gives you the answer (or a range of answers) from a list of 25,000 pests and pathogens.

Once you've identified the one you want, the ONZPR gives you detailed information about that pest, including what to do if you come across it in the wild - whether you're a quarantine officer or Mrs Bloggs buying grapes at the supermarket. Clarity and simplicity of the interface is helpful for everyone, whatever their professional level of expertise or interest.

MPI - Official New Zealand Pest Register

Other MPI websites