Health care workers must have correct and current knowledge of their professional fields. Ideon offers scientifically developed tests to measure the knowledge of care workers and advises in what areas training is required. Ideon offers this as a knowledge monitor web application: Kennismonitor. Ideon had a Dutch spoken video made, explaining the concept in more detail.

Complaints about the usability of the old version of the product were the main motivation behind this project. Our team redesigned and developed a new application from the ground up.

Development process

Ideon needed the application to give its users at least the same functionality as the old application, so much of the functionality was predefined. The old application could be completely abandoned as it not only had usability issues, but also the technical foundation on which it was built, was not scalable. The scope of the project was large and the developers were skeptical about the proposed time frame within which the product had to be delivered. Good reasons to do it Agile, I thought.

Our team consisted of project manager and front-end developer Malaya van Ruitenbeek and Maint Berkenbosch, who did front-end and back-end development. Then there were Ideon’s CEO as the product owner and myself. US Media coached us.

Agile

We built Kennismonitor in two-week sprints, picking chunks of the application to design and develop together with the product owner. Since most features of the new product were predefined, this was not a pure Agile project. The Agile approach was useful though. During the project, we defined new requirements and features. Under time pressure caused by external stakeholders, that made us decide to leave out some of the old functionality, at least until the product is evaluated by users.

Mobile first

I’m also glad my suggestion to do the design and front-end development mobile first worked out well. It helped us to keep the user interface clear and keep the number of UI elements low.

My role in this project

I did everything design for Ideon’s Kennismonitor: interaction design, visual design and a bit of front-end development.

Interaction design

When we started this project, my main concern was to get the quiz part of the application right. There are plenty online quizzes to do online for fun to borrow ideas from, so this turned out to be the easy part. The only thing I regret is that we are not able to offer direct feedback to users after they provide an answer. Research shows that multiple choice tests can bring the knowledge level of participants down. Direct feedback can reduce that effect. However in the dementia knowledge monitor knowing the right answer to one question may make answering another question easier.

Screenshot of a mockup of the quiz view

To avoid participants submitting unintended answers, they have to confirm every answer they give. As a quiz may contain dozens of questions, that could annoy some of the users. After three questions, users get the option to skip the confirmation.

The actual challenge turned out to make the interfaces for all types of users support the knowledge monitor process. Roughly, this process consists of:

Diagram showing the steps explained in the text that follows.
  1. An administrator importing user details to create accounts
  2. Team leaders inviting workers to do a quiz
  3. Workers answering quiz questions for the first monitoring moment
  4. Team leaders and organization managers evaluating individual and team knowledge levels
  5. A second monitoring moment and evaluation after workers received training

The availability of most user actions depends on the actions of other users. After all, team leads can’t get a report as long as nobody has completed a quiz for instance. This requires communication of the status of users and guiding texts that explain what’s going on.

The application is accessed only sporadically by the users and some of the users may not be experienced using computers. To keep things simple for all users, I created a flat navigation architecture, guiding them back to a home page after working on a task. Message-like texts on top of the home page explain to the users what their next action can or should be. We sketched many a state diagram to define all the edge cases where the default messages wouldn’t suffice.

Visual design

I don’t consider myself a visual designer, but I do believe visual design and interaction design cannot be created completely separated from each other. With Ideon’s corporate identity, I created a set of styled HTML elements. Based on my sketched wireframes, I created HTML mockups for all views, using a reusable set of element classes. Where necessary, I adjusted the element styling to create comprehensive layouts and transitions. The report views contain some nice tricks to make the layout responsive.

Screenshots of a report mockup on differently sized devices

Click to open a mockup and try out that responsive behavior!

Front-end development

The design specifications were made as HTML and CSS mockups. For in-page interactions, I wrote JQuery functions and created CSS transitions. Specifying the design this way worked well: it even inspired me to write about how useful it is for designers to write code. At the end of every other sprint, when Maint had implemented the changes to the front-end, we tested the application for cross-browser compatibility. Using basic fallbacks, older browsers down to Internet Explorer 8 are supported.

User tests

Currently, Ideon is running user tests. With our Agile approach, it would have been possible to have users check the product after every sprint. However, without real monitor questions and results, the interface could have looked confusing to the target group. Moreover, the real usability challenges were in the process of team leaders inviting workers to use the knowledge monitor, getting reports and reporting to management. The complete process with two monitoring moments takes up to six months. So we decided to do user evaluation with a working and technically tested product.