Step 1: Identify top instructional design skills

Based on initial research, I identified nine top instructional design skills. Over time, however, the list grew to 13. This created a couple of problems:

• Graphic design inflexibility. I quickly realized that my initial graphic design concept (see above) did not allow for easy modification to the number and order of skills. I eventually replaced it with something simpler, but more future-proof.

• Accessibility challenges. I needed a way to display all of the skills (and skill descriptions) on one page, while keeping the buttons and text large enough to be accessible on mobile devices. My solution was to deactivate the Storyline player to maximize screen real estate and use hover states to display skill descriptions. Only much later did I discover that 1) deactivating the player also removes access to the accessibility controls menu and 2) hover states don’t work on mobile devices/are inaccessible to screen readers and keyboard users (see Step 2 for my creative solutions to these challenges).

Step 2: Create two-step skill selection interaction

Accessibility Solutions. In deactivating the player and using hover states, I created a number of accessibility problems. This setback became an excellent learning opportunity, however, encouraging me to design and implement the following creative solutions:

• Recreated the accessibility controls menu using triggers, built-in variables, and custom buttons/states.

• Created a mobile version of the Fit Calculator with a custom “double tap” interaction (hover state alternative) that displays the skill description on the first tap and selects the skill on the second tap.

• Used keyboard press triggers to allow keyboard users to access skill descriptions by focusing on a skill and pressing Shift+D.

• Added skill descriptions to the alternative text for each button to make them accessible for screen readers/visually impaired users.

Intuitive Design. To create a two-step skill selection interaction that felt intuitive, I needed a way to register which skills users selected in Step One (identify up to six necessary skills) and present only those skills for users to choose from in Step Two (identify up to three critical skills).

Adding to the difficulty, I wanted users to be able to go back and modify their selections in Step One without having to start over completely. I accomplished this with a number of layers and triggers.

Step 3: Generate personalized results page

Percent Match Score. To calculate the percent match, each skill is assigned a weight based on my level of proficiency in the skill (advanced, intermediate, developing, beginning) and whether the skill was designated by the user as “critical”. For example, if selected, the Development Wizard skill (intermediate proficiency) would receive either a weight of 80 (non-critical) or 60 (critical). These weights are then summed and divided by the total number of skills selected by the user. While simple, programming this equation into Storyline required the creation of many variables and triggers, including a custom Javascript trigger to specify the number of decimals displayed on the results page.

Detailed Results. The detailed results section presented a fun design challenge. My goal was to create bulleted lists for each proficiency level that would “grow/shrink” depending on which (and how many) skills the user selected. Executing this vision was surprisingly tricky given that the placement of a particular skill on the list would depend on which other skills had been selected. For example, Evaluation Expert might be the first bullet on the Advanced Skills list (if no other advanced skills were selected by the user), but it could also be the fourth bullet (if all four advanced skills were selected). Programming this functionality into Storyline involved the advanced use of states, triggers, and text variable references.