HMRC — Web Design Case Study

This web design case study outlines my work at HMRC in Leeds. I built a functioning prototype to aid user tests and calculate the all important tax deadline dates.

The challenge

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 at HMRC on a large-scale transformation initiative focused on modernising and digitalising legacy systems and processes. I was responsible for designing concepts for the screens, mapping journeys, observing user testing and building the prototype using nunjucks.

The approach

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.