Process

Action Mapping

In action mapping started with the goal that a business or energy conservation organization might have to encourage home owners to purchase upgrades. While a particular business or agency might had more specific goals that would have guided this process differently, the more general purpose resulted in two branches:

1. General understanding of energy efficiency
2. General understanding of the costs, options, and ROI of upgrade options

Providing the learner the opportunity to engage with this information interactively was the next step, which would lead to the desired action, which was choosing cost effective energy efficient upgrades. In this case, taking the learners perspective (in some sense applying the learner persona earlier), I could see that the learner would not be motivated by the same goals as the business or organization. They wanted to save money, not spend it, so the goal needed to be aligned with the learners actions and motivations.

Research

As the goal of this project was not precision and accuracy in the content (the goal was to display my design capabilities in Articulate), I started research with Claude (Anthropic’s AI), asking for an overview of the home energy efficiency upgrades, what the options were, and their costs. I then consolidated that data into simpler categories and asked for which options could be done by a home owner themselves without too much trouble as well as what the life expectancy and energy savings of the upgrades were.

This data was consolidated into a simple financial model (spreadsheet) that could be used to play with the data and determine the best upgrade options to teach the intended points. The options were selected for their:

• Simplicity (some upgrades might be difficult to understand)
• Cost – Options were kept under $6000 (average) to keep the possible cost range of scenarios to an easier to understand range)
• Return On Investment (ROI) – An underlying purpose that came out during research was to encourage learners to apply the cheapest upgrades first due to their high ROI
• Location – I wanted to balance options between exterior and interior upgrades
  

Visual Mockup & Storyboard

Interactive Prototype

With the designs in place, the interface needed to be set up in Articulate Storyline and the interactive elements needed to be prototyped. After testing the calculator design as a Storyline interaction, the Storyline interface started lagging and the number of variables and layers became too cumbersome, so the design was switched to an interactive web object.

Full Development

After resolving lingering 508 compliance issues and testing the course functionality on each page, the course was published to this site. Typically, I would expect a more rigorous development and review process, coordinating approval with subject matter experts and relevant stakeholders before publication. Explore the project yourself using the link below.

Features

• Clean professional design
• Scenario Based Learning
• Learner progress controlled and tracked by variables
• Custom web object interactivity linked to module variables
• Gamification (award/badge system)
• AI generated images, text, and web objects using multiple systems (Claude, Gemini, Articulate)

Results & Takeaways

Outcomes would normally be tracked to specific metrics to determine training effectiveness. In this case, the project won’t be deployed to the target audience, and there is no product or behavior for which to track metrics and inform improvements or future products.

I’ll be returning to this project over time to make improvements. Here are a few already planned as a result of testing and carefully examining the resulting product:

• Better 508 adherence for web objects: The calculator used in the scenario worked very well when tested for 508 compliance, but the other two objects had issues capturing focus correctly and being navigable using the keyboard. These issues would normally be resolved before publication and will be resolved in the coming weeks.
• While the AI voiceovers were nice, I prefer not to have large bodies of text on the screen at all. Creating an engaging video with animations and an AI “talking head” (most likely from VYond) are next up for improvements.
• The design is adequately clean, but I see areas for improvement in terms of interaction design (icons, menus, etc), layout consistency, color palette choice, etc.
• The interactive calculator web object is very functional, but I can see switching to have it take up more of the screen and bringing in more visual elements, images, and description to make the scenario more engaging.
• The other two web objects interactions (balloon and 3D graph) are ok, but I would have preferred to see an interactive diagram of a real house showing the air leaking out. The 3D graph is also functional but not visually the best. I would like to see something that more visually and concretely represents the relationship between cost, savings, and energy efficiency.