The problem
At the end of each module a user is presented with an onscreen certificate which they also have the option to download as a PDF.
In the previous design there were two calls to action below the certificate. These were to print the page and download it as a PDF file.
Following direct user feedback, the team saw opportunities to improve and simplify this pattern.
Using the print button generated a printed result that included other elements on the page that were not part of the certificate, for example the page navigation. There was no value for the user to do this. As the PDF download could also be printed, it was proposed that a single option would provide a clearer outcome for both scenarios.
There was also an additional technical concern. The formatting of the on-screen view and the PDF certificate were both controlled by the same file. This meant that the design of the downloadable version was not optimised to be printed.
Finally, in the original layout, the file size information was visually separate from the link. For some less technical users this disassociation may have been confusing.
Our approach
Having opted for a single call to action to replace the two links, the team identified the attachment component as a suitable solution. This component displays a link to download an attachment and metadata about the file as seen here:
More information about the component can be read on the following page: https://components.publishing.service.gov.uk/component-guide/attachment
A suitable icon for the certificate was created with pixelated information to remain generic and applicable to all users and modules.
The second part of the approach was to look at design improvements to the PDF certificate itself. The main consideration for the design was to be able to incorporate the dynamic content. The number of sections listed on certificates varies by module. Therefore, the design needed to stay on one page but also allow for a variable amount of text.
Our solution
By using the attachment component, the options are reduced to a single call to action. The content design team combined the wording so that it was obvious that printing remained available for users who were not familiar with PDF files.
By design, the meta data (i.e. file size and type) is now clearly associated with the file.
To give the call to action a clearer separation from the onscreen certificate a section break was used. An additional second section break was added after the attachment component to separate the content from the button that can be used to navigate away from the page.
The certificate design has now been updated to print in landscape and to allow enough space for the variations in content between modules. Additionally, although it is an unlikely scenario, a failsafe space has been created within the design to accommodate future iterations where a module may contain up to seven sections.
Next steps
The team will now monitor any further user feedback relating to the user experience connected to the downloading of certificates.