Macmillan Education
Senior front‑end development for Macmillan Education's sophisticated, interactive, multilingual Open Mind platform, built for international learners with QTI and Google Polymer.
In Detail
Open Mind Digital was Macmillan Education's web‑based learning platform, first released in 2015 as a digital companion to its printed course materials. The platform supported school students, teachers, and adult learners through interactive exercises, media‑led activities, and multilingual content delivered across international education markets.
The product had two main client‑side layers. The first was a custom JavaScript application framework built with Google Polymer, which ingested QTI data supplied from an external LMS. The second was a front‑end layer of accessible Web Component templates that rendered that data as interactive learning experiences.
Those interactions included drag and drop, video, audio, questions and answers, timed quizzes, free‑text completion, answer states, subtitles, and media cue points. The challenge was to make these patterns robust, reusable, accessible, and compatible across a demanding browser‑support matrix.
My initial responsibility was to develop interactive templates from wireframes and PSD designs. These were built as a standalone Node.js prototype with automated build tooling, Sass, and BEM, giving stakeholders a working environment for review before the templates were integrated into the production application.
As the platform matured, we evaluated AngularJS before moving to Polymer and Web Components. Polymer allowed the team to reuse the prototype work, generate components from the existing template codebase, and build a production pipeline around a more modular component model.
Interactive Exercise Templates
The platform needed reusable templates for different exercise types, including sentence completion, drag and drop, multiple choice, audio‑led questions, and video‑based activities. Each template had to support clear answer states, learner feedback, and content variations from the QTI source.
Media‑Led Learning
Video and audio were central to the learning experience. I worked on custom JavaScript behaviour for media players, cue points, subtitles, and timed interactions, while maintaining compatibility with older browsers required by the education market.
Component Pipeline
The early Node.js prototype became a bridge into the production Web Components application. By keeping the templates modular, Sass/BEM‑based, and build‑tool driven, the team could move from stakeholder‑review prototypes into reusable Polymer components without discarding the initial front‑end work.
