Onboarding Visual Novel — Training & Development · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/onboarding-visual-novel/"> <meta name="description" content="A new hire's first 30 days as a branching story. Each choice shapes the ending."/> <meta name="theme-color" content="#0b1b24"/> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%93%96%3C/text%3E%3C/svg%3E"/> <style> *,*::before,*::after{box-sizing:border-box} html,body{margin:0;background:#06121a;color:#e8f4f6;font-family:Georgia,'Times New Roman',serif;min-height:100%;-webkit-text-size-adjust:100%} body{background:linear-gradient(180deg,#0e1e2a 0%,#06121a 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:680px;margin:0 auto;padding:24px 22px 80px} .crumb{display:inline-block;font-size:13px;color:#9cb8be;margin-bottom:16px;padding:6px 12px;border:1px solid rgba(196,181,253,.3);border-radius:999px;background:rgba(20,18,38,.6);text-decoration:none;font-family:system-ui,sans-serif} .crumb:hover{color:#c4b5fd;border-color:#c4b5fd} h1{font-size:clamp(22px,3.6vw,28px);margin:0 0 4px;text-align:center;font-family:Georgia,serif;letter-spacing:-.005em} .sub{font-size:13px;color:#9cb8be;letter-spacing:.04em;text-align:center;margin-bottom:18px;font-family:system-ui,sans-serif} .day{background:rgba(20,18,38,.6);border:1px solid rgba(196,181,253,.3);border-radius:999px;padding:6px 16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c4b5fd;font-weight:700;display:inline-block;margin-bottom:12px;font-family:system-ui,sans-serif} .scene{background:linear-gradient(180deg,rgba(20,18,38,.95),rgba(11,12,28,.95));border:1px solid rgba(196,181,253,.3);border-radius:18px;padding:24px;margin-bottom:16px;font-size:16px;line-height:1.7;color:#e8f4f6} .scene p{margin:0 0 14px} .scene p:last-child{margin-bottom:0} .scene .narrator{color:#c4b5fd;font-style:italic;font-size:14.5px} .scene .speaker{color:#fbbf24;font-weight:700;font-style:normal;font-family:system-ui,sans-serif} .choices{display:grid;gap:10px;margin-top:6px} .choice{background:rgba(11,12,28,.85);border:1.5px solid rgba(196,181,253,.32);color:#e8f4f6;border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;font:inherit;font-size:14.5px;line-height:1.45;font-family:system-ui,sans-serif;font-weight:500;transition:border-color .12s,background .12s,transform .08s} .choice:hover{border-color:#c4b5fd;background:rgba(20,18,38,.95);transform:translateX(4px)} .stats{font-size:12px;color:#9cb8be;font-family:system-ui,sans-serif;margin-top:14px;text-align:center;background:rgba(11,12,28,.5);border-radius:999px;padding:6px 12px;border:1px solid rgba(196,181,253,.18);display:inline-block} .stats b{color:#c4b5fd} .center{text-align:center} .modal{position:fixed;inset:0;background:rgba(2,8,13,.9);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:20;padding:18px;font-family:system-ui,sans-serif} .modal.hidden{display:none} .card{background:linear-gradient(180deg,#1a1a2e 0%,#0a0a18 100%);border:1px solid rgba(196,181,253,.5);border-radius:18px;max-width:560px;width:100%;padding:28px;text-align:center;font-family:system-ui,sans-serif} .card h2{margin:0 0 6px;font-size:23px;font-family:Georgia,serif} .card .s{color:#9cb8be;font-size:14px;margin-bottom:14px} .rules{text-align:left;background:rgba(11,12,28,.55);border:1px solid rgba(196,181,253,.2);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin-bottom:14px} .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .btn{cursor:pointer;border:1px solid #c4b5fd;background:#c4b5fd;color:#06121a;font-weight:800;padding:11px 22px;border-radius:999px;font-size:14px;letter-spacing:.04em;text-decoration:none;display:inline-block} .btn.ghost{background:transparent;color:#e8f4f6;border-color:rgba(196,181,253,.4)} .ending-art{font-size:64px;line-height:1;margin-bottom:8px} .path{margin-top:14px;font-size:11.5px;color:#9cb8be;line-height:1.5;text-align:left;background:rgba(11,12,28,.5);border-radius:8px;padding:10px;border:1px solid rgba(196,181,253,.15)} .path b{color:#c4b5fd} </style> <link rel="stylesheet" href="/assets/light-theme.css?v=2026-05-31-gold" /> <script defer src="/assets/analytics.js?v=2026-05-20"></script> </head><body> <div class="wrap"> <a class="crumb" href="/innovative-games/">← Innovative Games</a> <h1>📖 Onboarding</h1> <div class="sub" style="font-family:Georgia,serif">A new hire's first 30 days · choose your story</div> <div class="center"><span class="day" id="dchip">Day 1</span></div> <div class="scene" id="scene"></div> <div class="choices" id="ch"></div> <div class="center"><span class="stats" id="stats">Belonging <b>0</b> · Competence <b>0</b> · Trust <b>0</b></span></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>📖 Visual Novel</h2> <div class="s">Training & Development · 14-week sim</div> <ul class="rules"> <li>You're a new manager onboarding Priya, a fresh hire on day one.</li> <li>Each scene gives you 2–3 choices. Choices shape three traits: <b>Belonging</b>, <b>Competence</b>, <b>Trust</b>.</li> <li>Story spans 6 scenes across days 1, 3, 7, 14, 21, 30.</li> <li>4 possible endings — Star Performer, Solid Hire, Quiet Quit, Early Departure.</li> </ul> <div class="btnrow"> <button class="btn" id="start">Day 1, 9am →</button> <a class="btn ghost" href="/games/training-and-development/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <div class="ending-art" id="endingArt">🎉</div> <h2 id="overTitle">Star Performer</h2> <div class="s" id="overSub"></div> <div class="rules" id="overNote"></div> <div class="path" id="pathLog"></div> <div class="btnrow"><button class="btn" id="again">Tell another story</button><a class="btn ghost" href="/innovative-games/">More games</a></div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const SCENES = [ { day:'Day 1 · 9:00am', text:[ { type:'narrator', text:"Priya stands in the lobby holding a laptop bag and a half-empty coffee. Her start date is today. You're her new manager." }, { type:'speaker', who:'Priya:', text:"\"Hi! I— sorry, I tried to log into the WiFi and it didn't work. I'm not sure what I'm meant to do first.\"" }, ], choices:[ { t:"Walk her over to her desk, show her the setup checklist, introduce 2 teammates", bel:+2, comp:+1, trust:+2, label:"warm-welcome" }, { t:"Hand her the onboarding wiki link, tell her you'll catch up at 4pm", bel:-1, comp:0, trust:-1, label:"hands-off" }, { t:"Pull up a chair, walk her through the first project together for an hour", bel:+1, comp:+2, trust:+1, label:"hands-on" }, ], }, { day:'Day 3 · Standup', text:[ { type:'narrator', text:"Standup is at 10am. Priya is quiet. She unmutes briefly, says her name, then mutes again." }, { type:'speaker', who:'You think:', text:"She seems hesitant. The team didn't really turn cameras on either." }, ], choices:[ { t:"After standup, DM her to check in — 'how's day three feeling?'", bel:+2, comp:0, trust:+2, label:"check-in" }, { t:"Privately remind the team to keep cameras on to be welcoming", bel:+1, comp:0, trust:+1, label:"shape-norms" }, { t:"Do nothing. She'll find her rhythm.", bel:-1, comp:-1, trust:-1, label:"silence" }, ], }, { day:'Day 7 · End of first week', text:[ { type:'narrator', text:"Priya has finished the first onboarding ticket. It's good — better than average. She's nervous about her first review meeting." }, { type:'speaker', who:'Priya:', text:"\"I wasn't sure if I should ask, but… what do you think so far? I just want to know if I'm on track.\"" }, ], choices:[ { t:"Give specific, structured feedback using SBI (Situation–Behaviour–Impact)", bel:+1, comp:+2, trust:+2, label:"SBI-feedback" }, { t:"\"You're doing great\" — vague but warm", bel:+1, comp:-1, trust:-1, label:"vague-praise" }, { t:"Say 'too early to tell, ask me in 30 days'", bel:-2, comp:-1, trust:-2, label:"deferred" }, ], }, { day:'Day 14 · The stretch task', text:[ { type:'narrator', text:"You have a stretch task: a quarterly report. Priya could do it — or you could give it to a senior teammate." }, ], choices:[ { t:"Co-author the report with her — explicit pair-up for two weeks", bel:+1, comp:+3, trust:+1, label:"co-author" }, { t:"Give it to her alone, with a check-in mid-way", bel:0, comp:+2, trust:+1, label:"trust-assign" }, { t:"Hand it to the senior. Priya can do something safer.", bel:-1, comp:-2, trust:-1, label:"protect-don't-stretch" }, ], }, { day:'Day 21 · The mistake', text:[ { type:'narrator', text:"Priya pushes a code change that breaks a non-critical workflow. It's reverted in 30 minutes. The senior eng pings her — politely but pointedly." }, { type:'speaker', who:'Priya:', text:"\"I'm so sorry. I should have tested it more carefully. I should probably— I don't know if this was the right role for me.\"" }, ], choices:[ { t:"Normalise: 'everyone breaks something. Here's the post-mortem template.'", bel:+2, comp:+1, trust:+2, label:"normalise" }, { t:"Set up a 1:1 to talk through what happened, calmly", bel:+1, comp:+1, trust:+2, label:"1:1" }, { t:"\"Let's just be more careful next time\" and move on", bel:-1, comp:-1, trust:-1, label:"brush-off" }, ], }, { day:'Day 30 · The first review', text:[ { type:'narrator', text:"It's the 30-day check-in. Priya brings notes. She wants to talk about a few things at once: growth, the team dynamic, and a project idea she has." }, ], choices:[ { t:"Give her the full hour. Ask her what she needs. Then talk growth + project together.", bel:+2, comp:+2, trust:+3, label:"give-time" }, { t:"Walk through the review template, decline her project idea for now", bel:0, comp:0, trust:0, label:"by-the-book" }, { t:"Cut the meeting short — back-to-back day", bel:-2, comp:-1, trust:-2, label:"cut-short" }, ], }, ]; const state = { i:0, bel:0, comp:0, trust:0, path:[] }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i=0; state.bel=0; state.comp=0; state.trust=0; state.path=[]; render(); } function render(){ if (state.i >= SCENES.length) return end(); const s = SCENES[state.i]; $('dchip').textContent = s.day; $('scene').innerHTML = s.text.map(line => line.type==='narrator' ? `<p class="narrator">${esc(line.text)}</p>` : `<p><span class="speaker">${esc(line.who)}</span> ${esc(line.text)}</p>`).join(''); const ce = $('ch'); ce.innerHTML=''; s.choices.forEach(c => { const b = document.createElement('button'); b.className='choice'; b.textContent = c.t; b.onclick = () => pick(c); ce.appendChild(b); }); $('stats').innerHTML = `Belonging <b>${state.bel}</b> · Competence <b>${state.comp}</b> · Trust <b>${state.trust}</b>`; } function pick(c){ state.bel += c.bel||0; state.comp += c.comp||0; state.trust += c.trust||0; state.path.push({ day: SCENES[state.i].day, choice: c.label }); state.i++; render(); } function end(){ const score = state.bel + state.comp + state.trust; let title='', sub='', art='', note=''; if (score >= 22 && state.trust >= 8) { title='⭐ Star Performer'; art='🌟'; sub="Priya is thriving. By month six she's promoted to senior."; note="High belonging + competence + trust is the textbook recipe. Real onboarding success is rarely about content — it's about pace, feedback, and psychological safety. The 14-week T&D sim teaches the systems behind this."; } else if (score >= 12) { title='✅ Solid Hire'; art='🌿'; sub="Priya stays, contributes, becomes a reliable team-mate."; note="Most onboardings land here. Good but not magic. The difference between solid and star is usually 3–4 deliberate manager moves: stretch tasks, structured feedback, normalising mistakes."; } else if (score >= 0) { title='😶 Quiet Quit'; art='🍂'; sub="Priya stays on paper. Mentally she's already half-out. Output dips, then plateaus."; note="Quiet-quitting often traces back to missed early signals. Stay interviews and structured 30-day check-ins are the antidote — the 14-week T&D sim covers both."; } else { title='👋 Early Departure'; art='🚪'; sub="Priya resigns within 90 days. Cost to replace: ~9 months of salary."; note="Early-stage attrition is overwhelmingly preventable. The first 7 days matter more than the next 700. The 14-week T&D sim treats onboarding as a system, not a checklist."; } $('overTitle').textContent = title; $('overSub').textContent = sub + ` · Final: Belonging ${state.bel}, Competence ${state.comp}, Trust ${state.trust}`; $('endingArt').textContent = art; $('overNote').innerHTML = note + ' <a href="/games/training-and-development/" style="color:#c4b5fd">Play the full sim →</a>'; $('pathLog').innerHTML = '<b>Your story:</b><br>' + state.path.map(p=>`<i>${esc(p.day)}</i> → ${esc(p.choice)}`).join('<br>'); $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick=start; $('again').onclick=start; })(); </script> </body></html>