This project involved the design and development of key gamification elements for a custom eLearning curriculum aimed at customer service for a leading game streaming platform. The goal was to enhance user engagement and motivation by integrating immersive, game-like mechanics directly into the learning experience, all while maintaining alignment with the client's strong brand identity.
As the eLearning Developer, I was tasked with creating scalable and reusable components that would function across multiple courses within the curriculum.
Articulate 360
Instructional Design
E-Learning Development
UI/UX Implementation
JavaScript
Gamification Design Principles
Customer Service
Operations
The client needed to move beyond traditional, static eLearning modules. They wanted to:
Increase course completion rates and learner motivation
Create a more engaging and rewarding experience that resonated with their gaming-savvy audience
Integrate tangible, platform-specific rewards to bridge the gap between learning and application
Ensure all custom elements were visually cohesive with their product branding and non-disruptive to the learning content
1. Dynamic & Scalable Progress Bar
Description: Designed and developed a custom progress bar that automatically scales and adjusts its increments based on the total number of slides in any given course. This provided learners with a consistent and accurate visual representation of their journey.
Technical Execution: Built using Articulate Storyline's variables and triggers to calculate the slide position relative to the total slide count, ensuring reusability across the entire curriculum without manual adjustments.
Design Focus: The visual design was crafted to match the client's product branding colour scheme, reinforcing brand identity and creating a seamless, immersive experience.
2. Integrated Points & Reward System
Description: Implemented a points system for end-of-module quizzes, visually represented by a custom apple icon within the course menu. Successfully passing a quiz with a high enough score allowed learners to "unlock" a exclusive branded emote used on the client's streaming platform.
Technical Execution: Utilized Storyline variables to track quiz scores and points and created conditional triggers to display a custom "emote unlocked" state upon success. Implemented a logic that allowed learners to re-attempt the quiz to improve their score and unlock the reward, while always preserving their highest attempt to encourage completion without frustration.
Design Focus: The reward (a chat emote) was highly relevant and desirable to the target audience, directly linking learning achievement to a valued in-platform asset.