Timeline

[HelenOsg]

What

A list of actions shown in chronological order. For example, claim history.

Example: Find a job

Example: Access to work

Why

To show agents a history of the claim/claimant.

Anything else

The timeline pattern is currently in the GDS backlog and a number of departments have a timeline component being used. There is no standardised pattern across departments. The DWP timeline component has been in use for 2 years.

Timeline appears in many other gov design systems (HMRC, Home Office and MOJ).

Research

• User type: Agents
• Accessibility: Tested on JAWS, Dragon, Zoomtext and Read&Write

Services

• Bereavement Support Payment
• Access to work
• Prepare for Universal Credit
• Support for Mortgage Interest
• NSJSA

Code

HTML

```html

Claim history

1. Claim disallowed

   Claim disallowed by John Smith 1 January 2018 at 13:02

   Claimant over state pension age.

2. Marriage verified

   Marriage verified by John Smith 1 January 2018 at 13:21

   Marriage certificate uploaded to DRS.

[HelenOsg]

https://github.com/alphagov/govuk-design-system-backlog/issues/105

[HelenOsg]

https://hmcts-design-system.herokuapp.com/components/timeline https://moj-design-system.herokuapp.com/components/timeline https://design.tax.service.gov.uk/hmrc-design-patterns/timeline/ https://design.homeoffice.gov.uk/components/timeline

[HelenOsg]

[HelenOsg]

Decision log for DWP Design System working group review session

Date: 26/1/2021

Reviewers

Emma Nicol – User research Craig Abbott – Accessibility Steven Borthwick – Interaction design Martin Wake – Content design Colin Oakley – Front-end development Daniel MacLaughlin – Product owner

Facilitator:

Design system team Jon Hurrell Helen Osgerby – note taker Simone Duca

Based on a majority vote, the group decided that:

The contribution can be published as it is, although guidance should be updated with information on best practice and look at revising ‘when not to use’.

Guidance

Guidance should include number of items to be shown (can we get research from team’s using the pattern) and suggest other design solutions in the ‘when not to use’ section’. Include that this pattern has only been used and research on agent-facing services in the ‘research’ section.

Design

Review design and code.

Next steps

• Decide if agent-facing patterns need a tag
• Update guidance page
• Publish on design system
• Design system team to reach out to community for further examples

[jonhurrell]

This has been published on the design system. If you have any research insights or have used the pattern, let us know on the GitHub discussion.