The issue

User need: As a non-UK citizen I need to easily find the content that is relevant for me, so that I take the correct next steps

Research indicates that international users find it difficult to understand what information is relevant to them and are instead reading content that is aimed at domestic users. With the current inset component used for international users being easily missed.

current inset text component, using a grey line

Our aim was to develop this inset component to make it easier for international users to be signposted to the right content.

The Evolution of Designs

Initially, we made slight modifications to the inset component, including a grey background and a yellow heading. While this improved effectiveness, it was still overlooked by participants.

design-v1.png

We then refined the design by changing the grey colour to purple (one of the Get Into Teaching brand colours) and added a contextual title.

inset text component design

After the 1st round of research, we did some desk research and analysis looking at different websites of how international content is integrated with domestic content that our users might be familiar with. From this research we created an expander component, so that our designs wouldn't elongate pages when we needed to provide more information.

an expanding content box design

We discovered that international users mistakenly believed the link would lead to another page rather than opening the box. To address this, we made iterative changes: first, we removed the blue hyperlink and replaced it with an arrow icon; second, we replaced the plus symbol, which some users found confusing;

“I would expect this to take me to another page”.

an expanding content box design using an arrow

After testing, we noticed that international users correctly interpreted the arrow as an indicator that the box could be opened and clicked to expand. However, we had some accessibility concerns with the arrow being to the right of the box meaning users using a screen magnifier might miss it.

We continued iterating on the design, aligning it more closely with the gov.uk accordion component. We added ‘show’ and ‘hide’ labels to enhance clarity for users regarding its function.

an expanding content box design

User testing

We conducted two rounds of research, testing the content and designs with our users. The purpose of this research was to determine whether the changes effectively supported international users in providing information that could be easily distinguished between domestic and international content.

We found that:

  • The interactive element of the component encouraged candidates to use it
  • Candidates quickly understood the pattern of the interaction, looking for the next “non-UK citizens” heading as they scrolled down the page
  • The non-UK components did not obstruct the experience of domestic candidates
  • Placement of the components are as important as the design as some users still missed the components of different pages

Further consideration

We’ve been looking into ways to improve understanding for international candidates when it comes to relevant information. Our focus includes adjusting content and carefully positioning designs on our pages. At the same time, we’re mindful not to overload pages with too many components, which could distract our domestic users. We are sharing our findings with other teams in the service line to create a consistent experience for our users.

screenshot of the how to become a teacher page using the new component design