< Back to Portfolio

Designing a Measure Key

Here is another example of Interactive Alchemy’s Measure Key concept in action. After the initial kickoff meeting for this project, my first order of business is to put together course interface concepts, along with purpose-focused templates, or “Measures”. By creating Measures first, the client can see something very close to their real content married with the user-interface.

To achieve the design we want to take to the customer for approval, I iterate over a smaller handful of these Measure-types: “Menu“, “Quiz“, “Impact Message“, etc. Once I’ve got the basic interface and information elements working with a few Measures, I’ll extend that look-and-feel and overall design to the remaining Measures.

In the mockups below, note that the Windows XP bar, Start button, and browser chrome are included in these mockups. I’ve found that this helps in two important ways:

1. I’m designing everything at the correct size from the very beginning.

2. Expectations are set firmly at the outset of the project. Don’t burn a full review cycle debating the client on window modes and auto-hiding task bars.


Here are all of the Measure designs for this particular project.

Intro Animation

Once the Measure Key is approved by the client, the Intro Animation is usually the first piece of content I develop fully for approval, since it really drives home the mood and overall style of the rest of the course. For Measure Key approval purposes though, I just need to establish some initial look-and-feel.




For this project, there are four main topics (right), plus some additional external resources listed on the left. Our e-learning content generally always begins with an introduction screen/animation which leads to a Menu screen, so the only other interface option at this point is the Exit button.




Once a selection is made from the Menu, we often kick things off with an “impact message”. This animated screen sets the stage for the next few minutes of content. It is usually pretty high-energy, has bold text and inspirational images, and is accompanied by music.

The entire user-interface is also now revealed. The upper-right shows the title/sub-title of the current page, as well as the learner’s progress through the section. The left side allows the learner to navigate within this section of content.


The main controls at the bottom of the screen are unique to this project. Rather than the ubiquitous e-learning Next/Back control scheme, the client wants to allow the learner to ‘scrub’ through the content, as one might control a video clip. However, since this is interactive content, some pages have stopping points where an activity must be performed before the content continues. To handle this, I create a simple progress bar you see below: Play/Pause on the left, a visual progress marker that travels from left to right, and visual ‘pinches’ in the timeline where the auto-playing content stops for user-activities.



At this stage of course development, we usually don’t have a lot of finalized content available, but placeholders representing similar types of information successfully communicates the intent to the client.




Our “Discovery” pages are more complex custom interactions. Outside of the overall technology chosen to drive a given course, the number and complexity of Discovery pages is where much of a course budget is flexed. Since Discovery activities are all very custom and vary wildly, for initial Measure Key sign-off purposes we just need to show a quick possible example. The development of each actual Discovery page goes through it’s own iterative design and approval process.




Depending on the nature of the course, the end of a given section of content may end with a scored Quiz or Test, or in this case a simple un-scored Self-Check. For this course, all Self-Check pages are Multiple-Choice questions with basic remediation.




Each section of this course ends with a Closing page, which includes a brief animation, music, and summary information. The learner is then directed to additional information, with the option to continue to the next section of the course, or return to the main menu.