GDS' mission is to design and protect the user experience of government. GOV.UK is not only used by 11 million users each week, but also by over two thousand civil servants to publish information in more than 700,000 pages.
This means there’s a lot of content on the site, with thousands of items edited and published every week. This content includes critical and life-saving content relating to everything from COVID-19, taxes, or receiving emergency consular support.
Most civil servants publish content on GOV.UK using a tool called Whitehall - a bespoke content management system. This is one of our main publishing applications and is home to around 80% of the content on GOV.UK.
As part of the work of the GOV.UK publishing team, we regularly iterate and improve Whitehall to ensure it meets user needs. From our user research, and analysis of performance data in Google Analytics, we noticed that one of the highest errors for publishers was uploading images so we wanted to see how we could improve this.
By making it smoother to upload, errors were reduced by a third. This makes it easier for civil servants to use images in their content and saves time. Meaning important government content is published quicker, helping users get information faster, clearer and in a more engaging way. Also helping improve accessibility issues for those with reading difficulties or using assistive technology.
What the problems were
Previously, adding images into Whitehall was complicated. For starters, the image prompt was located in the middle of a long page which was filled with required and optional input fields that generated the structure of a GOV.UK page. Publishers sometimes made mistakes and would have to re-enter information, slowing the publication process. We noticed that many errors were from uploading an incorrect file type, as well as uploading images that were in the wrong dimensions.
In the latter case, a publisher would come across an error message if the image’s dimensions were not exactly 960 pixels by 640 pixels. Even if they had inputted all the fields correctly. In order to proceed in the document creation process, publishers would need to find a third-party tool to then resize images to those specific dimensions. As a result, images would sometimes appear distorted or pixelated just so they could adhere to those strict image dimensions.
We also realised that deleting an image caused further frustration for users of Whitehall. This was because we were using a numbered process, where every image uploaded to a document was given a number that a user then added in markdown for the image to appear in the final draft. When a user deleted an image, everything had to be reordered and their page updated manually which wasted time and effort.
How we approached the problem
To help solve the problems identified, we ran a design 'charrette', an activity to help us generate as many design ideas as possible within the team in the shortest possible time. We brought together 10 people from various disciplines, including a user researcher, a delivery and a product manager, a front and a back-end developer, along with a couple of content designers.
After becoming familiar with the problem space, we ran a 5-minute rapid sketching session following which everyone shared their sketches on how they would go about designing a possible solution. Even though each participant’s approach was influenced by their respective discipline, common patterns and ideas were present. We explored and refined these further, while ensuring that they not only abided by interaction design best practice but were also viable.
We worked in an agile way, starting small and building incrementally, so before starting technical implementation, we broke down the various design ideas into a number of phases. This allowed us to prioritise features based on a combination of user needs and complexity of implementation.
How it works now
A dedicated tab for uploading and managing images
We have streamlined the workflow, so that images no longer have to be uploaded on the edit document page. Instead, they now appear on a dedicated tab once a new document has been saved. This dedicated images tab allows publishers to upload images and manage those that have already been uploaded. For instance, publishers can make any necessary adjustments to the image and copy the image’s unique markdown code.
Whitehall now allows publishers to upload images greater than 960 pixels wide by 640 pixels high, with the ability to crop images to the correct aspect ratio available within the publishing application.
An updated markdown identifier for images
The issue of having to update markdown identifiers when an image is deleted or replaced has also been addressed. The application now uses the uploaded image's filename and type as its markdown identifier, rather than a numerical value. This change should help publishers ensure the correct image appears in the right place in their document, as well as removing the task of having to update image markdown.
We take accessibility seriously and we aim to be world-leading. This is to ensure that pages on GOV.UK can be viewed and understood by all users equally. In line with our content guidance we have removed the alt text field and suggested that alt text descriptions should be added to the main body copy instead. This means the description is available to everyone.
Since launch, there has been a 33% reduction in errors in relation to everything images within Whitehall. We’ve also heard great things from users including the following from a content designer at the Department for Environment, Food and Rural Affairs:
We don’t have to spend too much time requesting properly sized images or resizing images using third party software – the process is much more streamlined!
We’re not stopping here though! We are committed to continuing to improve the experience for publishers on GOV.UK, and want to keep iterating to make the process easier.
We will be exploring further work on images, such as changing the lead image, replacing images or bulk uploading. We are also looking at how we can build on our previous work by refining the wider process of adding, uploading and changing content.
If you have any questions or feedback about this update or publishing, you can email email@example.com.
Subscribe to Inside GOV.UK to keep up to date with our work.