February 19, 2020 β€’ Lisbon, Portugal

Tools for Your Product Hunt Launch

I helped launch a product on Product Hunt today called Mixily, it's an events platform that makes it really really easy to host a casual event.

It's not something I've done before but I figured I'd give it my best shot. Along the way I picked up some tricks and hacks I thought I'd better write down somewhere before I forgot.

I'll be referring to the PH launch page for Mixily throughout, so it might be helpful to keep it open in a second tab πŸ˜‰

πŸ“š Useful resources:

The resource I used most was "How to Launch on Product Hunt" which I found linked in this Twitter thread.

It's the official how-to article from PH and it's packed with vital information and it cleared up a few big wrong-ideas for me.

For one, I was under the misconception that direct-links weren't counted as much as a way to prevent people from leveraging their existing audiences so much, turns out PH encourages you to leverage existing audiences.

It doesn't matter whether you link people directly to your Product Hunt launch page or if you have them search for you on the new tab, so you might as well send them a direct link!

I also thought that you needed a pro-hunter to hunt you in order to get top-billing. Turns out that doesn't matter much either. As long as you can get 25-30 upvotes you'll make it onto the front page most days, regardless of who hunted you.

However, I think the age of the upvoter's account matters. So if all your friends signed up today, their votes aren't going to count for as much as someone who's been active on Product Hunt for at least a few weeks.

Moral of the story, get your friends to sign up ahead of time πŸ˜„

Product Hunt itself is a great source of inspiration. The first thing I did was check out the top ten or so products from the all-time most upvoted list to see what's worked before.

πŸ› οΈ Tools Used:

https://previewhunt.com https://giphy.com/apps/giphycapture https://www.svgator.com/ https://gfycat.com/gifbrewery Adobe Illustrator

πŸ…ΏοΈreview Hunt:

Preview Hunt was super useful while putting together all the pre-launch assets. It gives you a form to fill out for everything you'll need day of (Thumbnail, tagline, description, etc) and a live preview while you build.

A couple things didn't work for me w/ Preview Hunt:

  1. The button to save my work/download threw an error.
  2. Once I created my live preview, the YouTube video link stopped showing up.

🎞️ Animated gif thumbnail:

I've never done svg animations before, but I found a hacky way to make it work.

First I took the svg logo file for mixily.com and smoothed it out in illustrator. Then I exported that back to svg and uploaded it to svgator.com. It's a payed service but they have a 14-day free trial (that's what I used).

There was maybe a 15-20 minute learning curve on svgator. The main key for me was making sure to include position as one of the animation dimensions in order to make sure that the thing I wanted to animate stayed in the right spot.

Here's what it looks like to animate using svgator (loom video)

There are also way more impressive demos on their website than what I can do.

Once I finished I couldn't figure out how to export my animation to a .gif format.

So, as my hacky workaround I fired up Giphy Capture and recorded my screen while the preview played.

Demo of that workflow (loom video)

πŸŽ₯ YouTube demo-video:

This one was pretty easy because the mixily.com landing page already uses an .mp4 demo. I uploaded that straight to YouTube as an unlisted video and set the preview to be a screenshot of the homepage.

🎬 Creating the demo-gif:

Used Gif Brewery to create a gif version of the same mp4 video. For whatever reason every mp4 to gif conversion software I tried applied a strange compression to the gif that made the images look almost like an illustration.

Gif Brewery also caused the gif to play back at ~5x speed. I thought the combined affect was pretty cool, so I decided to roll with it, but it would have been frustrating to create a more precise gif that way.

If I wanted to avoid those problems I'd probably use Gif Capture again and make a fresh recording.

πŸ“±iPhone preview:

I'm sure there's a not-hacky way to make iPhone demo photos, but that's not what you're here for right? You're here for the dirty hacks.

To create the side by side Desktop and Mobile preview, first I loaded our website on a mobile-browser testing website to create an iPhone preview, took a screenshot of the result, and dropped it into Adobe illustrator.


And that's about it!

I wrote this primarily as a guide for myself the next time I'm creating a PH launch., hopefully other's here will find it useful too.

The whole team at Mixily has put a ton of work into making an events platform thats 10x as easy to use and 100x as friendly as everything else out there. Many fingers and toes are crossed that it will be well received. 🀞🀞🀞🀞

If you'd like to support the launch, this is the link again: https://www.producthunt.com/posts/mixily-2

Thanks for reading!

Back to Home

Want to work with me on a project like this?