Category: Learning assets & UI design

Learning assets & UI design is about visual, audio, and interaction design elements created to elevate the learning experience.

Categories
AI-enhanced learning & creative services Custom eLearning development Learning assets & UI design

Comic-Style Global Competition Training

Interactive compliance training scene featuring two illustrated business characters discussing ethics in a global corporate office, styled in comic visuals for eLearning engagement.

Comic-Style Global Competition Training

Overview

How do you transform a dry compliance topic into an interactive compliance training? This custom-built eLearning course tackled global competition laws and business etiquette, through the lens of a comic book universe. Learners followed a young protagonist navigating ethical gray zones across international deals, backed by superpowered visuals and responsive interactivity.

Comic-style boardroom drama depicting a confidentiality-focused global compliance meeting, used in multilingual interactive training for competition law.
Superhero-style eLearning illustration of a corporate boardroom secretly discussing bid-rigging, part of a scenario-based compliance training module.
Comic-style panel from global competition law eLearning course showing fictional pharmaceutical boardroom strategy conversation, designed to teach ethical sales practices.
Interactive compliance training scene featuring two illustrated business characters discussing ethics in a global corporate office, styled in comic visuals for eLearning engagement.

What Would You Say? – Global Competition Reflection Simulator

Step into a high-stakes conversation with a competitor. In this LLM-style interaction, you’ll type your own response—and watch how your words are evaluated for compliance risk. It’s like AI… but safely scripted.

Play

The Challenge

Global competition law is dense, complex, and usually met with sighs. The challenge here was to:

  • Keep learners engaged through long-form compliance content.
  • Make legal principles feel relevant and actionable.
  • Build a story-first module that could scale globally.

The Build

I used Articulate Storyline, custom JavaScript, and a mix of motion and AI tools to make an interactive compliance training:

  • Fully custom, comic-style graphics created in Photoshop and Illustrator.

  • After Effects animation to simulate comic book panels and transitions.

  • AI-generated narration using WellSaid for consistent multilingual VO.

  • JavaScript-driven parallax effects and LLM-style free-response simulation to make user input feel dynamic and personalized—without an actual AI backend.

  • Optimized structure to support translation into 10+ languages.

Other Tools Used

Articulate Storyline

ChatGPT

Advanced Javascript

Adobe Photoshop

Adobe Illustrator

WellSaid Labs

What Made It Different

Story-first design: Learners follow a rising business star through ethical crossroads.

Comic visuals & animation: Turns dense policies into character-driven drama.

LLM-style interactions: Users input freeform answers and get smart, scenario-mapped feedback.

Localization-friendly: Designed for seamless rollout in multilingual environments.

What Happened

This project redefined what a compliance course could look and feel like. Instead of endless slides, it delivered a narrative arc, complete with conflict, stakes, and resolution—mirroring real-world pressure and decisions.

Results? Estimated 98% completion rate, with average feedback scores around 4.7 out of 5 from internal learners. The client requested future modules in a similar format, noting how the course made “the most boring content feel like a Netflix episode.

Who Is This For?

Global Ethics Trainers

Legal Compliance & HR Teams

Creative L&D Departments

Perfect for teams that want to ditch PDF policies and make compliance human.

Leadership Training Card Game FAQ

Yes! This structure works perfectly for ethics, DEI, security awareness, or anti-harassment.

I used JavaScript to simulate LLM-style input—so learners could type in reflections and receive branching responses.

It was designed with translators in mind and supports easy swapping of copy, audio, and overlays.

Looking for Personalized Demo?

Send an Email
Facebook Youtube Linkedin Behance

Let’s Talk About UI-less Experiences

Let's Talk!
Categories
AI-enhanced learning & creative services Gamification strategy Learning assets & UI design

Microgame UX Demo for Soft Skills

Jedi figure meditating beside floating holocrons with the caption “The Jedi Code Has a Peaceful Philosophy.” Educational overlay explains the Jedi philosophy and its grounding in mindfulness and stoicism.

Microgame UX Demo for Soft Skills

Overview

This was a spontaneous build created on Star Wars Day—because when your LinkedIn feed turns geeky, why not join in and prototype something useful? The result: a moral-choice microinteraction inspired by RPG games and styled like a galactic philosophy test. It’s a visual, responsive, and reskinnable Storyline piece you can drop into soft skills training, ethics scenarios, or onboarding flows.

Sith figure emitting purple lightning while summoning a holocron. eLearning screen explains how Sith holocrons store pain-based knowledge, referencing Darth Nihilus from Star Wars lore.
Interactive moral choice screen from a Star Wars–inspired soft skills eLearning module. Learners hover to choose between “Shout and curse” or “Stay calm, let it go,” triggering a visual polarity shift via a central holocron.
Jedi figure meditating beside floating holocrons with the caption “The Jedi Code Has a Peaceful Philosophy.” Educational overlay explains the Jedi philosophy and its grounding in mindfulness and stoicism.

Test your allegiance

This interactive leadership microgame uses moral reflection to guide learners through decision-making scenarios, blending cinematic design with actionable insights.

Play

The Challenge

How do you make a situational decision feel cinematic and reflective, without resorting to walls of text? I wanted something that could:

  • Feel like a game, but still function like a learning interaction.
  • Be re-skinnable for different contexts.
  • Avoid the usual radio button or basic feedback.

The Build

I used Articulate Storyline, custom JavaScript, and a range of creative tools to bring this demo to life:

  • A hover-sensitive “holocron” orb follows the mouse, changing the background dynamically

  • No dragging needed, just hover, reveal, and reflect.

  • Hidden "morality meter" determines whether you receive a Jedi or Sith ending.

  • Built entirely using Storyline’s JavaScript API, designed to push what’s possible with custom interactions.

  • Visuals created in Photoshop, Illustrator, and enhanced with Premiere Pro.

  • AI assets generated using Kling, Google Veo, and ChatGPT for overlays and interaction uses.

Other Tools Used

Articulate Storyline

ChatGPT

Adobe Audition

Advanced Javascript

Google Veo 3

Adobe Photoshop

Adobe Illustrator

What Made It Different

Custom-built hover interaction that simulates decision weight visually

RPG-style morality system with responsive state shifts

Soft skill reflection without lectures

Reusable mechanic, easily adapted to onboarding, ethics, or DEI

What Happened

Light side all the way. This is fantastic work, Kristóf! How long did this take you to create? (2 days)

Matt B.

This interaction reimagines how true/false and multiple-choice questions can be presented—ditching the default quiz format in favor of something more visual, brandable, and immersive. It’s designed to be flexible, allowing quick swaps of visuals, logic, or text to fit different learning scenarios like onboarding or compliance. By combining Storyline and JavaScript, this prototype proves how even simple knowledge checks can feel dynamic and purpose-built, moving beyond traditional checkboxes into experience-first learning design.

Who Is This For?

L&D Teams Exploring Soft Skills

Ethics & DEI Trainers

Creative Onboarding Modules

Ideal for anyone wanting to replace click fatigue with immersive, choice-driven learning.

Leadership Training Card Game FAQ

Absolutely. The current version is stylized for Star Wars Day, but the logic and layout can be adapted for ethics training, soft skills, situational judgment, and more.

Instead of basic buttons, this one uses a hover-based interaction. Learners move a glowing holocron orb to reveal decisions, and the entire interface responds fluidly—creating a game-like puzzle with meaningful learning outcomes.

Yes! It stretches Storyline’s new JavaScript API with real-time feedback logic, interactive state changes, and a hidden morality algorithm.

Sure—just reach out! Always happy to share or customize it for your team.

Articulate Storyline, JavaScript, Illustrator, Photoshop, Premiere Pro, Audition, Midjourney, Runway, Kling, Google Veo 2, and ChatGPT.

Looking for Personalized Demo?

Send an Email
Facebook Youtube Linkedin Behance

Let’s Talk About UI-less Experiences

Let's Talk!

Let's Discuss!

X

Got a question? Let’s talk!

We typically respond within 12 hours.