Quiver

We’ve spent a long time working toward a situation in which all of the designers in the NHS App team prototype in code. Today, when it comes to interaction designers, we’re there – and we rejoice.

Working this way means our prototypes perform better in research and are more accessible. Designers get a clearer sense of how the features and services they’re designing really behave. We build a stronger bond between designers and developers. All very good things.

There are, however, some drawbacks. One annoying problem this way of working introduces is that we now need to figure out a new way to create decent overviews of the things we’re designing. Some sort of flow map is a useful artefact for having discussions, for planning analytics work, and for just stepping back to take stock. That used to be relatively straightforward work – the screens were all sitting there in Figma and you could just draw arrows between them. Now, we don’t have a complete representation of what we’re making anywhere but the code itself. Does that mean people need to maintain a parallel Figma version? Do people need to take loads of screenshots, paste them into Mural, and then add all the needed arrows and labels to explain how things relate? That is a lot of work. That would suck.

Manually recreating a map of your prototype in a different tool is a hassle and tends to degrade quickly. The moment you change the code, the map is wrong and you now need to recreate the change somewhere else. It is a never-ending chore.

So I made a thing.^[1]

Quiver is a command-line tool for mapping prototypes automatically. It works for web-based prototypes that are made using the NHS prototype kit along with prototypes made for iOS (SwiftUI) and Android (Jetpack Compose). It has a few modes – static analysis, script-driven, and a manual recorder (that last one is web-only) – and while it is tuned for our team’s prototypes, it should also work reasonably well for things made with the gov.uk prototype kit. For other native apps, tbh I have no clue how it will perform.

The basic idea is that you point it at a folder and it spits out a map – it captures screenshots, creates a graph of how screens relate, and ties it together into an interactive mapping layer. It has a bunch of configuration options (especially useful for static analysis, which often requires some pruning), outputs Mermaid diagram code by default, has its own syntax highlighting theme, and is built to be as accessible as a Javascript mapping tool can be. The best part though is that since the map is generated directly from the prototype, keeping it up-to-date is dead easy. When you change your prototype you can just re-run Quiver and you’re done; the map is current again.^[2]

The next step is turning it into a tool for teams to collaborate around, which shouldn’t be too hard. Quiver already has its own little server and if I can get it integrated into the NHS’s SSO, we can put together a stable and secure space for teams to share maps. After that, commenting and versioning should follow nicely.

The tool has grown steadily over the past few months as new situations have emerged (read: when new people tried it and broke it^[3]) but I think it has reached something like a stable 1.0 level. Hopefully this is useful to other people, and if you try it (and probably break it), please let me know!