Interaction Logic
Variables, triggers, states, layers, branching, persistent visited states, and replay behaviour.
← Portfolio
Stop the
Storyline 360 · Decision Simulation · Technical Learning
Stop the
Breakdown
Predictive Maintenance Decision Simulation
An interactive maintenance investigation where learners review condition data, diagnose a developing equipment problem, assess operational risk, and decide what should happen next.
PROJECT IMAGE 0101-project-hero.jpg
Project Snapshot
Built around a maintenance decision, not a content dump.
AudienceMaintenance technicians and technical learners
ChallengeDiagnose developing faults from incomplete evidence
SolutionScenario-based investigation and decision simulation
My RoleInstructional design, visual design and development
ToolsStoryline 360, JavaScript and Chart.js
FormatInteractive web-based simulation
PROCESS IMAGE 0202-project-snapshot.jpg
The Challenge
Maintenance decisions rarely come from one obvious clue.
A technician may need to compare equipment history, operator observations, condition-monitoring data, inspection findings, and operating context before deciding what the evidence means.
The learning challenge was not to teach isolated facts. It was to create a safe environment where the learner could investigate, interpret, diagnose, and act.
Design Response
Turn the learner into the investigator.
The experience moves from alert to evidence, diagnosis, risk assessment, decision, and consequence.
PROCESS IMAGE 0303-learning-experience-flow.jpgShift Brief → Alert → Investigation → Diagnosis → Risk Assessment → Decision → Debrief
Production Process
A clear path from performance problem to working simulation.
I kept the workflow focused on the decisions the learner needed to make and the evidence required to support those decisions.
01Storyboard
Plan the experience before building the interaction.
The storyboard mapped each screen, on-screen content, learner action, feedback or consequence, and development notes. This kept instructional intent and Storyline behaviour aligned.
PROCESS IMAGE 0505-storyboard-sample.png
02
Visual System
Design a consistent interface for a technical environment.
The visual system defined typography, color, buttons, states, icons, layout zones, and reusable interface elements before full development.
03Investigation Hub
Let the learner control the investigation.
Instead of presenting evidence in a fixed sequence, the hub allows the learner to choose what to inspect. Unvisited evidence is marked, and the interface remembers what has already been reviewed.
Learner-controlled evidenceMultiple information sources can be reviewed in any order.
Persistent visited statesRed indicators disappear after evidence has been inspected.
Investigation before commitmentThe learner gathers evidence before making a diagnosis.
PROCESS IMAGE 0707-investigation-hub.jpgAnnotate tabs, evidence area, visited states and red-dot logic
04Custom Development
Randomized evidence makes replay meaningful.
CV-318 can present a different controlled condition when the experience is replayed. JavaScript generates case data, passes values into Storyline, and Chart.js turns those values into condition-monitoring graphs for the learner to interpret.
PROCESS IMAGE 0808-randomized-data-javascript.jpgRandomized case → JavaScript → Storyline variables → Chart.js → learner interpretation
01Controlled randomization
Values change within designed case constraints rather than becoming arbitrary noise.
02Storyline integration
Generated values are passed into Storyline variables and used by the experience.
03Dynamic visualization
Chart.js presents condition trends that the learner must interpret as evidence.
05Decision & Consequence
The interaction does not stop at correct or incorrect.
Diagnosis feeds into risk assessment and operational decision-making. Different choices lead to different consequences and debriefs, so feedback remains connected to the maintenance context.
PROCESS IMAGE 0909-decision-paths-outcomes.jpg
Development Highlights
What the build required.
Dynamic Evidence
Controlled case generation and custom trend visualizations that change the evidence on replay.
Decision Practice
Investigation, evidence interpretation, diagnosis, risk assessment, consequences, and debriefing.
Testing & Iteration
Refine the experience, not just the screens.
01
Checked navigation and branching across the major decision paths.
02
Refined visited-state behaviour so evidence indicators remain cleared after review.
03
Adjusted replay and retry behaviour to avoid forcing learners through repeated animations.
04
Tested generated condition data for consistency with the intended case logic.
Reflection
Three principles I would carry into the next build.
Authenticity needs uncertainty.
Technical troubleshooting is more credible when learners must weigh evidence instead of spotting an obvious answer.
Interaction needs a reason.
The investigation hub is interactive because evidence gathering is part of the performance, not simply because tabs are available.
Replay should create new practice.
Randomized cases turn replay into another diagnostic opportunity rather than repetition of the same path.
Try the Experience
Ready to investigate CV-318?
Review the evidence, diagnose the problem, assess the risk, and decide what happens next.
Launch Stop the Breakdown ↗