Journeys

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

Sample plugin example which includes a journey of name, date of birth, National Insurance number and check your answers as an installable example.

First example

To integrate this with a current prototype you need to:

Install the example plugin

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

Import and add the routes to your routes.js file

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

// add the routes
journeyPluginExample(router);

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

An example prototype shows this plugin integrated.

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 first example the same format will allow it to become a plugin, and make it possible to connect the two journeys.

Install the alternative formats plugin
Terminal window
```
npm install github:dwp/alternative-formats-plugin
```

Import and add the routes to your routes.js file

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

const alternativeFormatsPrototype = require("alternative-formats-plugin");

alternativeFormatsPrototype(router);

Chain the plugins 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: /dwp-alternative-formats-plugin/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=/dwp-alternative-formats-plugin/start&alternative_formats_exit_url=/end",
        isStartButton: true
    })
}}