Building a Calibration Dashboard & Guide at Leapsome

What they built

• A calibration and leveling guide built in Lovable - an interactive, visual tool that lets managers and ICs select their current level and the next level, then compare competencies side-by-side with real examples
• A pre-review analytics dashboard built using Leapsome's vibe-coded dashboard feature - surfaces manager readiness ahead of calibration sessions so the People team can proactively target support
• Both tools connect to Leapsome's existing calibration module (where scores, peer feedback, and manager ratings already live)

Why they built it

• Existing HRIS calibration views surface data well but don't present leveling context in a way human brains can easily use mid-conversation
• Traditional competency matrices (big tables, all levels at once) are hard to navigate - especially for managers already struggling to submit quality feedback
• Wanted to move from "all managers read this doc" to targeted, manager-specific guidance ahead of calibration
• Needed a way to layer contextual, company-specific nuance (promotion criteria, merit increase logic, AI fluency expectations) on top of the HRIS without waiting for the HRIS to build it natively

Tools used

• Leapsome - existing HRIS/performance platform; houses scores, competency frameworks, calibration views, and peer/manager/self-review data
• Leapsome's vibe-coded dashboard builder - used with a natural language prompt to build the pre-review analytics dashboard inside Leapsome
• Lovable - used to build the interactive levelling and competency comparison guide
• Claude - used with Leapsome's MCP (Model Context Protocol) to pull competency data directly from Leapsome and feed it into the Lovable build
• Leapsome MCP - allowed Claude to query live Leapsome data (e.g. competencies by level, employee names and levels) during the build

How you could build this yourself

1. Audit what already lives in your HRIS - identify where competency frameworks, review scores, and calibration data are stored; this is your data layer and doesn't need to move
2. Define the job to be done for each tool separately - e.g. "help a manager compare two employees against level expectations during a calibration conversation" vs. "show me which managers need support before calibration starts"
3. Build the pre-review dashboard using whatever analytics or prompt-based dashboard builder your HRIS offers; write a plain-language prompt describing what readiness signals you want to see (completion rates, score distributions, time-in-role flags, etc.)
4. Export or connect your competency framework - pull level-by-level competencies, descriptions, and any promotion/merit criteria out of your HRIS or existing docs
5. Open Lovable and write a prompt that describes: the track/level selector UI you want, the competencies to display, the comparison view (current level vs. next level), and any tooltips (e.g. what promotion looks like)
6. Use an MCP connection (if your HRIS supports it) to let Claude pull live data - e.g. employee names, current levels, competency text - directly into your Lovable build rather than hardcoding it
7. Run live user research sessions - share the Lovable link with a handful of employees, ask them to click around on a screen share, and iterate in real time by feeding their feedback straight back into Lovable during the call
8. Use both tools together in calibration - run your HRIS calibration pre-reads in one window and the levelling comparison guide in another; reference the guide to anchor conversations in specific competency language

Source

Built by Jessica Zwaan, VP of People Strategy & Ops at Leapsome, and presented as part of Open Org's "Shipped by HR" session series.