Overview This gamified learning platform UI design turns soft-skills training into a quest-driven game called Atlantis, where empathy, coaching, and emotional intelligence level up like RPG stats. The brief was to make corporate learning feel like play — wrap real skill outcomes in characters, quests, points, and rewards so learners come back. We designed a neon-on-black game interface that holds the energy of a console title while keeping the learning content clear and trackable — see more web design work or explore our full design services.
The Design Approach The direction is dark, glowing, and game-native: deep black canvas, emerald neon accents, soft glass panels, and a persistent HUD top bar showing progress, points, and settings. Every screen reads like a game menu — rounded glowing cards, high-contrast headings, and clear primary buttons. Across the flow, the gamified learning platform UI design balances spectacle with usability, so the interface entertains without burying the skill, time estimate, or learning outcome a user needs to see.
Pages We Designed The platform spans the full game loop. A branded Welcome screen opens with logo and Play. A Select Character screen sets the narrative — stats for Attack, Speed, Defense, Damage, a character bio, and Enter Name. A module Welcome screen surfaces skills, a time estimate, and the learning outcome. A Quest grid lists quests with point progress, and a Quest Complete screen pays out points and an Empathy Pro badge. The persistent HUD ties every screen together.
Key Outcomes Surfaced The design makes progress and reward impossible to miss. The HUD keeps points, percent complete, and currency visible at all times. Each module front-loads skills, time, and outcome before the learner commits. Quests show point progress on every card; completion screens make the reward and skill level-up explicit. The character layer adds stakes and identity, turning a training checklist into something a learner actually wants to finish.
Built to Convert The result is a learning platform that earns repeat sessions by feeling like a game, not a course. Consistent HUD, clear quest progress, and tangible rewards keep learners moving through the skill tree. Built on a modern responsive stack with React, the interface scales cleanly from welcome screen to quest grid. Want this kind of engagement for your platform or product? Reach us at hello@craxinno.com or craxinno.com.
