Design notes
A version of the Timeline component has been in use in DWP services since 2018. There was already a Timeline pattern in the GOV.UK Design System backlog and versions had also been developed for the HMRC, Home Office and Ministry of Justice (MoJ) design systems.
There was no standardised pattern across departments or within DWP. In 2021 we started work to develop a standard Timeline component.
Design goals
The goal was to develop a standard component that could be used in multiple DWP services, saving time and making the user experience more consistent.
The need for a simple way of representing events in a time series was demonstrated by the fact that timeline components had been independently developed by several DWP teams as well as in other government departments.
What we did
With a working group we reviewed six existing Timeline patterns from across DWP.
Timeline example from the 'Find a job' service (DWP)
Timeline example from a prototype screen of the 'Access to work' service (DWP), with fictional data
The resulting design was intentionally simple, with no interactive elements: we wanted it to be clear that the Timeline was a display element, not a functional navigation element.
The DWP timeline component as originally published
Adoption challenges
Although the timeline was adopted in several services, we found that teams preferred the Ministry of Justice timeline component. We set out to understand why this was, with the goal of updating our own component to better meet designers' needs.
Through workshops and discussions with teams using timelines, we found three main areas for choosing the MoJ version over the DWP component.
Interactive elements
The MoJ example allowed detailed descriptions, buttons, and the ability to hide and reveal text by utilising the details component, bulleted lists, and icon lists. We needed to decide which of these elements (if any) we would adopt and support.
Colour contrast
The event entry text's poor colour contrast was a significant issue. Users, especially agents with lower quality screens, struggled to see the text styled in the $govuk-secondary-text-colour. In contrast, the MOJ timeline offered a better presentation using $govuk-text-colour throughout, enhancing readability and the user experience.
Presentation of data
The format of the event entry presentation needed to be more consistent: for example, the entry title, including the byline, followed by the date and time. We decided that we needed to develop a more cohesive, clear, opinionated and consistent presentation.
2024 update
The new version of the component was released in September 2024 and was included in DWP Frontend version 3 and later. The main changes were:
- events can now include links and descriptions
$govuk-text-colourreplaces$govuk-secondary-text-colourfor improved contrast- date is now shown first and aligned to the timeline marker
- there is an end marker to show the end of the timeline (below the earliest event)
The updated component with new data format, better contrast and interactive elements
Allow links and descriptions
Events can now include a short description, and a link to another page with more detailed information. This was one of the most requested features by design teams.
The MoJ timeline component allows a range of interactive elements to be included in a timeline entry, including buttons, lists and Details components. We decided to restrict this to a description and a single link, to maintain the Timeline's main function as a record of events rather than a framework for a full user interface.
Allowing designers to link away from the timeline enables the user to dig into more detail of an entry where needed, without too much disruption of the simple visual layout.
More legible font colours
All the content in the updated timeline is styled in $govuk-text-colour for greater legibility.
Order of elements
The order is now:
- Date
- Title
- Byline
- Description
The previous order was:
- Title
- Byline
- Date
By putting the date first and aligning the marker to the date, we make it clear that this is how the timeline is organised, while still prioritising the title by giving it more emphasis.
End marker
The timeline itself now includes a marker to show the end of the timeline (below the earliest event).
Get support
Need help implementing this in a prototype or production build? Get support from the Design System team.
Give feedback
We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.
Could we improve this page?
Send questions, comments or suggestions to the DWP Design System team.
Last updated: