On launching and giving shotsnapp a real shot 🚀 📸

My #FOMO when it comes to launching products and the story behind the launch of my nth side project

As a full-time product designer, learning how to code and building random things have been my most rewarding mental escape and additional creative outlets for the past few years. Last year I launched two Mac apps called Habit and Coaster. Since then, I’ve started several projects, but never really got them to a launch-able state. However, on 28th June, I launched my latest product to the world and it hit #1 Product of the Day on Product Hunt. Here is the story.

Image of shotsnapp, generated using shotsnapp

🎯 Goals

I started working on shotsnapp in the early of June 2018. Having a full-time job, I can only spend around 3 to 4 hours a day — plus a bit more on the weekends — to actually dedicate my time to this project. I decided to come out with a MVP that is simple enough for me to complete within a month and get it out there for people to use.

➡️ Product goal: To provide a very simple tool for anyone (designers, product managers, developers, marketers, etc) to create device mockups for their app/website design. They could be using it for social media posts, Dribbble shots, to show progress within the team Slack, to spice up their PowerPoint slides and many more!

➡️ Personal goals: To launch something. To not feel left out every time I see indie makers launch their products. To gain more audience for myself. To keep shipping!

👨‍💻 From start to finish

I realised my process for doing stuff at work differs so much with the way I build my side projects. For the latter, I prefer to jump straight into code and design things along the way. Why? Because I wanted to verify if I’m actually capable of handling the technical complexity of the project before I proceed further. #designersproblem 😅

♻️ Stages

1. Research for possible libraries or frameworks that could be utilised
2. Setup a simple project with basic core functionalities: Add image to the editor ➡️ Change color/size properties ➡️ Download as PNG
3. Add more ways to change properties (scale, position, and more)
   📌 At this stage, I’m sort of comfortable with other possible technical challenges. The rest is just coming out with the flows, building the interface, handling user inputs and so on
4. Decide on a list of features to be included for an MVP — and stick to it
5. Send early version of working product to a small group of people for feedbacks. In my case, it has always been my circle of designer friends
6. Polish on the branding, UI and interaction where necessary
7. Handle the non-development tasks : Buying domains, figuring out where to host, creating social accounts, etc
8. Prepare assets for the launch : Copywriting, thumbnails, preview images, sharable images, etc
9. Launch!
10. Write this Medium post 😂

💻 Stack & tools

1. ReactJS ⚛️
   I have some experience with React JS from my previous side projects, including Coaster. So naturally, I decided to utilise what I’ve learned.
2. Github 🐙
   For managing code, obviously. I’m also using Github Project to manage my tasks. No need to add Trello as additional touchpoint.
3. Netlify 💠
   I initially planned to host the app on Github Pages, until I randomly remember about Netlify. I never understood what’s the hype about Netlify (or what was it actually), but once I setup my project there, I realised the full power of their features. I even bought the domain directly from them.
4. Sketch 💎
   Most of the design is done directly in the browser during the development. But I still have to rely on Sketch to design the logo, draw some icons, and create marketing images for the launch.

🐦 Build in public

I’m very inspired by the indie makers community. Makers like Pieter Levels, aj, and Marc Köhlbrugge always share their works and progress on Twitter. I’ve never properly done it for my previous projects — because, you know, designers and their obsession with the perfections of final products — but I’ve decided to give it a shot. I created a thread introducing my project and have been adding new relevant updates to it since.

Advantage: It gives you some sense of accountability — you don’t want to build the hype but ended with nothing. You can get early feedbacks from your followers too! It makes the whole process more exciting as you’d want to keep posting new updates. Sorry for the spam 😅!

🚀 The Launch

On 28th June, I thought to myself, maybe it’s time to release it. I don’t want to keep adding new features anymore. I wanted to see whether people will like it or not. In addition, I started to feel the pre-launch depression — thinking that my product is never gonna be good enough, that I shouldn’t launch it, that people will hate it … But I pushed through 👊!

😸 Product Hunt (🔗)

Last year, I made a mistake of launching Coaster almost at the end of Product Hunt’s daily cycle and was stuck inside the Newest tab. After some research (read: googling), I found out that new products hit the homepage at 12:01am PST. From there, I know that I have to submit my product at 3pm Malaysia time. 🇲🇾

Use https://www.worldtimebuddy.com/ to convert the time. Timezones are hard

At 3pm+, I refreshed the Product Hunt homepage and saw the list has been reset, so I hit the ➕ button! I’ve prepared a GIF thumbnail and several screenshots earlier for the launch, so this is just a matter of filling things up. Then, I posted an official to officially announce the launch. I also shared the link inside my local designers Slack group. They were the first group of people to upvote it. Shout out to ForwardSlash team 🙌

Results:
- Received 750+ upvotes with 35+ comments 🌟
- Became #1 Product of the Day 🥇
- Became #1 Trending Product in Design Tools and Developer Tools topic 📈

🎨 Designer News (🔗)

Launching on Designer News (DN) was pretty effortless — I only need a title and a link. I had a good experience from my Coaster launch, so I was expecting the same this time.

Results:
- Reached #1 spot on front page 🥇
- Stayed in the Top 10 for few days
- Received 48 upvotes with 12 comments

💻 Hacker News (🔗)

This was the first product I’ve ever launched on Hacker News (HN). Due to the nature of the product, I thought the audience might benefit from it.
Tips: Make sure to append “Show HN” in front of the title to be included in the Show page

Results:
- Reached #1 spot in Show page 🥇
- Reached front page of HN. Peak at #4!
- Received 146 points with 34 comments

📊 Stats! Stats!

I integrated basic Google Analytics tracking to monitor the real time performance of the launch. During the peak of the launch period, there were ~100 average active users on site. As expected, the traffic spiked on the first few days, and started to dwindle down over time.

📌 Launch summary
- 17,600+ visitors with 22,000 pageviews
- Newsletter subscribers via Mailchimp: 83 email addresses
- Feedbacks & requests via Google Form: 15 responses
- Featured in Sidebar, UXDesign, Prototypr, Tympanus and HeyDesigner
- External coverages in several other websites and blogs

📌 Personal audience growth
As mentioned above, one of my personal goals for the project is to grow my audience. I’m focusing solely on my Twitter audience. Although the data below is for the full month of June, but most of the spikes came in during the launch period. I got ~130 new followers with ~590% growth in tweet impressions.

💰 Monetization (aka donation)

shotsnapp is a free product. However, I wanted to provide a way to accept voluntary donation from visitors. Two options I came across:

1. PayPal.me link
   Pro: Simple straightforward interface
   Cons: Only can accept money from other registered PayPal users
2. Buy Me a Coffee page
   Pro: Visitors can send donation using credit card and/or PayPal
   Cons: They take 5% cut from every donation, and the whole coffee metaphor can be confusing to some

I ended up choosing the 2nd option, because I wanted to be able to reach more people. I have to accept the 5% cut. But it’s a great service, so I’m okay with that. Just 1 day after the launch, I announced that it is now a profitable business 😂 💵

It has since grown to $9.00! 🤑

🔭 What’s next

️I will be continuously adding more devices and customisation options. I will be working to improve quality of the downloaded image, SEO of the website, and making things as simple as possible for anyone to use 🖖.

That being said, I do have plan to introduce PRO features for users who are willing to pay for extra customisation and flexibility. Early ideas includes: More device variants (angled, perspective, clay and vector-style etc), premium pre-designed templates, ability to add objects (i.e text, icons, multiple devices, etc) and few others. ( Tweet me if you have more suggestions!)

(Stripe is not available in Malaysia. There are several other options available for me to accept payment for a SASS model — but implementing them looks like a technical challenge for me, personally 😭. New challenge to accept!)

🍭 Closing

This has been an interesting and eye opening experience for me. I would love to be able to keep doing this again and again. Make sure to follow me on Twitter and Dribbble to be part of the process. If 💌newsletter is your thing, I’ve set up one below to send updates and share progress for my next and upcoming projects.

Thanks to all of you who upvoted and shared shotsnapp on Product Hunt, Designer News, Hacker News, Twitter and anywhere else; those who spend their time testing the app and provide useful feedbacks and report issues; and few of you who bought me a coffee!