Prototype versioning, namespacing design systems, discussing a header component

Versioning prototypes, design system bits and article updates.

Versioning prototypes

In the past 12 months I’ve created 5 different prototypes using the GOV.UK Prototype Kit. At times, due to the rapid pace of iteration, I’ve not been the most hygenic when it comes to versioning.

That means different versions sometimes share layouts and different journeys where the journeys have been developed in separate sprints.

And on one particular prototype where we are using a lot of data to make things realistic, I decided to use Git to version things which makes it harder to go back in time to see what things looked like.

But with the pace slowing down recently, I’ve managed to get some time to tidy things up. I now use one folder per version making it easier to keep separate and iterate.

The only exception to that is for NPM dependencies like GOV.UK Frontend and our own HMCTS Frontend. I’m not sure of a good way to handle this, but luckily there’s few major updates that make previous versions change or break.

One less than ideal idea I have floating in my head is to just spin up another prototype altogether if one of those dependencies has a major update.

Oh I’ve started to follow the guidance in Eliot Hill’s article on documenting iterations in the GOV.UK Prototype Kit where up to now the prototype itself has been light on what’s changed and why.

Namespaced HMCTS Frontend

This week I updated HMCTS Frontend so that the components are namespaced according to the agreed x-government conventions.

// Before
{% from “badge/macro.njk” import hmctsBadge %}

// After
{% from “hmcts-badge/macro.njk” import hmctsBadge %}

Making it easier for everyone to use and contribute to the GOV.UK Design System

I took part in a remote retro with the aim of making it as easy as possible for everyone to use and contribute to the GOV.UK Design System.

As usual, Amy facilitated a fun, focused and productive session. I always look forward to these and I think we got some really good ideas out of this to explore.

Design System catch-up call—department headers

We talked about headers—for citizen services and internal services across departments. There’s a lot of different designs floating about which I’m sure we can consolidate.

Headers aren’t simple. They need to be able to accomodate a number of elements some of which will not be needed. Things like department logos, service names, account navigation, primary navigation and search.

When we designed the HMCTS internal header we basically shoved all of this onto a small screen and did our best to take up as little space as possible without hiding things behind a hamburger menu (or equivalent).

I’m really looking forward to seeing what we can do across departments on this.

Article updates

I finished my article on semantic HTML and ARIA and CSS Tricks have scheduled it for early May. So looking forward to sharing this one.

I shared my first case study to the world about designing the HMCTS Design System and I got a lot of nice feedback on it.

And I’m still working on my article about the problem with web components. Hopefully that will be ready to go out by the end of May.