What this pattern does
Learning requests often start with a deliverable: a course, a module, a video, a job aid, or a quick update. But the real performance problem usually lives across a larger system.
This interactive map helps learning designers slow down and inspect the system before deciding what to build. It makes the invisible parts of performance visible: learner needs, workflow moments, decision points, tool friction, support resources, manager reinforcement, risk, and success signals.
The goal is not to make the map complicated. The goal is to help teams ask better questions before they build the wrong thing beautifully.
Best used for
Use this when the learning request is bigger than the deliverable.
Learning needs analysis
Use the map to clarify what is actually shaping the performance gap before naming a solution.
Stakeholder conversations
Give stakeholders a structured way to discuss the system around the problem, not just the requested asset.
Performance consulting
Identify whether the issue is knowledge, confidence, workflow friction, tooling, reinforcement, or something else.
Learning architecture
Map how courses, job aids, manager tools, practice moments, and workflow support fit together.
Why this works
A lot of workplace learning fails because it treats performance as a content problem. Someone asks for a course, the course gets built, and everyone hopes the work changes.
But real performance is shaped by more than content. People need clear expectations, useful tools, timely support, confident decision-making, manager reinforcement, and a workflow that does not fight them at every step.
This pattern helps learning designers move from “What should we teach?” to “What system are we designing for?” That shift matters because the best learning solution may be a scenario, a checklist, a decision path, a manager coaching tool, a resource selector, a workflow aid, or sometimes yes, a course.
Live preview
Explore the system around a learning problem.
Select each part of the map to see what to look for, what to ask, and what kind of design move might support performance.
Start here
What is really shaping performance?
Most learning requests begin with a deliverable. This map helps you inspect the larger system before deciding what to build.
Starter code
Copy the structure and adapt the nodes.
This starter version shows the minimum structure: node buttons, a live panel, and a small script that updates the content when a learner selects a part of the system.
<section class="learning-systems-map">
<div class="map">
<button data-node="learner">Learner Need</button>
<button data-node="workflow">Workflow Moment</button>
<button data-node="decision">Decision Point</button>
<button data-node="support">Support Resource</button>
</div>
<aside class="panel" aria-live="polite">
<p id="mapKicker">01 / Learner Need</p>
<h3 id="mapTitle">What does the learner need to do?</h3>
<p id="mapDescription">
Start with the learner’s real task, not the requested content.
</p>
</aside>
</section>
<script>
const systemsData = {
learner: {
kicker: "01 / Learner Need",
title: "What does the learner need to do?",
description: "Start with the learner’s real task, not the requested content."
},
workflow: {
kicker: "02 / Workflow Moment",
title: "Where does this show up in the work?",
description: "Find the moment where confusion, risk, or hesitation appears."
},
decision: {
kicker: "03 / Decision Point",
title: "What choice does the learner need to make?",
description: "Make judgment visible by showing tradeoffs and consequences."
},
support: {
kicker: "04 / Support Resource",
title: "What support exists after training?",
description: "Design for the moment when memory fades and real work gets messy."
}
};
document.querySelectorAll("[data-node]").forEach((button) => {
button.addEventListener("click", () => {
const item = systemsData[button.dataset.node];
document.querySelector("#mapKicker").textContent = item.kicker;
document.querySelector("#mapTitle").textContent = item.title;
document.querySelector("#mapDescription").textContent = item.description;
});
});
</script>How to customize it
Rename the node labels, update the data object, and style the map to match your brand or workflow. The core pattern is simple: learners choose a system element, and the panel explains what to inspect next.
S3 deployment notes
How to host this as a lightweight interactive infographic.
Save the file as index.html
Keep the HTML, CSS, and JavaScript in one file if you want the simplest possible deployment.
Upload it to your S3 bucket
Use your approved hosting path and follow your organization’s security, access, and review process.
Set the content type
Make sure the file is served as text/html. If the content type is wrong, the browser may download the file instead of rendering it.
Serve through your approved URL
Use your approved public or internal delivery path. In many organizations, that may involve CloudFront, an internal CDN, or another governed hosting layer.
Test the page on desktop and mobile
Open the hosted URL directly and test every interaction before embedding or linking it inside a learning experience.
How to use this with Rise, Storyline, or internal pages
Articulate Rise
Use the hosted URL as a button link, embedded web content, or external resource when the map needs more room than a standard Rise block.
Articulate Storyline
Use the hosted page as a web object, or rebuild the logic inside Storyline with layers, states, variables, and JavaScript.
Internal wiki pages
Link to the hosted page from SOPs, launch pages, team hubs, or enablement resources.
Learning portals
Use the map as a standalone resource for learning designers, managers, program teams, or enablement partners.
Customization notes
The easiest way to customize this pattern is to update the eight map nodes and the content tied to each node.
Rename the nodes to match your process, audience, team language, or learning design model.
Update each panel with your own prompts, design questions, support moves, or examples.
Change the gradients, borders, card radius, typography, and spacing to fit your brand.
Reframe the map around a specific workflow, product launch, support model, or operational problem.
Accessibility notes
This starter pattern uses real buttons for each interactive node, which is better than making non-semantic shapes clickable. The content panel uses an aria-live region so updates can be announced by assistive technology.
Before using this in production, test keyboard navigation, focus visibility, color contrast, screen reader behavior, and mobile usability. If you add animation, respect reduced-motion preferences.
Design Lab
Use this as a thinking tool, not just a visual.
The point of the Learning Systems Map is not to make learning strategy look fancy. It is to help teams pause long enough to ask better questions about what people actually need, where the work breaks down, and what kind of support would make performance more clear, consistent, and useful.