LEARNING DESIGNER
Mayer’s Principles in Action
(Storyline 360)
In this scenario-based module, you’ll help a team of junior instructional designers strengthen their slide designs by applying evidence-based principles.
Project at a Glance
-
Type: Scenario-based eLearning (Storyline 360)
-
Audience: Junior IDs learning to apply Mayer’s Principles
-
Goal: Turn theory into practical design decisions
-
My Role: End-to-end design & development
-
Tools: Articulate Storyline 360, Vyond, Miro, MindMeister, Figma, Adobe Express, Canva, Chat GPT, Snagit, unDraw, Freepik, Google Docs
-
Key Features: Branching choices, contextual feedback, clean visual design, performance-focused practice
The Problem
Skillbridge, a London-based instructional design agency, noticed that many of its junior designers were confident with tools and technology but struggled to apply learning theory to their design work. While they could build functional slides, their designs often overlooked key evidence-based principles - resulting in content that didn’t fully support how people learn. The agency needed a practical, scenario-based training resource to help its team translate theory into effective, learner-centred design decisions.
The Solution
After analysing the team’s needs and consulting with senior stakeholders at Skillbridge, I recommended a short, scenario-based e-learning module. This format would allow junior instructional designers to complete the training independently, fitting easily around project work and client deadlines. It also meant that the experience could be reused for future hires, making it a scalable and time-efficient solution.
Alternative formats were considered, including live workshops or mentoring sessions. However, these would have required scheduling time with senior designers, which wasn’t always feasible across distributed teams. The asynchronous e-learning format provided the flexibility Skillbridge needed, allowing learners to engage at their own pace while still receiving guided, contextual feedback from the on-screen mentor.
The Process
I followed the ADDIE model to guide the design and development of the training:​
Analysis
-
Reviewed Skillbridge’s internal training approach and identified a gap between theory and practice.
-
Confirmed that junior designers needed guided, hands-on practice applying Mayer’s Multimedia, Coherence, and Signalling Principles.
Design
-
Outlined the course structure and learner journey in Miro, beginning with a reflection task to activate prior knowledge.
-
Designed scenario-based interactions in which each junior ID presented a draft slide for feedback.
-
Created a tabbed interaction showing examples and non-examples for each principle to build conceptual understanding before applying it.
Development
-
Built the module in Articulate Storyline 360 using layers, variables, and branching to simulate real client review scenarios.
-
Used Figma, Canva, Vyond, and Freepik to design consistent, clean visuals and animated feedback sequences.
Implementation & Testing
-
Focused on accessibility, clarity, and cognitive load to ensure the course modelled Mayer’s principles.
-
Tested interactions and feedback flow to ensure a seamless learner experience from reflection to scenario completion.
Gagné’s Nine Events of Instruction
To guide the design of each learning moment, I mapped interactions to Gagné’s Nine Events of Instruction.
The module opens with a reflection task to capture attention and activate prior knowledge, followed by clear objectives introduced through Billie, the mentor character. Learners then explore examples and non-examples of Mayer’s principles, apply them in realistic scenarios and receive targeted feedback. Retention is supported through a downloadable job aid and an optional custom GPT tool for continued practice beyond the module.
Action Map
To ensure the course directly supported business goals, I used Cathy Moore’s Action Mapping method to connect learning design decisions to measurable performance outcomes.
​
-
The central business goal identifies the desired organisational result - improving client feedback and reducing redrafting time.​
​
-
From this goal, three key actions show what instructional designers need to do differently in their day-to-day work.​
​​
-
Each action branches into practice activities that let learners apply Mayer’s Multimedia, Coherence, and Signalling Principles in realistic contexts. These tasks mirror the real decisions designers make when creating or reviewing slides.​
​​
-
The information required represents what learners would need in the moment of performance to complete each activity successfully - such as visual examples, reference checklists, or sample language stems. These are concise, job-relevant resources that support action rather than deliver theory.​
​​
-
Finally, support solutions describe how the workplace can reinforce these behaviours beyond the course, through mentoring, feedback, and shared tools.​
​​
-
Together, these elements ensure the training drives genuine performance change rather than just knowledge recall.
Text-based Storyboard
After completing the Action Map, I created a text-based storyboard to outline each screen, interaction, and learner decision. The storyboard served as a blueprint, ensuring every scene aligned with the business goal and the practice activities identified in the map.
​
Learners are introduced to Billie, a mentor character, ​who provides supportive feedback and models clear, theory-based reasoning throughout. This creates an authentic, guided environment that mirrors real design reviews.
Learners begin with a short reflection task, then guide a team of junior instructional designers through realistic scenarios. Each designer presents a slide that needs improvement, and the learner decides how to refine it using Mayer’s principles.
Throughout the module, learners can explore a tabbed interaction containing concise explanations and visual examples of each principle. This section is optional, allowing learners to review or skip depending on their prior knowledge - making the course accessible and relevant to all experience levels.
Visual Mockups
To bring the storyboard to life, I created a mood board and style guide to define a consistent, accessible visual identity. The design combines a clean, modern aesthetic with warm, professional tones that reflect the clarity of Mayer’s principles.
​
Using balanced layouts, clear typography, and a focused colour palette, I refined wireframes and mockups for each principle. I applied UI principles to create visual consistency and hierarchy - using colour, spacing and alignment to guide attention and make content easy to follow. Every visual choice was made to support comprehension and reduce cognitive load.
Title Wireframe
Title Basic Mockup
Title High-fidelity Mockup
Interactive Prototype
I built the interactive prototype in Vyond and Articulate Storyline 360, bringing the storyboard to life through scenario-based interactions, feedback and light animation.
Each section presents a realistic design challenge where learners apply Mayer’s principles, explore examples and receive guidance from Billie, the mentor character.
​
An optional tabbed interaction offers quick access to explanations and examples, making the experience adaptable for learners at different levels of familiarity with Mayer’s principles. I focused on accessibility and usability, incorporating clear navigation, structured layouts and contrast-checked colours to create an engaging, inclusive learning experience. UX principles also guided the flow and pacing so learners could move through scenarios easily and receive feedback at the right moments.
​
In Vyond, I designed diverse characters to reflect real workplace settings and ensure a broad range of learners could see themselves represented in the scenarios. This reinforces the project’s goal of making learning both inclusive and authentic.
Vyond
Storyline
Full Development
After gathering feedback on the prototype, I completed full development in Articulate Storyline 360, refining interactions, pacing, and accessibility. Each scenario was expanded to cover three of Mayer’s principles, with consistent structure and visual flow.
​
Learners receive tailored feedback from Billie, along with a downloadable job aid and access to a custom GPT practice tool for continued skill development. Design decisions across the project focused on guiding attention, supporting focus, and reinforcing Mayer’s principles through authentic, applied practice.
Job Aid
GPT Practice Tool
Technical Enhancements
Beyond the core instructional design, I used JavaScript to add lightweight, interactive features. A validation script ensures learners enter realistic names (3–20 characters) during sign-in, and a confetti animation celebrates successful completion. These enhancements reinforce positive learner emotion and attention to detail in interaction design.
JavaScript: Learner Name Validation (3–20 Characters)
JavaScript: Confetti Celebration Animation
Implementation and Testing
To ensure a smooth learner experience, I published this project as a SCORM 1.2 package and uploaded it to a Moodle LMS environment that I set up for testing. I configured completion settings, enrolled a test user and verified tracking and reporting functionality.
Scorm 1.2 package in Moodle
Results and Reflection
Business Goal Alignment
​
This learning experience was created to support the following business goal:
Increase positive client feedback and reduce redrafting time by 25% by the end of Q4
The course addresses this goal by upskilling junior instructional designers in applying Mayer’s Multimedia, Coherence, and Signaling Principles - evidence-based strategies that improve the clarity and effectiveness of instructional materials. By practising these skills in realistic, scenario-based challenges, learners are better prepared to produce high-quality work that aligns with client expectations and requires fewer revision cycles.
​
Kirkpatrick Model of Evaluation
​
I used the Kirkpatrick Model of Evaluation by gathering data on his four levels of evaluation: Reaction, Learning, Behavior, and Results.
Level 1: Reaction
​
To evaluate learner engagement and perceived value, a feedback survey was created and distributed alongside the module. At the time of publication, responses had not yet been collected. However, the survey includes targeted questions designed to assess:
​​
-
Overall engagement with the course
-
Ease of navigation and user experience
-
Confidence in applying Mayer’s principles
-
Use and perceived helpfulness of optional resources (e.g., mentor feedback, tabbed examples, job aid, GPT tool)
-
Likelihood of recommending the course to other instructional designers
By gathering both quantitative and qualitative feedback (e.g. favourite aspects, areas for improvement), this survey aims to inform future iterations of the course and evaluate its effectiveness in meeting learner needs. The data will also support reflection on the course’s alignment with its intended learning outcomes and business goal.
​​
Level 2: Learning
​
Although no formal assessment was conducted, the course was intentionally designed to move beyond passive exposure to theory. Learners were required to make design decisions in realistic contexts and receive immediate, contextual feedback.
These applied challenges were supported by multiple forms of scaffolding, including examples, mentor guidance and just-in-time explanations.
Based on the structure of the experience and alignment with adult learning principles, the course is likely to support increased confidence and competence in applying Mayer’s principles to real-world instructional design challenges.
​
Level 3: Behaviour
​
While this course has not yet been deployed within a live team environment, it includes features that support behaviour change on the job. Specifically:
​
-
A downloadable job aid for real-world reference
-
A custom GPT tool for continued, low-stakes practice and reinforcement
​​
These resources are designed to encourage long-term retention and independent application of skills, both of which support the goal of reducing redrafts and improving client-facing deliverables.
Level 4: Results (Projected)
​​
Though formal organisational data is not available, the course design is closely aligned with the business goal of reducing client revision cycles and improving satisfaction.
The use of real-world scenarios, contextual feedback and practical resources equips junior instructional designers to make better first-pass design decisions grounded in research-backed principles.
​
If implemented within a team or organisation, the effectiveness of this module could be measured through performance data such as:
​
-
The average number of client redraft cycles before final approval
-
The percentage reduction in redraft time over a set period (e.g. by the end of Q4)
​​
For example, a 25% reduction in redrafting time could be used as a target metric. This would be measurable by comparing average project turnaround time or revision counts before and after training implementation. This type of analysis would offer a clear connection between improved design practices and time saved in client review cycles, ultimately contributing to both efficiency and satisfaction at an organisational level.
Future Enhancements and Next Steps
​
To further strengthen alignment with client-facing outcomes, a future enhancement under consideration for this module is the integration of a simulated client feedback mechanism in the final scenario. This addition would give learners clearer insight into how their design decisions align with client expectations, reinforcing the performance behaviours that contribute to fewer revision cycles.
​
This module could serve as the first in a series of applied learning theory experiences for instructional designers. Future modules might focus on:
​
-
Cognitive Load Theory – helping designers structure content to reduce overload and improve clarity
-
Keller’s ARCS Model – embedding motivation into learning experiences through attention, relevance, confidence, and satisfaction
-
Spaced Practice – designing for long-term retention and learning transfer
-
Andragogy – tailoring experiences to adult learners’ need for autonomy and relevance
By building on the scenario-based, applied format established in this course, the series could provide a comprehensive, practice-focused approach to developing high-impact instructional design skills.