Joico Cut & Color Webinar

In early 2025 Joico launched Confident Classics, a multi-year certification program teaching hairstylists across the EMEA region nine classic haircuts and their color techniques, built on three core principles: line, graduation, and layering. This webinar is the foundation of that program, covering the shared philosophy every stylist needs before the hands-on tutorials: consultation, face shapes, cutting philosophy, and color philosophy.

Joico didn't want yet another passive video course. The idea was an interactive webinar: short video lessons broken up by quizzes and drag-and-drop exercises, so knowledge gets tested on the spot and people actually stay engaged instead of letting a video play in the background.

One practical constraint shaped the architecture: the videos, the password check, and the result emails all live on a separate server from the app itself. Getting the two to talk to each other safely across domains was part of the job.

I built the course engine and video system first, then added the minigames over time as content came in.

The whole course is defined in a single data structure: chapters, paragraphs, which video plays where, and which game follows it. The app builds its menus and quiz screens from that data at runtime, so adding or reordering content never meant rebuilding screens by hand. Progress and scores are saved in the browser, so a stylist can close the tab and pick up where they left off.

Videos play in an HTML5 layer on top of the WebGL canvas and are fetched from the client's server by a simple naming convention (chapter-paragraph), with fallbacks in place if a file isn't there yet. On the server side I wrote the PHP backend: the password check (with the actual credentials kept out of reach of the browser), the video hosting, and a security setup that only lets the right domains talk to the server.

For the drag-and-drop games I built a reusable dragger framework. Hit areas are drawn visually in the PlayCanvas editor by placing corner points, and the code turns those into precise click regions at runtime. It works with both mouse and touch, and it was deliberately kept generic so it could carry over to other projects.

A password-gated e-learning webinar, live at joico.leerplein.eu and framed on joicoacademy.com. Five chapters (Introduction, Consultation, Face Shapes, Cutting Philosophy, Color Philosophy), hosted by Harry, an illustrated hairdresser who presents the lessons. Each chapter mixes video lessons with six types of interactive exercises: single and multi-answer quizzes, picking the right hairstyle for a face shape, dragging terms to their definitions with stretching connector lines, and dragging hairstyle cutouts onto a face where they snap and cross-fade into place. At the end, stylists get their final score mailed to them in a branded Joico email.

The webinar is live and was received very well by Joico. And since the Confident Classics tutorial series keep rolling out through 2027, it stays the entry point for new participants for years to come. It was also the first of two Joico projects in the same learning program: the soft-skill training with the AI-driven virtual client followed right after.

The lasting takeaway for me is the dragger framework. I kept reusing and optimizing it across projects for years afterwards, which is exactly what it was built for.