e‑learning template system

After Haleon separated from GSK, internal e‑learning modules were being produced with inconsistent layouts, colors, and interactions, as there were no shared templates or brand-aligned UI patterns for course authors. This case study presents a reusable e‑learning template system that standardizes visual design, interaction patterns, and content structure across all internal training.

Duration

4 weeks

Team

Learning and Development

My Role

Designer

Problem

Every team was designing e‑learning courses independently, leading to inconsistent branding, navigation patterns, and learner experience.
There were no agreed templates or documented guidelines for slides like welcome, menus, questions, or interactive components.
This slowed down production, created rework, and made it harder for employees to recognize Haleon’s new brand identity in digital learning.

Goal

Create a flexible but consistent e‑learning template that any content owner could use to build courses aligned with Haleon’s new brand.
Provide multiple layout options for key slide types (e.g., intro, content, assessment, recap) so teams could stay on-brand while adapting to their learning objectives.
Document how to use and edit every component so non-designers can confidently assemble courses without breaking the design system.

Solution

Designed a modular slide library covering the full course journey: splash, welcome, main menu, chapter intros, text + image, quotes, video, timelines, recap, results, and thank-you screens.
For each critical interaction type, multiple-choice questions, drag-and-drop, process flows, flip cards, vertical carousels, step-by-step flows, and menus were created, with 4–5 on-brand layout options to choose from.
Built detailed usage notes inside the template, explaining states, button behaviors, and how to swap content while preserving typography, spacing, and color tokens.

Design approach

Mapped the end-to-end learner journey into chapters and slide archetypes (Intro, Menu, Chapter 1–4, Knowledge checks, Lightboxes) to ensure coverage of all common scenarios.
Applied Haleon’s new visual identity consistently across all screens: typography hierarchy, colour palette, icon style, and interaction feedback were systematised.
Used repeatable patterns (e.g., text with image, text with example, text with popover buttons, video with transcript layers) to keep cognitive load low and navigation predictable.

Key template components

Intro & navigation: Splash screen, welcome slide, and main menu layouts that establish the course structure and global navigation behavior.
Learning content: Templates for text with images, quotes, examples, popover buttons, videos with transcripts, timelines, vertical carousels, and process graphics with buttons.
Interactivity & assessment: Multiple choice, drag-and-drop, flip cards, step-by-step sequences, recap slides, and results screen, each with multiple visual variations.

Documentation and handover

Embedded slide-level notes describing how each layout works, where to place copy, how to replace media, and what not to change to stay on-brand.
Documented interaction logic for layered slides (e.g., reveal states, help lightboxes, transcript layers), so developers and trainers could implement behavior consistently.
Packaged everything as a single master template that could be cloned and adapted, reducing dependence on design support for everyday course production

Impact

Enabled internal teams to build new Haleon-branded e‑learning modules by selecting from a predefined library instead of starting from scratch.
Improved visual and interaction consistency across courses, reinforcing Haleon’s new identity for employees while cutting design time and rework for future learning programs.