Cyber Defenders
A gamified e-learning experience designed to engage learners in cybersecurity best practices and essential knowledge through interactive challenges and scenario-based gameplay.
Responsibilities: Instructional design (action mapping, storyboarding, mockups, full build), visual design, e-learning development.
Tools Used: Articulate Storyline 360, Adobe Photoshop, Adobe Illustrator, Canva, Camtasia, Figma.
Note: The video above provides a brief look at the final Cyber Defenders Storyline gamified training. As this is an agency product, some content has been redacted or removed to ensure the security of agency-sensitive data.
The Project Process
The Project Process
Employees across all agency departments often lack awareness of basic cybersecurity practices, putting sensitive information and systems at risk. Common issues such as falling for phishing attempts, responding to spam emails, and mishandling passwords can lead to costly security breaches and data vulnerabilities.
Our agency's cybersecurity team conducted simulations revealing that thousands of employees were falling for phishing attempts, highlighting a significant knowledge gap.
The Problem
With the need to address this gap and fulfill the agency's mandate for annual cybersecurity training, we aimed to gamify the training, incorporate relevant data, and rewrite the content in plain language.
This approach was designed to boost engagement, improve understanding, and equip employees with practical knowledge to recognize and respond to cybersecurity threats effectively.
The Solution
Overview
To bring Cyber Defenders to life, I followed the ADDIE model, starting with a thorough analysis phase. I worked with the agency’s cybersecurity team to gather data on phishing attempts and security vulnerabilities, identifying key skill gaps to address in the gamified training. This informed the action map and storyboard, ensuring the content focused on the most critical cybersecurity best practices.
During the design phase, I created a visual proposal, outlining key design details including the training logo, font, and other essential UI elements to ensure cohesive branding and ease of use. Once approved, I moved into development, refining interactions and visuals to create a seamless, user-friendly experience in Storyline.
Upon completion, the training underwent peer evaluations, subject matter expert (SME) content reviews, and an editorial review for clarity and accuracy. An accessibility review ensured compatibility with screen readers and an engaging experience for all users. Finally, the course was approved by the Directors of Training and Development and Business Operations to ensure alignment with departmental objectives and business needs.
Action Map
I used action mapping as a foundational tool to ensure that every aspect of the Cyber Defenders training was aligned with specific learning objectives.
By collaborating with subject matter experts (SMEs) and analyzing key skill gaps, action mapping helped me prioritize the most critical cybersecurity practices to address in the training. This approach allowed me to focus on measurable outcomes and create a streamlined, engaging learning experience that directly addressed the real-world needs of our employees.
-
The foundation of any action map begins with identifying a specific issue and determining a training solution to address it. This requires clearly defining the training objective to ensure the content aligns with the desired outcomes.
Employees will reduce cybersecurity risks by identifying and responding to threats correctly, leading to a 25% decrease in security incidents over the next year.
-
The action map focuses on specific actions learners must take to achieve the central learning goal.
Recognize Suspicious Emails & Messages
Use Strong Passwords & Multi-Factor Authentication (MFA)
Report Security Incidents Immediately
Secure Work Devices & Data
Recognize Social Engineering Tactics
-
Once the action map has outlined key actions leading to the central learning goal, it's essential to identify supporting content—such as desk aids and additional training resources—to reinforce learning, enhance comprehension, and improve retention.
Scenario-Based Learning: Employees will navigate simulated cybersecurity threats and choose between two response options at each step.
Job Aid: Quick reference guide with cybersecurity best practices, examples of phishing emails, and steps for reporting incidents.
Storyboard and Wireframes
Following the action mapping phase, I developed a text-based storyboard with wireframing in Figma to structure content and interactions before development.
Using a modular approach, I outlined learning objectives, designed scenario-based challenges, and mapped user interactions. Wireframing in Figma helped visualize interactive UI elements and slide layers, ensuring alignment with the gamified theme and accessibility standards.
This process streamlined development and reduced revision time—resulting in a clear, engaging, and well-structured learner experience.
Visual Proposal and Mockups
The Cyber Defenders visual design establishes a cohesive, immersive experience aligned with the training’s cybersecurity theme. Using Canva, Adobe Illustrator, and Adobe Express, I developed a futuristic aesthetic with a bold color palette, custom typography, and high-tech UI elements.
The logo, buttons, and graphics reinforce the cyber-defense narrative, while interactive elements such as the game map along with the character cards and question slides enhance engagement. The selected fonts—Mokoto and Verdana Pro—balance a tech-inspired look with readability.
This visual proposal ensures consistent branding, accessibility, and an engaging learner experience, making cybersecurity training more interactive and impactful.
Development and Review
The development phase involved transforming the approved storyboard and visual proposal into a fully interactive, gamified training in Storyline using Adobe Illustrator and Canva. Custom graphics were integrated into Storyline, where triggers, variables, layers, states, and animations were used to create immersive scenarios. Accessibility remained a priority throughout development—I added alt text, customized focus orders, and conducted JAWS screen reader testing to ensure compliance with Section 508 and WCAG standards.
During the review phase, the training underwent rigorous testing by e-learning peers, SMEs, and departmental directors to ensure accuracy, engagement, and accessibility. Stakeholder feedback was incorporated before launch, ensuring the final product met both instructional goals and compliance requirements. Once finalized, Cyber Defenders was deployed agency-wide as part of the annual mandatory cybersecurity training program.
Storyline Build & Final Product
Storyline Build & Final Product
