.png)
The Feedback Simulator: A Branching Scenario
A custom-coded interactive simulation used to model real-time behavioral consequences in leadership development.
This project showcases the design and development of a reusable branching simulation framework for enterprise leadership development. Created to help people managers practice difficult coaching conversations using the Situation, Behavior, Impact (SBI) feedback model, the experience bridges the gap between understanding a communication framework and applying it in realistic workplace conversations.
To accelerate development, I used generative AI to build the underlying application architecture in JavaScript, eliminating many of the timeline and variable management limitations found in traditional authoring tools such as Articulate Storyline. This allowed me to focus development time on instructional design, learner experience, and branching strategy rather than repetitive technical implementation.
Audience: New and mid-level people managers.
Tools: Articulate Storyline 360, HTML, JavaScript, Visual Studio Code, GitHub Pages.
Note on Project Origin: This project showcases the design of a reusable branching simulation framework for enterprise leadership development. While organization-specific details have been anonymized to protect confidentiality, the instructional strategy, interaction design, branching architecture, and technical implementation accurately represent the original work. The experience teaches leaders to apply the Situation-Behavior-Impact (SBI) feedback model through realistic practice conversations designed to improve feedback quality and coaching confidence.
Problem & Solution
An annual employee engagement survey revealed a recurring need among people managers: they wanted more support navigating difficult coaching and performance conversations. While managers had access to leadership resources, there was no consistent, company-wide approach that defined what effective coaching looked like "the company way."
Because developing talent internally was a strategic priority for the organization, Talent Management partnered with Learning & Development to create a scalable learning experience that would help managers confidently apply the Situation, Behavior, Impact (SBI) feedback model during conversations with their direct reports.
Rather than creating another informational resource, I designed and developed a custom-coded branching simulation that allowed managers to practice coaching conversations. The experience bridges the gap between understanding the SBI framework and applying it during emotionally realistic conversations, giving learners an opportunity to experience the consequences of ineffective feedback before practicing more effective approaches.
My Role
I served as the lead instructional designer and developer for this project.
My responsibilities included:
-
Conducting the Learning Needs Analysis
-
Facilitating stakeholder meetings
-
Defining learning objectives
-
Storyboarding the branching experience
-
Designing the visual interface
-
Developing the simulation using HTML, CSS, and JavaScript
-
Creating the branching architecture and state management
-
Building reusable design components
-
Conducting quality assurance and stakeholder reviews
Process
Every learning project I develop begins with understanding the performance problem, not assuming training is the answer.
To kick off this project, I created and facilitated a Learning Needs Analysis (LNA) with stakeholders from Talent Management, People Services, Operations, and Technology. Using a structured discussion guide, we identified the business challenge, affected audiences, root causes, desired performance changes, and measures of success.
Those conversations revealed that managers weren't struggling to remember what SBI stood for; rather, they struggled applying it during conversations with employees.
With that insight, I collaborated with the Manager Enablement team to define the learning objectives and translate existing coaching content into an interactive experience focused on behavioral practice rather than knowledge recall.
Because the project had an aggressive timeline and limited SME availability, I relied on rapid storyboarding, iterative stakeholder reviews, and AI-assisted development workflows to quickly validate ideas and deliver a functional prototype.
Storyboarding
Rather than designing a traditional knowledge check that asked learners to identify the components of the SBI model, I designed the storyboard around authentic managerial decision-making.
The simulation challenges learners to navigate a realistic one-on-one coaching conversation where each decision influences the employee's emotional response and the overall direction of the conversation.
The branching architecture intentionally represents three common managerial approaches:
-
Character-focused feedback, where managers criticize personality instead of observable behaviors.
-
The "praise sandwich," where difficult feedback is diluted to avoid discomfort, resulting in unclear expectations.
-
Behavior-based SBI feedback, where managers focus on specific situations, observable behaviors, and measurable impact.
I intentionally designed every branch, including incorrect paths, to provide meaningful learning opportunities. Rather than immediately informing learners they selected the wrong answer, the simulation allows them to experience the consequences of ineffective coaching before providing guided reflection.
By allowing learners to safely fail inside the simulation, the experience reinforces why the SBI framework works instead of simply telling learners that it does.
Branching Map
Storyboard
Final Simulation
Development
To create a conversational experience that felt responsive without relying on traditional authoring-tool variables, I developed a lightweight JavaScript state engine that dynamically controls the scenario.
Instead of navigating between dozens of static slides, the application stores conversation paths as structured data objects. Each learner choice updates dialogue, character expressions, and available responses quickly, creating a seamless conversation while reducing development overhead.
This architecture also made the simulator easier to maintain, expand, and reuse for future leadership scenarios.
One design decision I was particularly intentional about was visualizing the consequences of learner choices through Alex's changing emotional state. Rather than simply displaying "Correct" or "Incorrect," learners observe how ineffective communication impacts the employee before receiving instructional coaching at the conclusion of the scenario.
Visual Design and Reusability
Although this project was developed for a specific leadership initiative, I intentionally engineered it as a reusable branching simulation framework rather than a one-off learning asset.
Using CSS custom properties and modular JavaScript architecture, I separated the instructional logic from the visual presentation. Core interface elements (including colors, typography, dialogue components, and interaction styles) can be updated globally without modifying the underlying branching engine.
This allows the same simulation framework to be quickly adapted for different organizations, leadership topics, or coaching scenarios while maintaining a consistent learner experience.
From an instructional design perspective, this approach significantly reduces future development time while providing a scalable foundation for additional behavioral simulations.
Reusable Code (Template)
Implementation Guide
