On Wednesday we printed all the start pages on GOV.UK onto a big sheet of paper so we could get a better look at them. It turned out to be really useful, so I thought I’d write about why and how we did it.
Why we did it
Start pages have a lot of work to do. They need to quickly and easily describe the transaction, who can use it and what’s involved. They also need a nice clear call to action for people who just want to get started.
We don’t always get it right so we wanted to look at all of our start pages and see if we could spot any good or bad content patterns. Printing them all out let us do this really easily.
The results were detailed enough that Rebecca and I could read all the words, but we could also step back and see all 273 pages at once. We could see at a glance which pages were too long, which ones had the action button too far down and which ones had been badly named.
They were ordered alphabetically by page title, which meant pages with the same starting verb (‘Apply…’, ‘Find…’, ‘Cancel…’ etc.) were clustered together. We’d not planned for this, but it gave us a lot of insight into the kinds of transactions we have and how we talk about them.
Also, big things on walls are a discussion magnet. We had people stop by all day to take a look, and uncovered more than one related piece of work happening elsewhere in GDS.
So that’s why we did it. If you want to do it too, read on.
How we did it
1. Get the URLS of the pages
Luckily, because of the way our publishing platform works, Kush had pretty much generated the list of URLs before I’d finished asking him for it.
2. Generate the screenshots
We fed the list into the free Paparazzi! screen capture software. It spat out all the screenshots into a folder.
3. Crop the footers
GOV.UK has a big, grey footer. You don’t need to see this 273 times. It would have wasted loads of ink too.
Rather than wrestle with Photoshop we used the command-line based ImageMagick to crop off the last 930px of each image. ImageMagick is really good at this sort of stuff. This is the command we used:
mogrify -crop +0-930 +repage *.png
4. Stitch all the images together
We also used ImageMagick’s ‘montage’ command to make a new image with all the pages on it, like this:
montage *.png -geometry +40+40 -tile x6 -gravity North montage.png
That’s basically saying: “Take all the PNGs in this folder and make a 6 row, top-aligned montage of them, with 40px margins round each image”.
5. Print it out
This was the hardest part. The final image was about 40MB and we struggled to get the plotter to accept it. In the end we halved the dimensions and converted it to grayscale to get the file size down.
If you don’t have a plotter then ImageMagick will happily generate a series of A3-sized images instead.
We'd like to run some analytics on the pages and then re-order the images. For example, if we order them by the proportion of users who click on the action button we think we might learn something about what makes an effective start page.