Ask HN: Better Storytelling for Tech Demos? | Hacker News Reader

Ask HN: Better Storytelling for Tech Demos?

I've seen a pattern with tech demos' popularity on HN being more to do with presentation than pure technical merit.

Last week I posted a time travel debugger for JS/TS which works even when the debug/inspector API is disabled (Lambda etc). The URL is https://timetravel.dev

My question is: how to present this to gain more traction on HN and similar sites? Or more broadly is there a pattern or formula you've noticed for sharing technical demos? I think fly does a great job of storytelling around demos but can't put my finger on what it is?

View on HN

Most folks demo everything from logging into the app, to viewing onboarding and the main dashboard. It's boring as hell.

Demo the differentiated value - what do you do better than the existing solution? Just show that, and how it'll save me time/money/ego.

Thanks. Great comment

Here are some ideas:

Try several different presentations to several different audiences. Think A/B testing. Introducing a new product or concept is a process: expect to adapt to how people want to see your product.

For now, try to describe the value of your product in one sentence. “Product [name] provides [main feature] so that [insert really valuable result(s) here].” Try out several different sentences on close associates to see which one seems to work best. Then consider using that sentence for your headline. Again, you can use A/B testing.

What is the most valuable thing about timetraveller.dev? Think: saves time, improves quality, saves money, provides entertainment, increases social status, etc. Stuff like that.

With respect to storytelling, such as what you might use in a pitch or formal presentation, it’s important to identify the protagonist, describe the difficult experience they are having, list the things they tried (failures), identify the epiphany (realization of the solution), and then finish with the details of the valuable “happily ever after”.

Good luck.

Such an excellent comment!

Indeed maybe that's it: I kind of built this for the tech challenge. So while it's technically interesting it's not 'useful' outside of building JS/TS based editors. Which most people do not do.

Thanks very much for your reply.

My pleasure

I can't speak as to what generally makes a good tech demo, but I can say that as a JS dev, I looked at your website, watched the video a few times, and still can't figure out how your product is different from the built-in debugger in IntelliJ and VSCode.

You say "time travel", but unless I missed it, your demo keeps going forward in time, stepping through breakpoints. Any debugger can do that.

The interesting part here is the time travel, but I don't see it happening. What does the back arrow do? What happens to a previous state if a future line of code changes it? What happens when you step backwards through a loop or recursion? I think I envisioned something like the time-travel in the Redux devtools extension, but I don't see that.

Your front page has a lot of words but a pretty low signal-to-noise ratio. Instead of long paragraphs of fluffy text, followed by a rambly video, can you show it in a simple animation or two? Kinda like this: https://tailwindcss.com/ If you can make it an interactive actual demo, that would be even better (even if you faked it and all you could do is push back/forward and not edit the code or breakpoints).

For example, it can show what a basic ecommerce product page, or controlled SVG graphic, or anything... what would stepping forward and backward do? Also, how does it work (or not) with my existing repo/framework/toolchain/IDE? Does it only work for simple single-file scripts, or can I integrate it into my existing complex project (the kind that would actually warrant a debugger)?

I don't know if your product is meant to be targeted towards dev end-users, or whether you want to team up with Codesandbox/Codepen or the like to integrate directly into their web editors. But if it's meant to be targeted to devs directly, I just don't have enough information to make a judgment on what it does, how it works, and if it's worth trying out.

Focus on your differentiating features... show us the magic of time travel, not how a basic breakpoint works.

Edited to add: We don't want long-winded stories. Every week, we already spend hours evaluating a million NPM packages and JS tools and frameworks... you have like 5-10 seconds to convince someone that you actually made something useful and novel. Use that time and space wisely, above the fold and in simple, easy to understand bullet points or graphics/animations. Save the long copy and detailed videos for detailed pages that you drill into.

Thank you - excellent feedback. At first I read it as slightly harsh, but once I put aside my ego and really appreciate the feedback.

Really excellently put.

FWIW stepping through the breakpoints can go forwards AND backwards, and it's embeddable within FAAS environments like Lambda which don't have the debugger available. It uses clever compilation to emulate it in impossible places.

And it's 100% on me that I didn't put this in the site ^.

Thanks again.

Hey, thank you for reading, and I apologize for that! It was not my intent to sound harsh, but I can see how it would come across as such. I meed to work on my online tone, and that's on me. Please don't feel disheartened by that!

I am genuinely curious about your service and I think it's really cool. I hope you find a way to showcase it even better, because I get the feeling it's made of some serious programming magic™ :)

I think about presentations in terms of emotional hooks. For a short (30-second) demo:

1. Start with a provocative and almost hyperbolic (true) statement, and then don't answer it... leave the viewer hanging. Example: "Everyone knows Lambda is a black box and impossible to debug. No inspector API! Everyone is wrong. WE can make Lambda dance. Watch this magic." --> This crappy intro which I pulled out of thin air sets a particular tone: very casual, a little cocky. That might or might not be the way you want to brand your product. But the point is that it grabs your attention and leaves the viewer saying "Whaaaaa????". And then they keep watching, and the emotional part of the brain is engaged so they're fully engaged.

2. Quick demo. Keep it punchy. For a 30-second demo, this could be all of 10 seconds: click, click, click, and we're done. Skip over anything remotely irrelevant. You can cover that later in a detailed walkthrough.

3. Recap: [Product] does [value] even when [obstacle]. Our [technology] makes it possible to [restate value in different words].

4. Logo.

For a longer demo, you'll want to stretch things out more. Tell a story perhaps, maybe go into more detail. But as always, consider your audience and the emotional beats. You'll want to start with a hook (a provocative unanswered question or declaration), then proceed through the demo which answers the question, then restate what you just said.

A subtle nuance here: never ask the viewer to imagine themselves in a situation, just go with the solution. So not "Have you ever found yourself [problem statement]", but instead start immediately with "[Solution to impossible problem]". If you ask the viewer to imagine themself having a problem, their brain will still be working on the imagining (which is hard work!) and they'll miss the solution. If you jump strait to the solution, anyone who's had that problem will immediately place themself in the situation and go "wait how is that even possible?!?". Don't make someone's brain work harder than it has to.

Lastly: remember that delivery matters. You should be providing energy. If you're talking in a monotone nobody cares. Repetition matters here... if I'm recording a talk I might rehearse it word for word 10-20 times before landing on a delivery that I think is good enough. Keep polishing your word choice, pacing, etc. All those casual, easy voice-overs you've seen are smooth because of practice not because of some un-learnable raw talent.

Reply on news.ycombinator.com