How to build a Coming Soon page for your product
Oct 28, 2013
Table of contents:
I think a critical component of successfully launching a new online product is your pre-launch strategy. Putting a new product out into the world is going to be difficult if you don’t slowly build up interest long before you actually launch. You are also going to need to seed your product with early users or customers so that they can beta test it and help you iron out any problems.
The big secret launch is a fools strategy as it will only ever work if you already have a large following.
Building a “Coming Soon” page shouldn’t be too difficult for you if you are the one building the product. But even if you aren’t technical and you are merely looking to gage interest in the idea, getting a page up as soon as possible is one of the best ways to see if the idea resonates with your audience.
In this post I’m going to walk you through how I built the “Coming Soon” page for Cribbb. Really I should of done this at the very beginning of this series as I’m sure I’ve lost many email addresses by just having a blank page up until now.
Better late than never!
Goals and Objectives
Before we actually get into the design or implementation of the page, it’s important to understand exactly what we are trying to achieve so we can objectively look at progress and improve performance.
For Cribbb I simply want to collect email addresses from anyone who is interested in getting early access to the product. In reality I assume that all of the traffic and interest in early access will be generated from these Culttt posts.
So for this particular project, my only goal is to collect email addresses. I’m not going to start A/B testing this page as it’s really not worth the effort for this particular product and I don’t have the resources to invest in doing anything meaningful.
However, if you are looking to gather details of early potential customers because you are launching a product you hope to sell, you should definitely be setting goals, objectives and targets so you can get the best possible start.
As you move towards launching your product, you should be trying to get as many contact details for early customers as possible. This might be simply an email address, or it might be a more in-depth profile of your potential customers.
Setting a pre-launch goal is imperative because you need to ensure that you are moving in the right direction.
Strategy
Another big thing I think you need to think about is your strategy for not only collecting interest, but also ultimately how do you onboard those new users so that they have the best possible first run experience?
Many first time users of your product will never give you a second chance if they get confused, lost or simply if they do not feel instant gratification for investing their time into your product.
In a future post I’m going to detail exactly how my launch strategy is going to work and how I see if evolving over time.
In the mean time, I’m simply going to collect email addresses using MailChimp.
Design
The design of the landing page is really important because it should reflect the overall design aesthetic of the product that you are launching. Whilst you often can’t predict exactly what the end product will look like, hopefully your landing page will at least be representative of that overall vision so that you tell a consistent story through pre and post launch.
I think it is important to work on your logo, branding, general colour palette and font selection early during this process. These simple elements will help you tell a coherent story as your progress towards shipping your product.
Another important aspect of the design of this page is hinting at what your product is going to do. There should be one clear objective and one obvious reason why a user would want to use your product.
It’s common to see launch pages with only a logo and an email sign up form without any indication of what the product is about, who it is aimed at and why you should even bother to submit your email address.
For Cribbb, I wanted to convey the idea of the product being a central place for conversations around different topics. I decided to use a background image of people talking around a campfire as well as the flow of a conversation right in the centre of the page.
Finally you should also link to other destinations where interested users can stay up-to-date with progress. For Cribbb I have chosen to link to Twitter, GitHub and of course Culttt.
Implementation
The implementation of this page is really quite simple. The entire page is just HTML with a sprinkling of Javascript.
I decided to use Sass over CSS because I really prefer writing Sass. This might be an overhead for you, so if it is, don’t let that be a stumbling block. Regular CSS is fine too. In my opinion though, Sass allows you to write much better CSS much quicker and it is easier to maintain going forward.
The animation on the posts to simulate a conversation is just really simple jQuery. I could probably write this little chunk of Javascript in a much better way or even in CSS, but to be honest I’m never going to come back to it so it doesn’t really matter.
And finally to integrate with MailChimp I simply created my basic HTML form and then took the action URL from the MailChimp example code. MailChimp gives you a load of code that you don’t really need if you are implementing the form in your own design.
Conclusion
Setting up a “Coming Soon” page is a great way to collect emails so you can gather early interest. It allows you to gage how interested people are in the product and enables you to soft launch your product into this beta list of early adopters.
Hopefully this walkthrough shows you that you don’t need to be very technical to get something basic on the Internet. As Cribbb progresses I will be shipping a second much more technically complete launch page that will enable me to have finer grain control of the onboarding process.
However until I reach that point, I’m pretty happy with this launch page. If you don’t just ship the first version, you will never get to the much better version that you can imagine.
You can all the files that went into creating my launch page over at GitHub.
This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.
