Interactive Infographic Pattern
Learning Systems Map
A lightweight interactive infographic for exploring the people, tools, decisions, workflows, friction points, supports, and success signals around a learning problem before jumping straight to a course.
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
This pattern is designed as a single HTML file. You can save it as index.html, upload it to an approved hosting location, and link or embed it from tools like Rise, Storyline, internal wiki pages, LMS pages, or learning portals.
The live preview above uses the same structure: HTML for the map, CSS for the visual system, and JavaScript for the panel updates. To adapt it, replace the node labels and the content inside the systemsData object.
How to copy this pattern
Copy the HTML, CSS, and JavaScript from this page. For a standalone S3 version, keep the map section, style block, and script block together in one file.
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. This works especially well when the infographic 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 if you need deeper tracking.
Internal wiki pages
Link to the hosted page from SOPs, launch pages, team hubs, or enablement resources when the map supports stakeholder thinking or performance planning.
Learning portals
Use the map as a standalone resource for learning designers, managers, program teams, or enablement partners who need a shared planning tool.
Customization notes
The easiest way to customize this pattern is to update the eight map nodes and the content tied to each node. You can adapt the map for needs analysis, onboarding planning, stakeholder intake, performance consulting, workflow support, or AI-assisted learning strategy conversations.
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.
Resource 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.