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.
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.
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.
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.