Creating reusable task flows using GOV.UK Prototype Kit plugins

The biggest change I’ve seen since I started using the prototype kit was in version 13 introducing the ability to install plugins via npm.

Example of GOVUK prototype kit plugin install screen

This has opened up the ability to encapsulate functionality that would have been quite difficult to configure previously.

• XGOV filters shows how to expose common filters like date formatters
• common-templates shows how to expose page templates
• Step by Step shows how to expose a single component

The DWP frontend as a plugin auto-includes components, JavaScript, and styles.

Going from reusable screens to reusable flows

Now that we’ve shared components, templates, and filters, the next challenge is to try and share routing to make up parts of journeys. Most prototypes can be broken down into a series of stages.

Even if a prototype covers an entire service (and they can), it can still be broken down into stages. For example, a prototype of a form relating to employment benefits might have the following stages:

• Eligibility
• About You
• Contact Needs
• About Your Employment
• Bank Details
• Complete

A lot of the time when prototyping, the user researcher will be testing a change to a stage, not everything all at once.

As a frontend developer being able to hand over packaged code to multiple designers without having overburdening documentation means I can help designers quickly compose parts of journeys without having to cut and paste a large amount of code.

This also means there is a way to update and maintain the code in a structured way.

I’ve seen several instances of prototypes with outdated code snippets that have made their way into production.

As an aside, with support from a design system team making plugins and templates — designers and researchers in teams can benefit from:

• Better compose nonlinear journeys with patterns like task list
• Rapid prototype fuller prototypes for feedback
• Have a source of truth to test the same journey across multiple prototypes
• Higher fidelity of code, for something like find an address

Example 1: Simple journey

I’ve made a small plugin example which includes a journey of name, date of birth, National Insurance number and check your answers as an installable example

Example of a prototype kit flow using a plugin

To integrate this with a current prototype you need to:

npm install github:htmlandbacon/govuk-prototype-kit-journey-plugin

Then add the routes to your routes.js file

// import the routes
const journeyPluginExample = require("govuk-prototype-kit-journey-plugin");

// add the routes
journeyPluginExample(router);

Once running you can access the start of the journey by hitting the url

/journey-plugin/start?journey_plugin_exit_url=/end-page

This will redirect you from the ‘check your answers’ page to /end-page

I’ve made an example prototype that has this plugin integrated.

Example 2: Alternative formats

Looking at the choosing alternative contact formats pattern, you need to put in place quite a bit of routing to get this working.

Following the approach I used in example 1 the same format will allow it to become a plugin, and make it possible to connect the two journeys.

You can use the following steps to use this plugin:

npm install github:dwp/alternative-formats-files-prototype

Then add the routes to your routes.js file

// Add your routes normally this would be routes.js

const alternativeFormatsPrototype = require("alternative-formats-files-prototype");

alternativeFormatsPrototype(router);

We can now chain the plugins, so the first plugin exits to the second plugin and the second plugin returns to the end.

{# example of a start button #}
{# exit of the first plugin: journey_plugin_exit_url= #}
{# start of the second plugin: /alternative-formats/start #}
{# exit of the second plugin: alternative_formats_exit_url= #}
{# end of the journey: /end #}
{{ 
    govukButton({
        text: "Start now",
        href: "/journey-plugin/start?journey_plugin_exit_url=/alternative-formats/start&alternative_formats_exit_url=/end",
        isStartButton: true
    })
}}

Next Steps

I need to do some work to understand what people might want to override or modify to provide better examples of how to make changes.

A couple of suggestions would be:

1. How to override a current route
2. How to disable parts of the journey
3. How to use parts of the journey outside of the plugin
4. Managing updates to the plugin

Huge thanks to Vicky Teinaki for the edits.