Kirkpatrick Model of Evaluation

This project created in Articulate Storyline 360 reviews the four levels of the Kirkpatrick Model of Evaluation. When a user selects a level button, the description and an example will display on the screen.

Audience:

Learning and Development professionals who need to assess the impact of their instructional design.

Responsibilities:

  • Instruction design

  • Visual development

  • Graphic design

  • Programming

Tools Used:

  • Adobe XD

  • Articulate Storyline 360

The Problem

It is crucial to evaluate the effectiveness of instruction whether it is in person or in a digital format. With that in mind, many in the Learning & Development field use Kirkpatricks Model of Evaluation to assess the eLearning scenarios or trainings they have created. Those new to the field, however, are not as familiar with this specific model for evaluation.

The Solution

I wanted to create an easy to use reference guide for those new to this field. In doing so, I thought it would be important to provide a simple interactive visual that described each level, provided an example of each in level in practice, and included a guiding question the L&D professional could ask themselves.

My Process

Even though this was a smaller project, I still wanted to ensure I went about it in an organized and time efficient manner. I first wrote up the necessary text to be embedded in the resource, then mocked up the basic visual design I thought worked best with the material, and then I moved the visual and text into Articulate Storyline 360 to create the final product.

Visual Development

I wanted to create an easy to use resource, so I decided to keep the design itself very simple. I decided to create a button for each level, that when selected, will display the text overlaying an image to the right of the buttons. If the user selected a second button, the previous information would be replaced with the new information. This would result in less information on the screen at a time so the user could focus on one level of the model at a time. I did this in order to remove the likelihood of cognitive overload if there were a greater amount of text on the screen at once.

Graphic Design

Once the visual mockup was complete I moved on to the graphic design. For the buttons, I wanted to convey a visual level of hierarchy because each stage requires the results of the previous level. With that in mind, I decided to use a monochromatic scale and have each additional level button have a darker hue.

I also decided to have the overlay of the text match the button color of the specific level but at a higher saturation. This would give an additional cue to the user that they were reading information for a specific level.

Full Development

After applying some feedback, I fully developed this project in Articulate Storyline 360. I created the visuals and multiple layers for each of the levels text information. I then programmed the buttons to trigger the corresponding layer with text as well as a inverse hover state so users would be able to identify which level of the evaluation model they were reading about.

Results and Takeaways

This project was one of my early works using Articulate Storyline 360 so I appreciated the practice of reviewing the programming functionalities within Articulate Storyline 360 including creating buttons, hover states, and layers. My work has developed from this point, but is still grounded in the fundamental skills in this simple project and many more. Now I use this as my own resource for refreshing myself and others in the L&D field on how to evaluate the eLearning and trainings they have created.