Freshworks’ Demo Hub. A home for every demo, from an agency design to a live page.
Freshworks’ demo page came to me as an agency design. I owned the redesign through a brand change, built and tested ideas with Claude Code, and prepared the dev handover in Figma. It’s live at freshworks.com/demos.
It started as an agency design.
I took the demo page over from an agency and redesigned it to the brand guidelines at the time.
Before that version launched, Freshworks updated its brand, so I went back to the page in the new look.
Looking at how others do it.
I roughed out the page in the new brand, then looked at other demo pages and motion galleries to see how they get someone to the right demo.
GSAP’s demo gallery, with its stacked spotlight, shaped the hero.
Building ideas instead of describing them.
I built my ideas as working pages with Claude Code, so I could click through a layout, change it and try again the same day.
The chaptered player came out of those rounds.
- BuildIdeas as pagesEach idea became a page I could click through.
- ChooseWhat made one winA layout stayed if it put the video first, laid the demo thumbnails out in a way that made sense, and kept the titles clear.
- RefineInto FigmaThe ones that held up went into Figma, where I refined them and ran the reviews.
- Hand overSpecs and a prototypeEvery state written up in Figma, with a reference prototype for motion and behavior.
Three options for review.
A carousel you page through, a list beside a video stage, and panels that open one at a time.
Each one was a working page, so reviewers could click through it.
Option two won.
People come to Demo Hub to watch the demos, and option two puts the video front and center in the hero. It also feels more premium. The agency carousel put headlines on top of product shots. Option two gives the list, the video and the description their own columns.
The other featured demos sit stacked behind the one playing.
One filter for the library.
An early version filtered the featured demos and the library separately. Two filters was one too many, so I kept one: experience.
Each card also says whether it’s a video or an interactive tour.
Watching a demo.
The video takes the full width, with the title and description below and Book a demo close by. On a phone, it opens as a bottom sheet.
When the phone version first came back from development looking off, I updated the reference prototype to show how it should behave.
A demo you can skip through.
Long demos are hard to sit through. Chapters let someone jump to the part they came for.
A labeled track under the video, and pills at the end to go back to one.
From my reference prototype. The live player doesn’t have chapters.
The handover, in Figma.
Page mockups at each breakpoint, every player state from playing to locked to ended, and components with notes for developers.
The reference prototype covered motion and behavior. See the live page
