Remote Tech Support Troubleshooting: Integration Rollout Upskilling
An AI-driven training simulation that turns technical support call center training into an interactive, voice-responsive experience. Built with Storyline 360 and custom JavaScript to deliver real-time coaching, adaptive feedback, and measurable skill growth.
Audience: Technical Support Specialists
Responsibilities: Instructional Design, Scenario Writing, AI Integration, Visual Development, Storyboarding, JavaScript Logic, Video Editing
Tools Used: Articulate Storyline 360, JavaScript, Claude, ChatGPT, Vercel, SkyboxAI, Artlist, ElevenLabs, Canva, CapCut, Google Suite
The Problem
Call center technical support agents often face rapid burnout and high turnover rates, largely due to inadequate preparation for the realities of their role.
​
The issue is deeply rooted in a lack of performance-centered training. Agents are not prepared for the dual challenge of:
​
-
Live decision-making during unpredictable customer interactions.
-
Consistently keeping up technical expertise with evolving SaaS product rollout changes.
When training fails to prepare agents for these realities, the consequences ripple:
​
-
Open, unresolved tickets accumulate in the backlog, some remaining in the system for weeks.
-
Customer dissatisfaction increases as resolution times stretch and experiences vary from one agent to another.
Agent burnout escalates, as employees feel ill-equipped to manage high-stress scenarios or upskill into higher-level troubleshooting.
The Solution
I designed a dynamic, AI-powered simulation that immerses Technical Support Agents in lifelike call scenarios. Unlike traditional info-dump training, this solution replicates the real pressure and multitasking demands of live calls, while offering safe, practice-driven feedback.
​
This solution was:​
​Claritying: Training simplified complex technical concepts into digestible explanations that even non-technical learners could easily grasp.
Innovative: Leveraged an AI-driven tech stack that included dynamic, context-aware voice responses to elevate the learning experience.
Immersive: Designed training around authentic, real-world scenarios and a familiar agent-style interface so learners feel “at home” from the moment they begin.
My Process
I followed a structured, evidence-based approach:
​​​
-
Action Mapping to target high-impact agent behaviors.
-
Storyboard Development to script realistic calls, emotional arcs, and navigation challenges.
-
Prototype Building to test call mechanics and AI feedback loops.
-
​Iteration & Feedback to refine flow, timing, and difficulty balance.
Action Mapping
The Goal: Increase first-call resolution rates by 30% within 6 months.
I identified three core actions agents must master:
​
-
Diagnose complex technical issues systematically by asking the right probing questions and identifying key error indicators.​
-
Leverage resources effectively (ticketing system, knowledge base, peer chat) without over-relying on escalations.​
-
Handle high-stress customer calls calmly, ensuring issues are resolved while preserving customer confidence.
​
Grounded in Cathy Moore’s Map It framework, the training design follows adult learning principles that focus on not just what learners need to know, but also what they need to do. By using action mapping, I aligned every activity and scenario with these on-the-job behaviors to ensure relevance, autonomy, and measurable impact.
Text-Based Storyboard
The simulation centers around Tony, a distressed store owner facing urgent technical issues.
​
-
Spoken Word Responses: Learners speak aloud to Tony, practicing real-time call handling. AI transcribes and evaluates whether they include key troubleshooting points.
-
Tony’s Voice & Reactions: Tony responds verbally, with tone and urgency shifting based on learner choices and delays. His frustration escalates if responses are irrelevant or incomplete.
Consequences are tiered and informed by branching scenario design principles:
​​
-
Immediate: Tone of voice, interruptions, or calm acknowledgment.
-
Narrative: Search systems fail to provide required data if learners miss critical troubleshooting steps.
-
Professional: A mentor AI (Rudy) provides a debrief at the end, pointing out missed opportunities and reinforcing successes.
Visual & AI Design
The simulation was designed to replicate the desktop environment of a support agent, blending realism with interactivity:
​
-
Desktop Gameplay: Learners navigate between windows (ticketing system, company chat, and knowledge base) using near-exact replicas of real agent software UI to keep interaction intuitive.
-
Dynamic Consequences: States, triggers, and variables reflect choices visually and audibly.
-
AI Mentor Integration: Gemma offers inline coaching and Rudy provides post-call feedback, reinforcing both technical accuracy and soft skills like tone, pacing, and empathy.
Inspired by Zendesk's design
Inspiration for my Ticketing System design
Inspired by Zendesk's design
AI, Voice, & JavaScript Integration
By integrating ChatGPT and ElevenLabs APIs, I coded with Claude three disctint JavaScript AI characters to guide and enrich the learner's journey.​​
​
-
Gemma, the mentor character, provides hints and directions along the way to guide the learner.
-
Tony’s character is able to dynamically listen and speak to the learner, building realism for call practice.
-
Rudy's character provides summarative feedback based on the desired goals outlined in the Action Map.
Following Mayer’s Personalization Principle, all character dialogue is written in a natural, first-person voice to strengthen connection and engagement.
Interactive Prototype
Using Vercel to secure my API keys, I created an interactive prototype to test the flow:
​
-
Tools: Vercel + Articulate Storyline 360 + custom JavaScript.
-
Features: Branching search results, AI feedback loops, navigation tasks across multiple simulated software environments.
-
User Testing: Multiple users were used to test the beta versions to provide feedback on the ease of naviagtion, engagement, and technical accuracy.
Full Development
Using states, triggers, and variables, I developed a dynamic, interactive experience:
​
-
States: Navigation through different agent software to simulate the multi-tasking abilities required of agents.
-
Triggers & Variables: Branching ensures realistic consequences, personalized coaching, and logical scenario progressions.
Results and Takeaways
Although not implemented in a live company, the project demonstrates a transformative solution for high-turnover call center environments.
​
-
Financial Value: Reduces ticket resolution time, decreases burnout-related turnover costs.
-
Strategic Value: Improves consistency and adaptability as SaaS products evolve.
-
Personal Value: Learners gain confidence in handling stressful calls, and managers benefit from data on agent performance trends.​
​
The course allows agents to experience the consequences of their decisions in a safe, repeatable environment. The design is modular and extensible: the same scenario framework can be applied to any new SaaS product updates. Each new module would strengthen a specific troubleshooting skillset while contributing to a broader, adaptive learning ecosystem.​
​
This project is built on one belief: when companies invest in growing their agents, those agents return that investment through loyalty, excellence, and lasting impact.
