The Product Idea
9:15 AM
The idea for Squawk was inspired by Gary Vaynerchuck’s Instagram. I saw him re-post one of his Tweets as a video like this. Think what you want of Gary V., but his social media strategies have always been great. In particular, by turning a Tweet into a video he can:
- Repurpose his Twitter content. He puts out a ton of posts on Instagram and Twitter every day. This is an excellent way to reuse existing content and bring it to new faces.
- Drive people to his Twitter account. People are much (12x) more likely to follow you on Twitter if they already follow you on Instagram or Facebook. This is a not-too-subtle reminder to people to go look him up on Twitter.
A tweet-to-video tool would be a big value add for content aggregators. For example, meme pages on Facebook and Instagram often just post screenshots of Tweets, but videos outperform images by a solid margin and could be used as a replacement. I decided to give it a try.
The Product Implementation
High Level Overview
I wrote the core code of Squawk as a NodeJS script and launched it on AWS Lambda so that I didn’t have to worry about scaling up or down. I connected my Lambda API to the Floom marketplace so that I didn’t have to deal with user authentication and customer billing. The marketing site was built and hosted with Webflow.
Now to dig into the fun details.
Getting Twitter Data
10:15–11:30 a.m.
Twitter has a public API. I signed up for a developer account and got an API key. Since I wrote Squawk with NodeJS, I used a wrapper called Twit to make my life easier.
The Twitter API was pretty straightforward. I just needed to make one call to fetch a Tweet (or as they call it, a “status”) by ID:
T.get('statuses/show/:id')
Easy enough. That API call returns the Tweet text, time of Tweet, and the user data including profile name, handle, and image URL.
Mocking Twitter UI
12:00–2:00 p.m.
This part was actually fairly simple. I used node-canvas, a library which mocks the HTML5 canvas API, but runs on NodeJS. I made a 1080x1080 (HD) canvas, and drew on the different parts of the Twitter UI including the profile image, profile name, profile handle, and the time of Tweet.
2:00–4:15 p.m.
The most complex part was simulating typing the text of the Tweet. To do this, I incrementally drew on the text, letter by letter. After each frame was drawn, I exported the canvas to a separate png image. Then I used FFMPEG to stitch the frames together into an mp4 file.
In order to make the typing animation seem more natural, I skipped frames that just drew spaces and I added pauses after punctuation and new line characters.
Creating an API
5:00 PM–6:30 p.m.
I deployed my NodeJS code to AWS Lambda using Serverless framework. This went pretty smoothly but I needed to add an FFMPEG layer and a node-canvas layer to get things running on Lambda. Serverless.com has a nice tutorial on adding layers to your Lambdas.
When everything was working locally, I added two HTTP endpoints on the serverless.yml file to enable API access:
- An endpoint which accepting new requests for creating Tweet videos. This is a POST endpoint which expects a tweetId in the body.
- An endpoint which checks on the status of a processing video. This endpoint also expects the
tweetId
in the request body. This endpoint handler simply checks to see if the completed video has been uploaded to AWS S3 yet. If it finds the completed mp4 file in S3, it returns the file; otherwise it informs that the video is still processing.
Payment Processing
6:30–7:00 p.m.
Instead of dealing with user sign-ups, authentication, and customer billing myself, I connected my API with Floom. I created a free watermarked version and a paid non-watermark version which I’m selling for $1/video.
Product Branding
7:00 PM–8:45 p.m.
I chose the name “Squawk” because: (a) you can almost tell it’s related to Twitter just by the name (b) it’s short, and (c) people know how to spell it without needing to ask. Some sort of bird was the obvious choice for a logo. I typed “bird” into thenounproject.com and looked through what came up. I settled on a small, fat, cartoonish bird. It has a similar vibe to Twitter’s logo but was distinct enough to carry its own branding. I paid $2.99 in royalty fees and got access to the SVG. I made some small tweaks including giving the bird an open beak to go along better with the “squawk” name.
The cornflower blue branding again has a similar feel to Twitter but is distinct. Using Sketch, I made blue and white versions of the logo, text and non-text versions, and some different sizes for favicons, webclips, and open graph images.
9:15–10:45 p.m.
I looked for top level domains available with “squawk” and happily found squawk.dev available for $14. I linked my new domain to Webflow and used an existing Webflow template to throw together a one-page marketing pitch. In short, I created two sample videos, wrote some quick copy highlighting the use cases, and added in three calls-to-action directed at the product page on Floom.
What’s Next
Product Features
- Emoji support (there is no emoji support built into node-canvas)
- Tweets with images (update: done!)
- Tweets with videos (figure out a way to do this with FFMPEG) (update: done!)
- Ability to change the speed of typing
Marketing Efforts
The two main target audiences are:
- Heavy Twitter users who want to share their content elsewhere. The pitch to them is that they can reuse content and leverage these videos to drive followers to their Twitter.
- Content aggregators like BuzzFeed and meme pages which often screenshot Tweets and share them. The pitch to them is that video outperforms images on Facebook and IG.
We’ll see which one of these pans out better in the early days and drive focus towards it.
I hope you enjoyed this write-up! It was a great exercise for me to remember that creating a product can be done in a short timeframe with the right skills and the ability to focus only on the MVP. Check out Squawk live.
Have a product idea and think it can be developed in two days or less? Let me know — I'm happy to help people get their products off the ground.
I love this kind of write up! Floom.app looks really cool as well
Thanks! I made Floom to make launching things like this a lot easier for developers :)
Cool idea and it really motivates to see how you pushed it from idea to execution in so little time. Any paying customers yet?
Getting quite a few daily orders. That being said, most videos made are the free videos with the watermark (as opposed to the $1 non-watermarked videos)
Best of luck :)
This is a great write up and I love how you worked through your process with quick decision making. Also Thank you for introducing me to Floom and Serverless.com Would like to see maybe a post mortem or update some time down the line. Great work!
Excellent write up. I learned so much. I never knew about Floom and WebFlow before reading your article.
Thank you for introducing me to Floom!
Yes!! I'm really excited about Floom
I love to read your process and see how focused you are in getting to market so quickly. Very smart work flow here. Thanks for the post 🙌
Thanks Adam. How are you getting on with CallCast? I'm a partner at wavve.co, let me know if you're interested in partnering with us to enable your users to make marketing videos from their podcasts (like these https://www.instagram.com/getwavve/tagged/)
Wow! This is one of the most inspiring posts I've read! Thank you! All the best for the product!
Thanks so much Jules
This is an awesome product. Love the quick execution. I appreciate your MVP approach here
Thanks Drew!
Very cool to have the tech writeup; thanks! Helps to have a varied skillset doesn't it!
Comes in handy. BTW your gene visualization project caught my interest (I do a lot of datavis work | www.robmoo.re/datavis). Are you still working on it? Could you send me an email at me@robmoo.re, I'd like to learn more about it
Thanks Rob; I just sent you a quick email.
Very cool. Thanks for the great write up!
Thanks Josh :)
Very cool idea, and I appreciate the detailed writeup. This was helpful for me personally in more ways than one.
I think a few things were mentioned by others re: signup flow and pass requirements.
My feedback is (and this is in the original inspiration video as well) the line breaks that jump at the end of lines is a bit jarring to me, and takes away from the otherwise very polished look of the video. As the tweet is revealed the last word on a line "the" starts on the same line, "t", "h" and then the "e" breaks it into the next line. Imo it would be better if the whole word started on the new line.
Anyway, great project and writeup, looking forward to hearing more about it soon.
Best of luck!
Thanks for the feedback! It's interesting you mention that, I actually went back and forth on the line break animation. I ended up starting with it as it is now (changing mid-word when it hits the end of the line) to make it look more like it would as the Tweet is being typed out, but I can definitely see it being more jarring.
Impressive work! It is interesting to see the results of the project in a couple of months.
Awesome! Really like the play by play.
Thanks David. Love the concept behind Random HIIT, best of luck with it
Great job - nice observation and execution!
I really like this idea. The only thing I hate is the signup flow. Making users signup with particular password requirements absolutely kills any positive feelings I have for a new service. Just that alone stopping me from signing up.
Thanks for the feedback Christian. You're right. I'm going to add in a Google sign in option
Nice. Liked the idea and execution.
Great time-saving development by using 3rd party services! Are all the products on Floom.app yours? How many paid transactions do you have to get monthly to break even with the cost of the 3rd party services in your app?
awesome to read something like this! really motivating :)
This is an awesome write-up. This is very clever use of Lambda, node-canvas, and FFMPEG to dynamically generate a video. Thank you so much for sharing.
Amazing, congrats!
You are my hero and my inspiration. Thank you for this writeup.
might want to use a different tweet than the one that misspells there in it ;) cool product though.
Wow, brilliant!! Keep up bro
Freaking awesome! Congratulations, that's a fantastic wrap up!
What techniques will you use to market Squawk?
Tried something like this recently, but was unable to find much in the way of awareness.
I just looked at Reddit Capture Kit. Definitely curious about it! I saw you mentioned "narrative reddit videos" and "automatically editing comment screenshots to hide lines not yet read". What's the use case you're imagining for it?
For Squawk, I'm directly reaching out to Instagram accounts of influencers and pages that are like meme aggregators. Videos tend to get better engagement so there's an advantage to them using Squawk instead of screenshots
Hey Rob, sorry about the delay. I was intending to sell it to those that make YouTube videos reading Reddit comments, and having the comment appear on screen line by line as it is being read aloud.
Hm. I'm not convinced. Honestly between a video that types it out fancily vs. a screenshot that I can consume right away, and both of them say the same thing, I'd prefer consuming the latter as a consumer. That said, if you have data to the contrary, I'm willing to stand corrected.
Hey - one key advantage is the greater engagement of videos compared to images on Facebook, IG, LinkedIn. I'm going to run some tests to see exactly how big this increase is
Good work on executing so fast. Has your idea been validated? Do you have any customers?
Most videos made are the free videos with the watermark (as opposed to the $1 non-watermarked videos). I'm getting quite a few orders every day and the feedback has been that the videos are receiving good engagement on Instagram and Facebook.
This comment was deleted a year ago.
This comment was deleted 2 years ago.
Thanks for the comment Swapnil, glad to hear it