MPI - Official New Zealand Pest Register in SilverStripe

MPI - ONZPR in SilverStripe

Website: onzpr.mpi.govt.nz

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: April - October 2022 launch date. Post-launch upgrades October 2022 - January 2024

Categories: IA & UX, Website designer, Front-end developer, Writing for the web, Responsive web design/dev, CSS-based layout, CSS3, HTML5, e-govt/WCAG compliance, SilverStripe, 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.

In June 2020 we had launched the PIER project's first application - the Official New Zealand Pest Register or ONZPR. In 2022 the team decided that we should update the ONZPR and integrate it into the SilverStripe CMS to join PIER Search, which was being designed and built at the time.

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.

Feedback from users since launch had suggested the need for a new section - Pests of Concern to NZ - containing information on all pests and pathogens that can affect plant, animal or human health in New Zealand. The Pest Register for Importers would be modified to reduce the number of search criteria and results table display columns, and the Pest Register for Exporters would remain fundamentally unchanged. All three sections, once moved into the SilverStripe environment, would be accessible for updating by web editors, rather than by the web developer.

I was responsible for the UX design, responsive web design, front-end development, cross-browser and mobile device testing, e-government compliance and accessibility, and post-integration testing and QA. My WebWeaver colleague Tom St George did the SilverStripe integration.

Achievements:

  • Took the opportunity to make improvements to this web-based tool 10 months after launch, based on feedback from users and from our systems analyst
  • Provided updated wireframes to guide our new SilverStripe developer as he integrated ONZPR into the CMS for the first time
  • Improved the accessibility and e-govt compliance of the HTML/CSS, as I wasn't happy with the levels we had achieved for the original ONZPR and knew we could do better - by the time I'd finished we were at gold star level with WebAim, WAVE, AXE and Cynthia Says.

My responsibilities included:

  • Using Balsamiq to update the UX wireframes to match the current build, as a few modifications had been done since launch that hadn't been wireframed
  • Meeting with senior team members to find out what other new features and elements they wanted to include in this updated version of ONZPR, and what changes I needed to make to the existing build
  • Wireframing a set of screens for the new Pests of Concern to NZ section, and updating the Imports and Exports wireframes to match the new requirements
  • Continually updating these wireframes as the team added functionality requirements, working through four additional 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 CMS integration processes, and included functionality requirements and detailed instructions for the developer, as well as a full set of responsive screens shown at various breakpoints
  • Writing and/or updating the microtext, introductory text, and help text across all pages and templates
  • Working closely with the product owner, Udo Froetschl, to brainstorm and figure out some of the trickier new functionality he wanted to include, and to wireframe our solutions
  • Working to solve a range of edge case scenarios from the product owner, which we needed to cater for in the finished product
  • 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
  • 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
  • Updating of the look and feel of the ONZPR design to incorporate the new elements and other changes, plus improvements I wanted to make to the UX
  • Updating my HTML templates to incorporate the new elements, and also to more closely mirror the structure our developer was already using for the PIER Search templates in SilverStripe
  • Completely revisiting the accessibility and e-govt compliance of the HTML/CSS, as I wasn't happy with the levels we had achieved for the original ONZPR within too-tight time constraints and knew we could do better - by the time I'd finished we were at gold star level with WebAim, WAVE, AXE and Cynthia Says
  • Providing the developer with a full set of fully accessible HTML/CSS templates for the various page layout types, together with modal windows for help text and an updated 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
  • Close collaboration and consultation with the SilverStripe developer, testing and reviewing the build as it progressed, and providing feedback and bug fixes
  • Post-integration testing and QA, working alongside our full-time website tester until her contract finished, and then taking over testing myself, working directly with our SilverStripe developer to get everything perfect before launch.

MPI ONZPR responsive screens in various devices

It's always a good plan to revisit a new website some months after launch, and obtain feedback for improvements from both internal and external users. With ONZPR, this opportunity came about in combination with the team's decision to integrate ONZPR into SilverStripe, joining the new PIER Search tool which was being integrated at the same time.

Our systems analyst - who took care of and updated the ONZPR database - provided feedback from users who felt that the Pest Register for Importers needed tightening up and refining - and that there was a need for a new section - Pests of Concern to NZ - for users who were neither importers nor exporters.

I began the new set of wireframes with an update to match what was currently live - as there had been a gap of a few months after ONZPR was launched when I wasn't working on the project, and a few changes had been made during that time which had not been wireframed. Once my wireframes matched the build I was able to consult with the systems analyst, product owner and business owner to identify the other additions and improvements they wanted to make, and to wireframe these ready for the SilverStripe developer to use as his blueprints.

At the same time I updated my designs to incorporate the new features and also to reflect a few styling updates I'd made during the PIER search design and build. I wanted everything to match and be consistent across all the tools in the PIER family.

I also took the opportunity to completely revise and improve the accessibility and e-govt compliance of the HTML/CSS. This included a complete review of the CSS stylesheets I had inherited from the MPI website, and a wholesale replacement of px by ems for font sizing in order to pass the high-benchmark Cynthia Says accessibility tests.

We launched SilverStripe versions of all four PIER tools - PIER Search for Imports, PIER Search for Exports, ONZPR, and PBI - on the same day in mid October 2022.

Post launch upgrades, improvements and a few fixes

Once the four PIER tools had been successfully launched, we switched our attention to upgrades and improvements. I had a mental list of all the nice-to-haves that we had wanted to include in the new iteration of ONZPR, but which we had had to put on hold due to time limitations.

I compiled an "upgrades" set of wireframes for the team, that contained screens showing all the improvements and embellishments we'd discussed and explored during the design and build process, but which we hadn't yet had a chance to implement. I then created a matching spreadsheet listing all the possible upgrades across all four PIER tools, with a summary of what needed doing, a time estimate for each, a grading for level of importance, and an indication of which members of the team needed to be involved. I also included one or two fixes I had identified needed doing, where the interface was not quite behaving as expected, and could be improved.

I shared this spreadsheet with the team, and together we decided on a priority list for fixes and upgrades, which Tom and I set about working through in the first instance. Other team members were brought on board as needed. I kept the spreadsheet updated so that we could track our progress and see what still needed to be done. As blocks of work were completed they were published to the live site and the wireframes updated to match.

We continued this work - and also some preparatory work for Stage 2 of the PIER project - until January 2024. In February and March we discussed ongoing SLAs and SOWs with the new product owner, at which point the project was put on hold due to budgetary restrictions.

Other MPI websites