Background to cards in Get school business information
Get school business information is a signposting service which links to content across GOV.UK for school business professionals. Because of the nature of the service, that directs users to pieces of guidance, we felt that discrete cards would work better than a list pattern for separating themes and items. Because there is no published card component in the GOV.UK design system, we started a process identifying a suitable card component as the basis of our design.
Ideation during the alpha phase
In alpha, alongside developing the content, we ideated several card designs. We looked at card designs used in the DfE, the NHS and the DWP as well as other departments for ideas.
These included:
- cards split into a header and body
- cards with a rollover state
- cards with an outline
- cards with a background tint
We rejected cards with a grey background with a status label, links and captions on it. Two users commented on the lack of enough contrast in this design.
We settled on a card design based on design dashouse's govuk-card (with no image).
We felt it would be clear to users, even those who aren't confident digitally, what was clickable in this card. This card also suited the nature of our service which is to signpost users to other services.
Designs shared at alpha assessment
At the point of our alpha assessment, we presented the two card designs below. One card contains a single link, the other contains multiple links.
Design for a card with a single link shared during the alpha assessment:
Design for a card with multiple links shared during the alpha assessment:
Prototype shown in the alpha assessment (password: schoolaccount)
During the alpha service assessment, the assessors asked us to explore alternative designs that would allow us to fit more cards on screen.
Card designs beta ideation
After the assessment, we went back to explore alternatives, including setting up design crits and discussions with other designers.
We explored card designs used in other gov services, including cards with a boundary and hover state. We felt that adding a background colour or boundary may add unnecessary visual weight to our design and may make it harder for some users to know what is clickable.
In the end we decided to use our original design but ideated around the header size, border thickness, placement of links, positioning of text within the cards.
Ideation around cards with a single link (password: schoolaccount)
Ideation around cards with multiple links (password: schoolaccount)
Card designs taken forward
In the designs we have taken forward, we have moved the link to the header. We have also reduced the thickness of the bottom border to reduce the visual weight. We felt it was important not to reduce the weight of the header so that the cards wouldn't lose impact on the screen.
Both card designs work for cards at different column widths.
Design for a card with a single link (with the link on the header):
Design for a card with multiple links (with adjustments to the text layouts):
Design for a card with multiple links (with a two half-column layout):
What we have ended up with for our card with a single link is very similar to dashouse's govuk-card (with heading link).
The designs have the flexibility to contain varying amounts of content. The cards have tested well so far, including with users with access needs. One concern we had in choosing a card component was that a user with a magnifier might miss cards on the right-hand side of the screen but we haven't yet seen any issues like this. We will continue to test throughout beta.
Prototype showing card designs taken forward (Please contact the School Account team for the password)