Webcast Elite is ON24’s enterprise webcast platform. The admin interface had been built on JSP templates and jQuery over many years. Adding new features meant navigating tightly coupled server-rendered markup, the UX was inconsistent across the product, and there was no shared visual language between design and engineering.
The project was a full migration to a React SPA, with the constraint that the existing product had to keep shipping throughout. Forums, Target, Media Manager, and Go Live teams all had active roadmaps.
Leading the migration
I was the frontend lead, responsible for technical direction, shared infrastructure, and mentoring five to six engineers through the transition. Several were new to modern frontend tooling.
The migration required a React shell that could host new pages alongside existing JSP pages, with routing that delegated to whichever environment owned a given route. The shell had to be stable enough for four teams to develop features against from day one. A deferred handoff after the infrastructure work was complete was not viable given the team dependencies.
Building the design system
I partnered with design from the outset. We started with tokens: color, spacing, typography, and radius values agreed on in Figma before any component code was written. Tokens served as the contract between design and engineering, so changes propagated through a single layer rather than scattered file edits.
From tokens I built primitives (buttons, inputs, badges, typography), then full components, then patterns addressing recurring UI problems across features. The structure let teams work at the appropriate level of abstraction without touching the layers below.
The library was versioned for multi-team consumption, with governance over what belonged in the shared library versus what stayed local to individual teams.
Documentation and quality
I used Storybook to document every component with interactive examples and usage guidance alongside the API surface. For engineers new to component-driven development it served as a practical reference.
The testing setup covered three layers. Chromatic ran visual snapshot tests on every PR against component stories, catching regressions before code review. Axe, JAWS, and VoiceOver validated accessibility at the component level, so bugs were caught before they reached feature work. Unit tests covered behavior: interaction states, keyboard handling, and conditional rendering. Figma tokens and component specs kept design and implementation in sync.
The migration took 1.5 years. By the end, four product teams were shipping on the React foundation, the design system had formal governance, and the component library had full test coverage across visual, accessibility, and behavioral dimensions.
The Elite Explore release, covering new features for Forums, Connect Intelligence, and Go Live, shipped on this foundation.