Choose Your Lane — Career Management · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/choose-your-lane-career/"> <meta name="description" content="A branching subway map of career moves. See where you land at year 10."/> <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%97%BA%EF%B8%8F%3C/text%3E%3C/svg%3E"/> <style> *,*::before,*::after{box-sizing:border-box} html,body{margin:0;background:#06121a;color:#e8f4f6;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100%;-webkit-text-size-adjust:100%} body{background:radial-gradient(circle at 50% 0%,#0e2a30 0%,#06121a 60%,#02080d 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:920px;margin:0 auto;padding:32px 22px 80px} .crumb{display:inline-block;font-size:13px;color:#9cb8be;margin-bottom:20px;padding:6px 12px;border:1px solid rgba(125,211,252,.2);border-radius:999px;background:rgba(11,27,36,.6);text-decoration:none} .crumb:hover{color:#7dd3fc;border-color:rgba(125,211,252,.5)} header.h{text-align:center;margin-bottom:22px} h1{font-size:clamp(22px,3.6vw,30px);margin:0 0 4px;letter-spacing:-.015em} .sub{font-size:13px;color:#9cb8be;letter-spacing:.04em} .station{background:linear-gradient(180deg,rgba(15,30,45,.95),rgba(11,27,36,.95));border:1px solid rgba(125,211,252,.3);border-radius:18px;padding:22px;margin-bottom:18px} .station .yearchip{display:inline-block;background:rgba(125,211,252,.15);color:#7dd3fc;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(125,211,252,.35);margin-bottom:8px} .station h2{margin:0 0 4px;font-size:20px;letter-spacing:-.005em} .station p.desc{margin:0 0 14px;font-size:14px;line-height:1.5;color:#cfe1e5} .stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px} .stat-pill{background:rgba(11,27,36,.7);border:1px solid rgba(125,211,252,.2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#9cb8be;letter-spacing:.04em} .stat-pill b{color:#7dd3fc;font-size:14px} .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .choice{background:rgba(11,27,36,.85);border:1.5px solid rgba(125,211,252,.32);border-radius:12px;padding:14px;cursor:pointer;text-align:left;transition:transform .12s,border-color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent} .choice:hover{transform:translateY(-3px);border-color:rgba(125,211,252,.7);box-shadow:0 12px 28px rgba(0,0,0,.4)} .choice .emoji{font-size:26px;line-height:1;margin-bottom:6px;display:block} .choice h3{margin:0 0 4px;font-size:15.5px;letter-spacing:-.005em} .choice p{margin:0;font-size:12.5px;color:#9cb8be;line-height:1.45} .path{margin-top:18px;background:rgba(11,27,36,.5);border:1px solid rgba(125,211,252,.18);border-radius:10px;padding:12px;font-size:12.5px;color:#9cb8be;line-height:1.6} .path b{color:#7dd3fc;font-weight:800} .modal{position:fixed;inset:0;background:rgba(2,8,13,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:20;padding:18px} .modal.hidden{display:none} .card{background:linear-gradient(180deg,#0e2330 0%,#091823 100%);border:1px solid rgba(125,211,252,.4);border-radius:18px;max-width:560px;width:100%;padding:28px;text-align:center} .card h2{margin:0 0 6px;font-size:24px} .card .s{color:#9cb8be;font-size:14px;margin-bottom:16px} .rules{text-align:left;background:rgba(11,27,36,.55);border:1px solid rgba(125,211,252,.18);border-radius:10px;padding: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 rgba(125,211,252,.5);background:#7dd3fc;color:#06121a;font-weight:800;padding:11px 20px;border-radius:999px;font-size:14px;letter-spacing:.04em;text-decoration:none;display:inline-block;transition:transform .12s,box-shadow .12s} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(125,211,252,.35)} .btn.ghost{background:transparent;color:#e8f4f6;border-color:rgba(125,211,252,.4)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px} .stats .stat{background:rgba(11,27,36,.6);border:1px solid rgba(125,211,252,.18);border-radius:10px;padding:10px 6px} .stats .v{font-size:20px;font-weight:900;color:#7dd3fc} .stats .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9cb8be;margin-top:2px} </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> <header class="h"> <h1>🗺️ Choose Your Lane</h1> <div class="sub">Career Management · 10 years, 4 decisions, infinite branches</div> </header> <div id="game"></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>🗺️ Career Map</h2> <div class="s">Career Management · 14-week sim</div> <ul class="rules"> <li>You're a freshly-minted HR graduate. We'll fast-forward 10 years of your career in <b>4 decisions</b>.</li> <li>Each station tracks four traits: <b>income</b>, <b>autonomy</b>, <b>learning</b>, <b>impact</b>. Different paths optimise different traits.</li> <li>No "right" answer — only consequences. Replay to test other identities.</li> </ul> <div class="btnrow"> <button class="btn" id="start">Begin year 1 →</button> <a class="btn ghost" href="/games/career-management/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">📍 Year 10</h2> <div class="s" id="overSub"></div> <div class="stats"> <div class="stat"><div class="v" id="finInc">0</div><div class="l">Income</div></div> <div class="stat"><div class="v" id="finAut">0</div><div class="l">Autonomy</div></div> <div class="stat"><div class="v" id="finLearn">0</div><div class="l">Learning</div></div> <div class="stat"><div class="v" id="finImp">0</div><div class="l">Impact</div></div> </div> <div class="rules" id="overNote"></div> <div class="btnrow"> <button class="btn" id="again">Live another life</button> <a class="btn ghost" href="/innovative-games/">More games</a> </div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); // station = decision year. each option modifies stats and reveals consequence. const STATIONS = [ { year: 1, title: "First HR job — accept which offer?", desc: "Three offers on the table after your degree. Each is a different shape.", options: [ { e:"🏢", title:"Big-Co HR rotation programme", desc:"Famous brand. Rotate through 4 functions in 2 years. Salary $52k.", stats:{ income:2, autonomy:1, learning:4, impact:1 }, tag:"big-co", outcome:"You join the rotation. Year 2 you've seen Talent, Comp, OD and L&D. Steep learning curve, brand on CV, very little autonomy." }, { e:"🚀", title:"Series-B startup, sole HR hire", desc:"50-person team, equity, you build everything from scratch. Salary $48k + 0.5%.", stats:{ income:1, autonomy:5, learning:3, impact:4 }, tag:"startup", outcome:"You build the function from scratch. Mistakes are visible but so are wins. You learn by doing — and breaking things." }, { e:"🏛️", title:"Public sector HR officer", desc:"Stable, pension, predictable. Government department. Salary $44k.", stats:{ income:1, autonomy:2, learning:2, impact:3 }, tag:"public", outcome:"Steady job. Process-heavy. You'll be a competent generalist with strong job security and clear progression rules." }, ], }, { year: 3, title: "Two years in — specialise or stay generalist?", desc: "You've got enough exposure to make a choice. Which lane do you take?", options: [ { e:"🎯", title:"Specialise: People Analytics", desc:"Deep-dive into HR data, SQL, dashboards. Take the certificate.", stats:{ income:2, autonomy:2, learning:4, impact:3 }, tag:"analytics", outcome:"You become the person everyone asks for the numbers. Pay rises faster but the field is narrower." }, { e:"🌐", title:"Stay generalist", desc:"HR Business Partner track. Touch every function lightly.", stats:{ income:2, autonomy:3, learning:2, impact:3 }, tag:"hrbp", outcome:"You stay broad. Slower technical depth but more strategic conversations and management exposure earlier." }, { e:"🎓", title:"Go back to school — Master's in HRM", desc:"Quit and study full-time. 2 years, no income, debt.", stats:{ income:-2, autonomy:3, learning:5, impact:1 }, tag:"school", outcome:"Two years out of the market. You return with credentials but a savings dent and peers who've moved past you in title." }, { e:"🏃", title:"Pivot out — recruitment agency", desc:"Move to external recruitment. Commission-based. High variability.", stats:{ income:3, autonomy:3, learning:2, impact:2 }, tag:"agency", outcome:"High earnings potential if you grind, almost-zero ceiling. You become a salesperson with HR knowledge." }, ], }, { year: 6, title: "Mid-career fork — manage people, or stay individual?", desc: "You're being offered a manager track. Some peers are going independent.", options: [ { e:"👥", title:"Take the manager role", desc:"Lead a team of 4. More money, less hands-on.", stats:{ income:3, autonomy:2, learning:3, impact:4 }, tag:"manager", outcome:"You stop doing the work and start enabling others. Some weeks feel pointless. Others, you ship more through your team than you ever did alone." }, { e:"🧠", title:"Stay individual contributor (senior expert)", desc:"Refuse management. Become the senior IC.", stats:{ income:2, autonomy:4, learning:4, impact:3 }, tag:"ic", outcome:"You stay close to the craft. Pay rises slower but the work stays interesting. Some companies won't promote you above this level without people-management — others will." }, { e:"💼", title:"Go independent — HR consultant", desc:"Freelance. You set your rate. You also do your own taxes.", stats:{ income:4, autonomy:5, learning:3, impact:2 }, tag:"consultant", outcome:"Freedom. Inconsistent income at first. By year 9 your rate is 2x what you'd have earned employed, IF you stayed busy." }, { e:"🌍", title:"International transfer", desc:"Take a 2-year posting abroad. Build a global lens.", stats:{ income:2, autonomy:2, learning:5, impact:3 }, tag:"intl", outcome:"You return with a global network and stories no one else has. Re-entry to home market can be bumpy — you've been forgotten by some, envied by others." }, ], }, { year: 9, title: "Year 9 — the big bet", desc: "You're senior now. What's the last move before year 10?", options: [ { e:"🏔️", title:"Push for the Director/Head role", desc:"Bid for the next senior opening. Politics and exposure.", stats:{ income:4, autonomy:3, learning:2, impact:5 }, tag:"head", outcome:"You land a Director/Head of People title. Compensation jumps. Half your week is now politics, board prep, and budget defence." }, { e:"🏗️", title:"Start your own HR-tech product", desc:"Quit and build that idea you've had for 3 years.", stats:{ income:-1, autonomy:5, learning:5, impact:3 }, tag:"founder", outcome:"Year 1 burns savings. Year 2 finds product-market fit. Year 3 you're either funded or back to applying for jobs with the best war story in the room." }, { e:"🎓", title:"Teaching adjacent — university lecturer", desc:"Become an adjunct or full-time lecturer at a B-school.", stats:{ income:0, autonomy:4, learning:4, impact:5 }, tag:"teach", outcome:"You teach what you spent a decade learning. Lower comp, higher meaning. Your students stay in touch for years." }, { e:"😌", title:"Coast at current level", desc:"Steady at senior. Optimise for life outside work.", stats:{ income:1, autonomy:4, learning:1, impact:2 }, tag:"coast", outcome:"You take back evenings, weekends, hobbies, family. Career stops advancing but life expands. Worth more than most realise." }, ], }, ]; const state = { i:0, income:0, autonomy:0, learning:0, impact:0, history:[] }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i=0; state.income=0; state.autonomy=0; state.learning=0; state.impact=0; state.history=[]; render(); } function render(){ if (state.i >= STATIONS.length) return end(); const s = STATIONS[state.i]; const game = $('game'); game.innerHTML = ` <div class="station"> <span class="yearchip">Year ${s.year}</span> <h2>${esc(s.title)}</h2> <p class="desc">${esc(s.desc)}</p> <div class="stats-row"> <span class="stat-pill">💰 income <b>${state.income}</b></span> <span class="stat-pill">🦅 autonomy <b>${state.autonomy}</b></span> <span class="stat-pill">📚 learning <b>${state.learning}</b></span> <span class="stat-pill">🌍 impact <b>${state.impact}</b></span> </div> <div class="choices" id="choices"></div> ${state.history.length ? `<div class="path"><b>Your path so far:</b> ${state.history.map(h => `→ ${esc(h)}`).join(' ')}</div>` : ''} </div> `; const cc = $('choices'); s.options.forEach(o => { const el = document.createElement('button'); el.className='choice'; el.innerHTML = `<span class="emoji">${o.e}</span><h3>${esc(o.title)}</h3><p>${esc(o.desc)}</p>`; el.onclick = () => pick(o); cc.appendChild(el); }); } function pick(o){ state.income += o.stats.income||0; state.autonomy += o.stats.autonomy||0; state.learning += o.stats.learning||0; state.impact += o.stats.impact||0; state.history.push(o.title); // show consequence inline before advancing const game = $('game'); game.innerHTML += `<div class="station" style="background:linear-gradient(180deg,#0e2a30 0%,#0a1f24 100%);border-color:rgba(134,239,172,.35)"><span class="yearchip" style="background:rgba(134,239,172,.15);color:#86efac;border-color:rgba(134,239,172,.35)">Year ${STATIONS[state.i].year+1}+ outcome</span><p class="desc"><b>${esc(o.title)}.</b> ${esc(o.outcome)}</p><div class="stats-row"><span class="stat-pill">💰 income <b>${state.income}</b></span><span class="stat-pill">🦅 autonomy <b>${state.autonomy}</b></span><span class="stat-pill">📚 learning <b>${state.learning}</b></span><span class="stat-pill">🌍 impact <b>${state.impact}</b></span></div><div style="text-align:center;margin-top:10px"><button class="btn" id="cont">${state.i===STATIONS.length-1?'See year 10 →':'Continue →'}</button></div></div>`; window.scrollTo({top: document.body.scrollHeight, behavior:'smooth'}); document.getElementById('cont').onclick = () => { state.i++; render(); }; } function end(){ $('finInc').textContent = state.income; $('finAut').textContent = state.autonomy; $('finLearn').textContent = state.learning; $('finImp').textContent = state.impact; const max = Math.max(state.income,state.autonomy,state.learning,state.impact); let archetype = ''; if (state.income === max) archetype = '💰 The Earner'; else if (state.autonomy === max) archetype = '🦅 The Free Agent'; else if (state.learning === max) archetype = '📚 The Scholar'; else archetype = '🌍 The Builder'; $('overTitle').textContent = `📍 Year 10 — ${archetype}`; $('overSub').textContent = `Your path: ${state.history.join(' → ')}`; $('overNote').innerHTML = `Career isn't a single ladder — it's a set of trade-offs you keep making. The 14-week Career Management sim covers identity capital, networks, sponsorship vs. mentorship, salary negotiation, and the mid-career pivots that matter most. <a href="/games/career-management/" style="color:#7dd3fc">Play the full sim →</a>`; $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick=start; $('again').onclick=start; })(); </script> </body></html>