Cyber Challenge

When Tim Slade announced the June Cybersecurity Challenge, I knew I wanted to create something fast-paced, practical, and communication-centered. Instead of warning slides or generic threats, I wanted learners to step into a realistic digital space—where the dangers look like work, not warnings. The challenge was based upon a hypothetical company, Cyvex.

1. Concept & Intent

I began by mapping how phishing and spoofing show up in everyday communication—not as obvious red flags, but as casual messages in workspaces like Slack or Teams. The idea: embed six threats inside natural-sounding team chats. Let users scroll, question, and catch the risks themselves.

2. Video Intro (Canva)

To set the tone, I built a short intro video in Canva, using the branded fonts from the challenge's style guide (Michroma and Poppins) and dark-themed visuals with Neon CTA (#E52AF2) accents. It’s minimal, modern, and introduces the objective of the lesson.

3. Environment Build (Storyline 360)

The simulation is hosted in Articulate Storyline 360. I customized with the interface with HTML to mimic a familiar chat workspace, layering conversations with clickable triggers and embedded alerts. When all six threats are found, a completion certificate is unlocked—a subtle reward for sharp attention.

4. Custom Styling (HTML + CSS)

To elevate the realism and polish, I injected custom HTML and CSS for interface layout and visual hierarchy. Everything aligns with my style guide:

• Fonts: Poppins (body), Michroma (UI), Bruno Ace SC (headers)
• Color Palette:
  • Dark Grey #262626 for background
  • Purple #392C84 for primary panels
  • Neon CTA #E52AF2 for highlights and hover states
• No faces. No emojis. No cliché hacker graphics. Just sleek, futuristic design.

5. Progress Logic (JavaScript)

I used JavaScript to track user selections and trigger milestone completion:

javascriptCopyEditwindow.addEventListener("message", function(e) {
if (e.data === "triggerMilestone") {
var player = GetPlayer();
player.SetVar("MilestoneReached", true);
}
});

When all six threats are clicked, this logic sets the variable for success and shows the final message and certificate.

6. Fullscreen Compatibility

Special attention was given to ensuring full functionality in both regular and fullscreen views—something often overlooked in simulations. JavaScript events were tested to ensure the slide progression and end-state certificate worked seamlessly in all modes.

7. Rapid Turnaround

The entire experience was scoped, scripted, built, and deployed within the month—thanks to a combination of pre-built brand assets, modular design habits, and a clear vision. Tools used:

• Articulate Storyline 360
• Canva (for video)
• HTML/CSS for custom layout
• JavaScript for logic triggers

Final Product

• Knowledge Check
• 1 realistic team chat interface
• 6/10 interactive threats
• 1 smart certificate