All-Star Service: Handling Customer Issues Like a Pro
This concept project is a scenario-based eLearning experience designed to help new customer service representatives handle common retail issues with professionalism and empathy. Set in a sports store environment, learners interact with AI-powered customers whose responses change based on the quality of service provided, and receive mentor feedback to strengthen real-world customer service skills.
Audience: New customer service representatives at ProGear Sports Store (concept scenario)
Responsibilities: Instructional design, eLearning development, action mapping, scenario writing, storyboarding, visual design, AI integration, authoring
Tools Used: Articulate Storyline 360, Figma, JavaScript, ChatGPT, Claude, Canva, MindMeister, Google Docs
The Problem
ProGear Sports Store is a conceptual retail company specializing in sports and fitness equipment. New customer service representatives often struggle to handle customer complaints effectively, leading to frustrated customers, lost sales, and negative brand perception. Many reps lack the skills to de-escalate tense situations, communicate clearly, and provide actionable solutions. Without proper training, even small service missteps can escalate into lost customer trust and missed opportunities for cross-selling or retention.
The Solution
After identifying the problem, I analyzed customer service interactions to determine whether the issue was due to a lack of skill, knowledge, or both. I found that new representatives often lack confidence in handling emotional customers, struggle to apply empathy, and are inconsistent in providing clear, solution-oriented responses. To address this, I designed a scenario-based eLearning experience where learners interact with AI-powered customers in a safe, simulated retail environment. The course allows them to practice applying empathy, problem-solving, and professionalism while receiving real-time, mentor-style feedback — building skills they can immediately apply on the job.
My Process
To plan and create an effective learning experience, I followed the ADDIE Model of instructional design — Analysis, Design, Development, Implementation, and Evaluation. This framework guided an iterative process of research, design, feedback, and refinement. I began by analyzing the core challenges new customer service representatives face, then created an action map to define performance-based goals. I developed a detailed storyboard and visual mockups, built an interactive prototype in Figma, and integrated AI-powered branching conversations by building JavaScript in Articulate Storyline 360. After development, I implemented the full course and conducted user testing to evaluate engagement, realism, and skill transfer.
Action Map
For this project, I consulted with a friend with years of retail sales experience as my subject matter expert (SME) to co-develop the action map and define the overall goal. We focused on improving how customer service representatives handle challenging customer interactions. To measure success, I integrated an AI-powered store manager to evaluate user responses in real time. Based on this, we identified the key actions and decision-making behaviors needed to help users apply empathy, problem-solving, and professionalism more effectively in customer service scenarios.
Text-based Storyboard
After identifying the key customer service actions, I prioritized the most important decision points to highlight in the learning experience. Instead of multiple-choice options, the learner interacts in a chat box, typing responses directly to the customer. The AI-powered customer reacts in real time, with emotional states shifting between Frustrated, Angry, and Satisfied depending on how well the learner applies empathy, apology, clarity, problem-solving, tone, and actionable guidance.
Visual Mockups
After the text-based storyboard was approved, I moved into the visual design phase by creating a mood board, style direction, and high-fidelity mockups in Figma. I focused on designing a clean and modern retail environment that reflects a realistic in-store experience.
To maintain consistency, I established a color palette and typography system that aligns with the project’s tone and usability goals. I incorporated character visuals and store environments to support immersion, ensuring the design reinforces the conversational, real-world nature of the training. These mockups helped define the look and feel of the experience before moving into full development.
Next, I created wireframes and high-fidelity mockups to define the layout for each type of slide and ensure a consistent user experience across the project. While developing the visuals, I leveraged ChatGPT to generate character variations with different emotional expressions—such as frustration, satisfaction, empathy, and anger—to reflect realistic customer interactions. These assets allowed me to align the visual design with the conversational nature of the training and maintain consistency with the overall project style.
Interactive Prototype
Before developing the full solution, I created an interactive prototype to validate the learning experience and gather early feedback on usability and flow. This approach allowed me to refine key decision points and ensure the experience aligned with real-world customer service interactions before full development.
Using Articulate Storyline 360, I designed a chatbot-style simulation where learners respond directly to an AI-powered customer instead of selecting predefined answers. The prototype focused on a realistic service scenario, where the customer’s emotional state dynamically shifted (e.g., frustrated, angry, satisfied) based on the learner’s responses. This enabled testing of how well the experience reinforced critical skills such as empathy, apology, clarity, problem-solving, tone, and actionable guidance.
To enhance usability, I incorporated visual and interaction cues to guide learners through the experience, ensuring key elements—such as the mentor feedback and evaluation criteria—were easily accessible. Based on feedback, I simplified the use of sound and reduced unnecessary elements to maintain focus, applying principles such as coherence and signaling to improve learning effectiveness.
The prototype also introduced personalized elements, including user-inputted names and a dynamic performance meter that responded to learner choices. I leveraged variables, states, and layers to create responsive interactions and subtle animations that increased engagement without overwhelming the user.
After multiple rounds of testing and iteration, I refined the interactions, feedback flow, and visual design before moving into full development.
Full Development
The full development phase focused on bringing the experience to life while maintaining strong visual and interaction consistency throughout the project. I translated the prototype into Articulate Storyline 360, using states, layers, triggers, and custom JavaScript to build a dynamic and responsive learning experience.
AI-Generated JavaScript Development
A key feature of this project is the dual AI-powered interaction system. The AI-powered customer responds dynamically to the learner’s input, shifting between emotional states such as frustration, anger, and satisfaction to simulate realistic customer interactions. This was enabled by integrating AI-generated JavaScript, using tools like Claude to help draft and refine the underlying logic and conversational flow. The chat interface allows learners to type open-ended responses, creating a more authentic and flexible interaction compared to preset choices.
In parallel, an AI-powered store manager evaluates the learner’s responses in real time, providing immediate, contextual feedback across key customer service skills including empathy, apology, clarity, problem-solving, tone, and actionable guidance. I built this evaluation system using JavaScript to connect user input, scoring logic, and feedback delivery, ensuring a seamless interaction between the simulation and assessment.
To further enhance engagement, I incorporated gamification elements, including a badge system where learners work toward earning three badges by demonstrating strong performance across scenarios. This approach reinforces learning outcomes while motivating users to improve their responses and progress through the experience.
