HMRC GOV.UK Tax System — Interaction Design & Prototype Case Study

This GOV.UK interaction design case study outlines my work at HMRC designing and building a functional prototype to calculate tax submission deadlines. Using the GOV.UK Prototype Kit and Nunjucks, I created a working tax system prototype to support user research and digital transformation initiatives.

The challenge

HMRC required a working prototype to test a new digital tax submission journey involving share-related taxable income. The system needed to accurately record submission dates and dynamically calculate statutory deadlines.

Displaying accurate time-sensitive information during user testing was critical to ensuring users understood payment windows and late submission consequences.

The prototype needed to align with the GOV.UK Design System while demonstrating complex date logic within a simplified user journey.

I created a Gov UK prototype kit for a project with HMRC that enables users to submit taxable details on shares. This required a submission deadline so the date needed to be recorded and compared to 'todays date' to calculate if a payment is late.

Enabling the protoytype to display and use exact submission dates and times is very useful when testing with users.

My responsibilities

Working alongside IBM and HMRC’s internal UCD team, I was responsible for:

• Designing screen concepts aligned to the GOV.UK Design System
• Mapping complex tax submission journeys
• Observing and synthesising user research findings
• Building a working prototype using Nunjucks and GOV.UK Prototype Kit
• Implementing dynamic date calculations for realistic testing scenarios

The approach

To simulate real-world tax submission behaviour, I implemented dynamic date handling within the GOV.UK Prototype Kit using X-GOV filters. This allowed deadlines to be calculated relative to the current date and displayed in user-friendly GOV.UK formats.

1. Install X Gov Filters and interact with dates

For the project at HMRC I worked closely with the internal UCD team to create a new prototype for the project in Github and staged in Heroku. With all government projects the design must adhere to the Gov.uk design system. This ensures it is consistant and accessible to all.

To enable the prototype to record and present the date accurately I used the Gov UK Filters to help calculate and display a 1 month deadline to incorporated in the prototype. This GOV.UK Prototype Kit plugin adds helpful filters to Nunjucks templates. Rapidly modify and transform data while ensuring it follows the GOV.UK style guide

Using govukDate filter enables the current time or date to be retrieved by passing the special word "now" (or "today").

Input: You submitted your application at {{ “now” | govukTime }}.
Output: You submitted your application at 10:45am

Similarly,
Input:This page was updated on {{ “now” | govukDateTime }}
Output:This page was updated on 21 October 2021 at 10:45am

Then I used duration to calculate a time and date in the past to display when the page was last updated using - numbers.

Input:Page last updated at {{ “now” | duration(-2, “hours”) | govukTime }} on {{ “today” | duration(-1, “day”) | govukDate }}
Output: Page last updated at 8:45am on 18th November 2025

I could also create a deadline from today using duration with a positive number and a measurement of time.

Input: Your deadline is {{ “now” | duration(5, “minutes”) | govukTime }}
on {{ “today” | duration(1, “month”) | govukDate }}

Output: Your deadline is 10:50am on 19th December 2025

Below shows a selection of screenshots from the initial prototype that captures a submission date and displays the difference or time period with todays date.