The problem

We were hearing consistent feedback across multiple rounds of research, and in feedback forms that our users wanted the training to be more engaging.

There seemed to be an emerging need to add something more activity based into the training to encourage interactivity.

Our proposed solution

We explored a range of different ways to keep users engaged, one being videos and another being downloadable resources. For this round, we wanted to try adding in animated cards that displayed information differently, and require an interaction to display more information.

Designing an accessible solution

How it had been done before

We had to explore ways to make sure the animated cards were fully accessible. We did some desk research into how this had been done before. We found an example where the person had used a button as the target for flipping the card over rather than a hover (which isn't keyboard friendly). They also made sure the card wasn't a dialog, so that the keyboard focus wasn't trapped in the card. To close the card, keyboard focus was highlighted on a close button, which would return the card to its' original state.

How we adapted it

We followed the same general principles, such as using a button as the trigger, and instead of a close icon, using a close link instead. We used the existing card design that we were using elsewhere in the service, but removed the hover functionality for this purpose. Flippable cards, showing one card with an image and a link to flip it over, and another card showing what it looks like when it has flipped over, with a close link.

Testing the solution

We tested this with the progress bar functionality, so we thought creating a clickable prototype in Figma would be useful as they were both custom components, and more difficult to create in HTML in a short period of time.

Testing scenarios

We decided to test the cards in 2 different scenarios.

Informational format

A user would need to click on the card link to read more information. We decided that this information would be additional, as best practice is not to hide information that everyone needs. A selection of 4 flip cards, showing information on each, one card is flipped over to reveal more information, and has a close button

Quiz question format

A user would be able to click on each card link to choose an answer, each card would reveal if it was correct or incorrect. A selection of 4 flip cards, each displaying an answer to a quiz question. One is flipped over showing the correct answer

User feedback

Generally, users were able to interact with the cards easily. However, they didn't match with user expectations.

Informational flip cards

Users thought they were nicely laid out, but some users expected the link to take them to another page, rather than flip the card over with information. Some users didn't think they were engaging enough, or thought the same thing could be achieved another way.

Quiz flip cards

Users liked the images that were used in the cards, but some users were confused by the link text. On mobiles, you had to scroll to see all of the answers, which could prove tricky for mobile users.

What we did next

We decided as a team that the minimal payoff that the cards could provide didn't match the large amount of work the content team would need to do to incorporate them. We hypothesised that engagement/interactivity could be achieved in other ways that would be more valuable to users.