About the project
Support for social workers is a service featuring guidance and resources for current and aspiring child and family social workers. As well as information on the different routes to become a social worker, it also provides information to help social workers:
- explore career stages
- develop their career
- meet standards
Why we used diagrams
We were aware of the design system guidance that suggests that services usually work best without relying on images, however there are some cases where an image or a graphic can help users to understand a concept.
We identified 2 areas of the content where a diagram was needed:
The 4 Capabilities (4C) leadership framework. When we started work on the Pathways leadership modules, the subject matter expert (Frontline) gave us a graphic showing their framework for supporting effective leadership in social care. We felt that this diagram could help to illustrate the model, but it needed some work to ensure that it was easy to read and that it emphasised the cyclical nature of the framework.
The Ishikawa (fishbone) diagram. When producing the Employer standards content, the subject matter experts (Research in Practice) supplied a version of this diagram to help illustrate a framework for solving problems. We wanted to include it in the content as it would aid users comprehension of the concept, but it needed some work to ensure that the diagram was as simple as possible and that the text is easily legible on all devices.
The Frontline 4Cs model
The framework identifies 4 essential capabilities, known as the 4Cs, for leadership success in the sector. These are:
- maintaining curiosity
- providing clarity
- managing complexity
- expanding capacity
The original diagram provided by the supplier has the 4 capabilities shown as 4 separate sections within a circle. Capability 1 is maintaining curiosity, capability 2 is providing clarity, capability 3 is managing complexity and capability 4 is expanding capacity.
Frontline 4C Leadership Framework © 2024 by Frontline is licensed under CC BY-NC-SA 4.0
This raised a couple of questions - how do we change it to improve comprehension and signposting, and what are our accessibility concerns?
Areas of focus
Text size
The original diagram has the font size at about 12px. We need to investigate whether this is big enough to ensure legibility on small devices.
Colour contrast
We also need to ensure that the colours used within the diagram meet the WCAG guidelines for colour contrast. The colours used for the text, arrow and segment colour in the original diagram had good contrast, however the background and segment colours fail when used together, meaning the segments do not stand out very well. This is easily shown when checking for colour blindness accessibility. To do this, we:
- followed the guidance regarding colours on GOV.UK
- followed the information regarding colour contrast
- used the app ‘Sim Daltonism’ to check the image visually
When we tested for deuteranomaly (reduced sensitivity to green light) using this app, the differences between background colour and segments merge. The colour contrast was not clear enough.
Comprehension of the diagram
Users need to understand that the model is cyclical and that each segment feeds into the next. The arrowheads are currently quite small, and the lines are the same width all the way along. So, there may be some scope to improve things here.
Comprehension of the content
The image should help users not only better understand the content, but also which section of the content they are currently in. We need to explore whether there is a way to improve the diagram to this extent. Currently the intention is to use the same version of the diagram on every single page, but maybe calling out or highlighting the specific section would help to make it clearer to the user which section of the training model they are in.
The solution
Using colour to highlight a segment
We started by focusing on adding colours to the diagram, to see if this would give better differentiation between the segments. We thought that if each segment was a different colour, that they would stand out more. We had problems producing a consistent, DfE-compatible colour palette that was appropriate from a colour contrast perspective. It seemed like aiming to make a group of colours compatible with each other would lead to one or more of them failing the colour contrast check. This happened especially when overlaid with white text.
Using the arrows purposefully
We then decided to focus on improving the arrows, aiming to make them appear less like a border and more like a functional part of the diagram. We wanted to make the focused section segment larger than the others to signpost to users the section of training they are looking at. However, it became clear that the arrow on that segment would either:
- not work
- have to be aligned externally to the others, breaking the circle
We decided to make this change and amend the colouring of the ‘inactive’ segments, so they didn’t stand out as much. It felt like it was going somewhere, but we encountered issues with the font alignment, size, and the alignment of the arrows as well, so it needed more work.
Taking one of the older designs as inspiration, we decided to focus on making the arrows bigger. This version of the diagram met the WCAG requirements, but the colours felt dull and not engaging enough for the content that we were trying to communicate. We decided to focus on using 2 colours for the segment that:
- fit well alongside the DfE colour palette
- meet contrast requirements
- align with the needs of the most common types of colour-blind users and for fully sighted users
We tested the diagrams with a range of users in user testing.
Feedback from user testing
Positive feedback included that the:
- visual elements and graphics were appreciated
- diagram helped clarify the 4Cs effectively
- content was succinct, clear, and visually appealing
Suggestions and uncertainties mentioned that:
- the diagram appearing earlier within the content (this was 1 person)
- presenting the process as cyclical (this was more the user questioning whether they felt that the model could be applied cyclically or whether it would be more useful to think about applying each area all the time)
The final diagrams
In the final 4Cs diagrams produced by the SfSW team, the sections are labelled in the same way with the different capabilities, but we have made the 4 sections easier to distinguish by making changes to their colour, size and positioning.
The Ishikawa (fishbone) diagram
This is a well-known diagram that has been reproduced on many web pages. This version was provided by an external supplier (Research in Practice) as part of the National Workload Action Group content. The diagram is in the shape of a fish, showing factors that contribute to different areas of a problem. The challenge here, as with the 4Cs diagram, was creating a version of the diagram that met GDS standards.
The supplier had been given some guidelines for creating the image, but before using it on the site we wanted to check if:
- the text was legible on small devices
- the information density could be improved
- it was clear enough, or if it was too clear that it is a fish
- it could be produced to DfE style guidelines
The solution
To optimise legibility on small devices we focussed on making the text as big as possible without making the diagram difficult to read. The font size was checked against the GDS style guide to make sure it was consistent. We then reduced the amount of ‘issues’ on each of the fishbones to improve the information density. We also didn’t feel that using the wording ‘issues’ was the best way to describe what the user was trying to process, so we changed it to ‘causes’ to improve clarity.
As well as using colours from the DfE colour palette it was important to think about how we used them to help users differentiate between the various elements in the diagram. For this reason we used the primary DfE blue for the headings and the ‘Cause’ segment.
We also simplified the fish’s features to ensure that the visual ‘noise’ didn’t distract from the functional aspects of the diagram.
Lessons learned
Design is always a compromise, so we need to think about who our users are and what the best way of communicating our information is. It was important to think about all the areas where the diagrams could be improved for legibility, signposting and accessibility, and of course, to test them.
The feedback that we got was positive. Users understood the diagrams quickly, regardless of the type of device or screen size they had. There were also no issues if they had impaired vision. Adding a text alternative also helped their understanding.
We will continue to test and request feedback on the diagrams and will update them if we receive new feedback.
Creation of further diagrams
As part of the National Workload Action Group (NWAG) content we were asked to produce 2 new diagrams. These were to aid users' comprehension of a section of content which discusses concepts around developing digital skills and practices.
The initial designs for the diagrams were produced by an external supplier (Research in Practice). This part of the process involved giving feedback to their designer on different iterations until we arrived at something close to the final solutions. We then refined these ‘in-house’ to make them suitable for use on the site.
Refining them involved:
- making sure text elements use the Inter font and are big enough to ensure legibility on small devices
- testing out different layouts for the diagrams to achieve the maximum size for the text elements
- applying colours from the DfE palette in-line with the WCAG guidelines for colour contrast
- ensuring the ratio and size of the diagrams is consistent with others on the site
Original Understanding digital realities diagram provided by the supplier
Understanding digital realities diagram refined by the SfSW team
Original Framework for digital practice diagram provided by the supplier
Framework for digital practice diagram refined by the SfSW team
Creation of guidelines for designing diagrams
We had now produced four different diagrams and followed the same process for each to refine them for use on the site. We therefore decided to document this process and define what we’d learned by producing some guidelines.
As well as helping to speed up the production process of future diagrams, the guidelines would help to ensure that:
- text elements within diagrams are as legible as possible on all devices
- all diagrams used across the site have a level of visual consistency and reflect the DfE style guide
- colours are used in a way that meets the WCAG guidelines for colour contrast
- all diagrams are produced and exported at the same size, orientation and with the same export settings so they are displayed in a consistent way, with the appropriate level of quality, across the site
- when uploaded to the site, alt text is added to the diagrams in a way that adheres to GDS guidance and current best practice
The guidelines currently live in a Figma file alongside the diagrams we’ve created so far. As well as the final versions used on the site, in this file we have also included the different design iterations for each diagram to illustrate the refinement process and provide a reference point for how the guidelines should be implemented.
The guidelines are still a work in progress and we will continue to develop and refine them as we create more diagrams.