XSetel

Inspiration

None of us had ever built anything in the "org" space before. Our past projects lived in fintech, tooling, consumer apps, anything but HR. So going in, we didn't have a personal war story about a bad org chart or a confusing restructure. What we had instead was a simple observation: every org chart we'd ever seen, in any company, was a picture of a single moment, a PDF, a slide, a whiteboard photo, frozen the second someone hit export or took the picture. The moment anything changed, it was already wrong.

That gap felt bigger the more we talked about it. Org charts get redrawn every reshuffle, but almost nobody keeps the old ones anywhere searchable. So the history of how a company actually got to where it is just evaporates. New execs walk in blind. Nobody can point to "why did this team split in 2021" without asking around and hoping someone remembers.

We picked this topic specifically because it was unfamiliar territory. We wanted to build something in a domain none of us had touched, and "make history navigable instead of disposable" felt like a problem worth learning from scratch. XSetel became our answer: instead of one static snapshot, a timeline you can actually scroll through, year by year, person by person.

What it does

XSetel turns eight years of organizational history (2018–2025) into a single living timeline instead of a stack of static snapshots.

The Wheel — an elliptical "Ferris wheel" of years you scroll or drag through; the front-most year is always live, syncing the header, footer, and org chart in real time.
The Org Chart — click any year and drop into that year's full structure: CEO → 5 departments → teams → individual staff, with a "Role Only" mode that abstracts away names entirely.
The Profile — every person has a personal timeline of career events; clicking any history entry "time-travels" you back to that exact year's org chart and flashes their position.
Change Modals — mid-point date markers between years open a modal explaining exactly what changed and who it happened to, cross-referenced from real leadership history.
AI-powered ingestion — a Gemini API layer reads both structured data (CSV/JSON/HRIS exports) and unstructured data (PDFs, memos, meeting notes) and normalizes it straight into the timeline's data model, so populating history doesn't mean manual re-entry. ## How we built it XSetel is intentionally dependency-light: plain HTML, CSS, and JavaScript, no frameworks, no build step — just two Google Fonts (Inter for body text, DM Mono for kickers/metrics/dates).

The year wheel is pure trigonometry — each year sits on an ellipse (x = cx + rx·sin(θ), y = cy − ry·cos(θ)), with rotation eased toward a target angle every animation frame and clamped so it never wraps around. All 600 staff records across 8 years are generated once at page load and cached, split across 5 departments and their teams by fixed ratios, so identities stay stable no matter how many times you navigate back and forth. Every scene transition, modal, and accordion uses CSS transforms/transitions rather than instant show/hide, and the change-detail modal literally grows outward from wherever you clicked it.

Challenges we ran into

Keeping the back-button navigation from getting "stuck" — a profile can be opened from the org chart or the timeline, and any number of "time travel" detours can happen in between, so we had to build a small state machine (orgHomeYear) to guarantee you always land back where you actually came from. Making sure decorative full-width wrapper elements didn't silently swallow clicks meant for elements underneath them — required deliberately setting pointer-events: none on transparent containers throughout.

Accomplishments that we're proud of

A fully client-side, dependency-free app that still feels like a polished product, not a hackathon prototype. 600 simulated people across 8 years of organizational history, all navigable in under a second, with zero backend.

What we learned

The biggest learning curve was figuring out how to pull real organizational data — both structured (CSVs, JSON exports, spreadsheets) and unstructured (PDFs, memos, plain text) — and get it into a shape the website could actually use. None of us had worked with the Gemini API for this kind of extraction before, so we had to learn how to prompt it to read messy, inconsistent source documents and return clean, structured output (names, roles, departments, dates) that matched our existing data model exactly — rather than loose prose we'd have to parse ourselves. That process taught us a lot about prompt design for extraction tasks specifically: being strict about output format, handling missing or ambiguous fields gracefully, and validating what comes back before it ever touches the live timeline.

What's next for XSetel

Phase 1: Featherlight intranet embed — drop XSetel into an existing company site with minimal setup. Phase 2: Gemini-powered data ingestion at scale — pulling structured exports (Workday, CSV, JSON) and unstructured documents (PDFs, memos) automatically into the org model. Phase 3: AI-assisted predictive restructuring — surfacing likely org changes before they happen, based on historical patterns.