On this page:
  • Overview
  • Challenges
  • User Interviews
  • Starting small
  • Breaking it up
  • Info for users
  • Single entry point
  • Section templates
  • Modular forms
  • Summary

Overview

WorkSafe is New Zealand's regulator of workplace health and safety.

I was part of WorkSafe's "Digital Transformation" team. Our job was to move the agency's paper-based processes into Microsoft Dynamics.

Our initial focus was building online services for reporting incidents or breaches, and applying for licences and authorisations.

My role UX/UI Designer
My Tasks
  • Wireframing
  • Hi-fi mockups
  • Interactive prototypes
  • User interviews
Tools
  • Figma
  • Miro
  • Gather Content

Challenges

So many forms! - Our project covered several areas of the agency and multiple types of notifications, applications, and authorisations. This meant that we had to design and develop dozens of online forms and processes.

A better user experience - The project gave us the chance to review and improve the current state of WorkSafe's services. We kept our eyes peeled for ways to provide a better user experience.

User Interviews

We interviewed several people who had been through the paper-based certification process. Our goal was to identify user pain-points and potential improvements. Some key insights included:

  • Confusing process - Users felt the application process lacked transparency. They were often unsure about timelines or next steps in the process.
  • Submitting evidence - the paper-based system made it hard to submit or update documents like work experience or qualifications. There was a big opportunity here to help users manage their documents online.
  • Information overload - Users felt the forms were sometimes complex and difficult to understand. We aimed to make the forms simpler, use plain language, and guide users through the process.

Starting small

Design mockup of an online form that allows users to submit a PDF notification to WorkSafe
Form allowing users to submit a PDF notification online

"Think big, start small, learn fast". That was our mission statement.

So that's what we did. We started small. We identified the services that were critical for WorkSafe and commonly accessed by users.

Rather than translate existing PDF forms to the web. We created a process where users could download the PDF, fill it out, then upload it to be processed.

This was a quick win. Getting applications and notifications into our system with very little research or development time. It also allowed users to avoid the slow and tedious process of mailing forms.

Breaking it up

Design mockup of an online form that depicts one step in a longer process
The 'site details' step of an application form

The next step was translating the PDF forms into web forms. We used this opportunity to address some of the issues we found during the user interviews.

To remove complexity for users, we separated the forms into smaller chunks. Presenting one step of the process at a time.

For each step, we kept the pages clear and uncluttered, used plain language, and focused on one simple task.

Info for users

Design mockup of a submission confirmation page with info for users about the next steps of the process
Info at the end of an application process

After the form is submitted, we display information about what is coming up next in the process and what users can expect.

Single entry point

screenshots of the WorkSafe website depicting various links to application forms
Multiple entry points across the WorkSafe website
Design mockup of a page that allows users to select from all available application types
New design for a single entry point

As we delivered the first sets of forms, we began to notice repetition and room to be more efficient in our approach.

Each application form had its own link or section on the WorkSafe website. We wanted to create a single, unified entry point for users. From this page, users could choose the cateogory and type of service they wanted to access.

Section templates

Design mockup of a reusable form template
Reusable section template

Another issue was the duplication of sections across multiple forms. For example, many forms included a 'Personal details' section, each with only minor differences.

Because these sections were so similar, we were basically building the same section across dozens of forms (a lot of repeated work).

Whenever we recognised similar sections across the forms, we created generic templates. These 'white label' sections can be dynamically populated with different titles and details. This allowed us to reuse them multiple times.

Modular forms

Design mockup of a form built using modular sections
Modular form built using section templates
Diagram of three modular forms. Different sections of each form is pointing to the same section template
Three modular forms referencing the same section template

Building on the concept of section templates, we created 'Modular forms'. Each step in these forms points to a self-contained section template.

This allowed us to slot in section templates like lego bricks. We could mix and match previously built sections, rearranging the order if we needed to.

If a form required a new or unique section, it was easy to build a new template and slot it in at any stage. Any new templates could then be reused in other modular forms too.

Summary

Outcomes - Our modular system was a lot of work upfront, but it streamlined the process for subsequent WorkSafe regimes. It allowed us to focus on new issues, rather than solving the same problem over and over again.

What did I learn? - Sometimes you need to pivot during a project. The right approach might not be obvious at the outset. I'm glad my team had the confidence to make adjustments early, rather than committing to the "sunk cost" of work completed to that point.

Next steps - The next phase of the project involved creating a more complete self-service experience for WorkSafe users. We planned to create a dashboard where users could manage their certifications, store documents, and receive communications from WorkSafe.

Previous
UI for content management
Next
Site search