Case Study Jext

Example

JEXT Test your knowledge module

Jext
Case Study

Jext

This multiple choice interactive quiz was part of my design for the Jext adult patients website.

Engaging patients by gamification in this way was a fun project. Because it was a module within the website I already had the style to base it on and could therefore concentrate on making it a pleasurable experience for the user.

Case Study JEXT

Auto-injector pens are often patient administered and it is important that information about the care and use of the pen is easily recalled.

All of the answers to the questions are available on the website but getting them to sink in is key.

My job with this quiz is to be exceptionally clear and to captivate the user so that they will remember the important points if they are ever in need.

Home screen of Jext app
Insight

Start to finish

Do shoemakers' children have shoes?

Time constraints, non-disclosure agreements, etc., mean that making a record of every stage of a commercial project is impractical. For a more thorough look at a project see how this website (justinwalsh.design) was designed and then updated after user testing.

Come and see

Permutations

Having already designed the website I had a good idea how the module could look so I could therefore start with some logical decisions, for example, about the form of feedback the user would be given.

Jext design – 1
How can breadcrumbs show a record of correct and incorrect answers?
Jext design – 2
How is the user told that they have submitted the wrong answer?
Jext design – 3
How is the user told that they have submitted the correct answer?
Jext design – 4
What happens when the user mouses over any of the choices?
Jext design – 5
What happens when the user gets it right?
Jext design – 6
How will multi-answer work?
Jext design – 7
How will the user be shown the correct multi-answers?
Jext design – 8
What if the answer cannot easily be shown in a small space?
Jext design – 9
How should an important answer be shown?

Strengthen feedback

For some people the highlighting of the users’ incorrect choices was not strong enough so a red outline was added.


Before
Jext design – 10
After
Jext design – 11

Simplification

I got two things wrong with this ordering question.

Firstly, the start position prompted the user to drag and drop their answers into the correct slots. There was nothing wrong with that as such but I should have asked the developers if it was practical. They could have suggested another design.

Secondly, I didn’t realise that the feedback to the user wasn’t good enough – they were not given an easy way to compare their answer with the correct answer. Too confusing!

Before
Jext design – 12
Before
Jext design – 13
After
Jext design – 14
After
Jext design – 15

Now, the user just has to do some clicking. With every click an ordinal number is added. After their last click the answer is revealed.

The correct sequence appears below while the user’s choices remain in place, highlighted in red if wrong, blue if correct. Additionally, they can make a comparison using the ordinal numbers. Much clearer!


Final score

Jext design – 16 Jext design – 17

At the end of the quiz the ‘tutor’ will react accordingly and give the user a chance to try again if they wish.

Jext design – 18 Jext design – 19

Justin gave us peace of mind: we quickly understood that all of his efforts are well thought out, skilfully executed and the results are powerfully persuasive.

Nick Wyatt

Managing Director, Accenture Strategy