About the Project
Audience: Tech Professionals, Employees in Leadership Positions
Responsibilities: Instructional design, eLearning development, action mapping, storyboarding, visual design, authoring
Tools Used: Articulate Storyline 360, MindMeister, Figma, We Are Learning AI, SCORM Cloud, PowerPoint
The Problem
Technical professionals are often promoted into leadership roles based on their strong technical skills, but many lack formal training in communication and empathy. This gap can lead to workplace conflict through miscommunication, reduced team trust, and decreased collaboration within technical teams. This need was further validated through learner analysis, including empathy mapping, which revealed that many technical leaders felt uncertain about how to apply “soft skills” in real workplace situations.
The Solution
To address this, I designed a scenario-based e-learning module focused on developing empathy as a leadership skill for technical professionals. The training combined structured instructional content with interactive branching scenarios that allowed learners to practice real-world decision-making in a safe environment.
My Process
I used the ADDIE model to develop this scenario-based e-learning project.
Analyze
I used a needs analysis and learner personas to identify the business need to reduce workplace conflict escalations and defined the target audience.
Design
Using an action map, I translated the business goal into measurable leadership behaviors and structured the course to prioritize practice over passive content.
Develop
I built the course in Articulate Storyline 360, developing interactive scenarios with branched decision paths and immediate, behavior-based feedback.
Implement
The course was prepared for delivery via an LMS, publishing it as a SCORM package from Articulate Storyline 360 to ensure compatibility and tracking.
Evaluate
I evaluated course effectiveness through scenario performance data, built in knowledge checks, and learner surveys.
Action Map
I began the design process by creating an action map using Cathy Moore's approach. I identified a measurable business goal, defined the key leadership behaviors required to achieve it, mapped practice activities to those behaviors, and included only the essential content needed to support performance.
This approach keeps the focus on real-world behavior change rather than content consumption. By aligning practice directly to job-critical actions, the learning experience is more relevant, efficient, and effective at driving measurable business outcomes.
Text-Based StoryBoard
I developed a text-based storyboard to map each scenario, including decision points and tailored feedback for both effective and ineffective responses. This storyboard served as the foundation for the entire project, ensuring alignment between the learning objectives, practice activities, and desired real-world outcomes. The script was intentionally written to be human-centered and realistic, reflecting authentic workplace conversations leaders are likely to encounter. I also prioritized meaningful, behavior-based feedback to help learners understand not just what to choose, but why it matters and how to improve their approach in future interactions.
Visual Mockups
The visual mockups translated the project’s instructional strategy into a cohesive, learner-centered experience. I developed a style guide to ensure consistency in typography, color, and layout, creating a clear visual language that supports usability and engagement. Using this foundation, I designed sample screens in Figma to demonstrate how content, interactions, and feedback would appear in the final product. These mockups served as a bridge between concept and development, helping validate design decisions and ensure the learning experience felt intuitive, polished, and aligned with real-world application.
The empathy journey map was a central design element, serving as the primary navigation point for the course. I intentionally designed this screen to feel like a guided journey, using a forest and river motif to visually represent learner progression from start to finish. Iconography was carefully developed to remain clear and legible while supporting the overall theme. The color palette of blues with green accents reinforces a calm, natural atmosphere that aligns with the course tone and encourages focus.
Additionally, a patterned bottom border was used as a visual cue to draw attention to navigation controls, helping learners intuitively locate key Storyline features such as previous and next. To further ground the experience in real-world application, slides featuring character interactions incorporate office-style backgrounds, creating a familiar workplace context that supports scenario realism and learner engagement.
Interactive Prototype
To bring the experience to life in Storyline 360, I translated my storyboard and visual mockups into a fully interactive prototype, using them as the blueprint for both functionality and learner flow. The empathy journey map served as the central navigation hub, and I leveraged variables and triggers to create a progressive unlocking experience. This allowed learners to move forward only as each section was completed. This approach reinforced a sense of progression and encouraged intentional engagement with each scenario.
I built interactions and feedback directly from the storyboard, ensuring alignment between the intended learning outcomes and the on-screen experience.
I designed a drag-and-drop activity where learners categorize dialogue as empathetic or non-empathetic, reinforcing key concepts through active practice. Using layers, immediate feedback is provided with a check for correct responses and an X for incorrect ones. A variable tracks learner performance throughout the activity, and those who score below 5 are prompted to revisit the lesson, encouraging reflection and reinforcing understanding before moving forward.
I embedded the We Are Learning simulation as a web object, enabling dynamic, branching scenarios where learners navigate realistic workplace interactions. Choices lead to varied outcomes, with both positive reinforcement and corrective feedback to support real-time reflection and build empathetic decision-making. AI tools accelerated development, while platform features refined emotional tone and visual detail for a more engaging experience.
Full Development
The full development phase focused on refining both the learning experience and visual design based on feedback and iteration. I expanded the number of branching scenarios to provide learners with more opportunities to practice empathetic decision-making across varied, realistic situations. I also revisited key design elements; streamlining layouts, improving visual consistency, and enhancing interaction flow to create a more intuitive user experience. These updates ensured the final product was not only instructionally aligned, but also polished, engaging, and responsive to learner needs.