Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Building An Effective ‘Coming Soon’ Page For Your Product

I recently had to design a couple of teaser pages for a client and a personal project, and this led me to think about what exactly makes for a good teaser page — or to be more precise a “coming soon” page that companies often put up before they’re ready to launch their product. After careful research and many scientific tests in the brand new field of teaserology, I’ve developed a patented Teaser Effectiveness Analysis Matrix™, consisting of four elements. The perfect teaser page must score high on all four axis of the following:

  • Memorability,
  • Virality,
  • Desirability,
  • Data collection-ability.

I know that “data collection-ability” is not proper English, but inventing new words is one of the perks of being a scientist. As we’ll see, most teaser pages focus strongly on two or three of these elements but rarely hit all four.

Further Reading on SmashingMag: Link

Why Do I Need A Teaser? Link

Even though people seem to put out a teaser website for anything these days, let’s step back and think about why one would need a teaser. After all, putting one together takes time and energy, and you could argue that the effort would be better spent on the product itself.

But a teaser can go a long way to ensuring a successful launch. Raising awareness of your product long before it ships makes sense: people are more likely to interact with your app if they’re somewhat familiar with it, so letting them hear about it as soon (and as much) as possible helps. Ideally, you would create a climate of anticipation, and make people look forward to the release date. People love to know in advance about the next big thing, and you can use it to your advantage.

A Powerful Motivating Tool Link

Another factor that is not as obvious but perhaps even more important is motivation. When you’re working hard on something, without any guarantee of success, doubting yourself and losing motivation is easy, and this circumstance often leads people to abandon otherwise promising projects.

Raising awareness and collecting email addresses long before launch does two things to combat this lack of motivation. First, by putting the project out there, you make it much harder for yourself to quit, because we all hate to let people down. Secondly, pre-registering users shows you that there’s actual demand for what you’re building, which goes a long way to silencing those gnawing doubts. In this context, the teaser is a vital part of any product’s Web strategy.

Now that we know the why, let’s look at the how, and analyze a few strategies.

Teaser Page Strategies Link

Create a Strong Identity Link

As stated, the first dimension of a good teaser is memorability. One way to achieve this is with a strong brand. By “brand,” I mean all of the visual attributes that people associate with your product: logo, colors, style, etc. Once you launch, the website could end up looking very different than the teaser page, so having a strong brand is a great way to maintain continuity.

Many websites combine an attractive logo and strong color scheme to establish the brand’s identity, without even telling you what they do. It doesn’t have to be just color or a logo, though.


As for Piictu6, nothing in its teaser stands out at first glance, but the care given to the overall design (from the subtle background pattern to the combination of typefaces and colors) is memorable in itself, putting the application in a class of its own.

Talkbee (see the screenshot below) is a personal project of mine. I decided that I wanted a strong design with bright colors and a memorable logo to differentiate it from the competition.

The logo is prominent on Talkbee, and the whole page is designed around it.

Use a Gimmick Link

One design detail trumps even great branding: a gimmick, something special that people haven’t seen before. One of the most famous examples of this was the teaser page for Silverback7, which included a CSS parallax effect (you can still see the effect on the current website if you resize your browser window). The website went viral in social circles and became hugely popular on the strength of that little CSS trick alone.

The Kickoff’s teaser page features a subtle yet nice illustration and a small email subscription box..

One popular technique that you could use to achieve a “gimmick” is animations, today usually created with CSS transitions and CSS animations. Animations could quickly get overwhelming and frustrating on “real” websites, but they’re appropriate in small doses in teasers. Recent examples of teasers with animation are Cloudring8 and Kickoff.

Ben the Bodyguard1110 draws you in with storytelling.

Another interesting techniques is to use vertical scrolling to tell a story. The poster child for this is certainly Ben the Bodyguard1110 which doesn’t provide all information right away but rather unfolds a story using animations and scrolling.

A very similar idea was used by Dayri and the beautiful Youzee. The technique is successful because storytelling helps people12 make sense of their environment in a logical and linear way. A linear story hooks us much more effectively than disjointed facts.

Leverage the Power of Social Circles Link

A more interesting recent development in design of “coming sooon” pages is to include viral mechanisms in the pre-registration process itself. The simplest form of this is a simple “Tweet this page” button on the page.

LaunchRock2713, a service that lets you quickly generate a teaser page of your own, takes this a step further. After registering for a LaunchRock-powered website, the user gets a personalized link to the teaser. The more people register through this link, the sooner the user gets access to the website. In fact, LaunchRock itself uses this technique: in order to create your own teaser website through LaunchRock, you need to get three other people to sign up to the service… Confused yet?

The teaser for Cowritable, powered by LaunchRock.

Another interesting idea is used by the “king of viral sign-ups” Sharing’s link won’t get you early access. Instead, if multiple people request the same user name when signing up (say, “John”), then whoever gets more people to sign up wins the user name, while the others have to settle for less desirable alternatives (like, say, “John1986”).

Screenshot lets you win your preferred user name.

If you’d rather not go to these extremes, then simple “Tweet” and “Like” buttons are still a good way to encourage people to spread the word. Of course, the easier it is for visitors to share your link, the more they’ll do it.

Give Something Back Link

Probably the most effective way to make people share your teaser is to not just help them reserve a special spot, but also give something in return. For example, if enough of your friends sign up, Fab.com1614 gives you up to $50 in website credit.

Fab.com1614 knows that nothing motivates people like money.

But you don’t have to offer money. You can imagine all sorts of deals: free icons, WordPress themes, etc. Even better, offer the product itself. For example, for every person you refer to its service, Dropbox17 credits you both with extra storage. The best part is that this strategy won’t cost you anything until you’ve actually launched, and even then, because it’s your own product, the costs remain low.

Make People Want It Link

A word of warning. No matter how clever the viral trick, it won’t matter if people don’t actually want to use your app. As smart as’s sign-up process is, nothing on the website hints at what the app actually does. The effect is that many users might find no incentive to share the teaser, because they’re not even sure why they’d want access to the website.

This is why the vast majority of teasers fail: they simply don’t make you want to use the product. The easy solution is to just come out and say what your product does. Show screenshots, post a short video or write some killer copy.

Youzee’s teaser is so full of eye candy that you can’t help but be curious about the app.

Even if you’re restricted in how much you can say about the product, you still need to make people care. You can do this through exceptional design, as Piictu, Youzee and Kickoff do. People will naturally assume that if your teaser is well designed, the product will be, too.

Collecting Data Link

Of course, if the teaser is successful and goes viral, you’ll face another problem: what to do with all of these visitors? The easiest thing would be to just collect email addresses and add them to your mailing list. You can use services such as MailChimp18 or Campaign Monitor19 to manage your list. Both services make it easy to embed and style a simple form on your page; and then you leave the rest to them.

Prefinery2221 promises to make you happier by removing alien probes from your brain.

You also have more advanced options. For example, Prefinery2221 promises to streamline the pre-launch process, taking care of everything from email collection to beta management. But obtaining data doesn’t necessarily mean collecting email addresses. You could poll visitors on your teaser page using a service like KISSinsights, or use Olark23 to let visitors chat with you in real time.

A Teaser Template Link

The teaser should be all about your product and should be tailored to your goals. That being said, I’ve designed a generic template for you to study, adapt and use as is in your own project. (Thanks to Sharypic24 for letting me use its screenshots.) You can download and use the PSD template for free in all your private or commercial projects.

Download the PSD26 (.zip, 1.6 MB).

Going Further Link

The teaser is just one piece of the puzzle. Other important parts of a successful pre-launch campaign are a Twitter account, Facebook page, blog, and others. Unlike on a teaser page, which is usually a one-way medium, people can reply to your tweets and leave comments on your blog. These channels are valuable because they help you get feedback on new ideas and maybe even correct course to better target your market.

Resources Link

Disclaimer Link

I’m involved in a few of the start-ups mentioned in this article. Talkbee is my own personal project, and I do design for Cowritable and Cloudring.

(il) (al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ Back to top Tweet itShare on Facebook

Sacha Greif is the creator of Sidebar, a site+newsletter that gives you the 5 best design links of the day. He has also published Discover Meteor, a book about the Meteor JavaScript framework. You should follow him on Twitter.

  1. 1

    Very good round up! I am always a sucker for the early sign-up. If I had a dollar for every time I signed up for start-up, I would be retired in the Caribbean by now.

  2. 2

    We’re using Prefinery at Piictu and sincerely recommend it. It saved us a lot of work by not having to devote precious time and resources to build a sign-up and invitation system we’d only use once, and if offers a robust API, stats & analytics, and support for MailChimp and Campaign Monitor for when we’re ready to notify our users of our launch, among other things.

  3. 3

    Mark Tailman

    May 24, 2011 5:03 am

    Got Badge? app has also an awesome ‘Coming Soon’ page with an easter egg from Angry Birds:

  4. 4

    lol Ryan

    Awesome round-up and nice inspiration.


  5. 5

    Very nice, really a good place to put across some of the brand feeling of a company.

    I’ve seen a few good ones recently, one that sticks in my mind is Podio’s. Unfortunately it is no longer around (as the product launched) but I found a cropped shot of it on the designer’s dribbble account:

  6. 6

    Good read. However, I’ve noticed a growing number of start-ups that are using the ‘coming-soon’ page as a cop-out. Anyone can create a teaser page without having an actual product. All you need is an idea. I expound a little more on this here:

  7. 7

    Coming soon – that is what you hear often in cinemas!

  8. 8

    Martin Voorzanger

    May 24, 2011 7:42 am

    I suggest to also look at Unbounce, as a tool to build teaser pages. It comes completely hosted, with MailChimp integration. I wrote a blog post about it [disclaimer: I’m not working for Unbounce nor I’m related]:

  9. 9

    Dylan Valade

    May 24, 2011 7:56 am

    Invite the pre-launch users to “Early Access” instead of “Beta”

  10. 10

    Superb round-up and very relevant for us at the moment as we are “launching soon”, “testing” and looking at “early access”… oh, what to do, what to do…..

    Inspirational and spot on – thanks!

  11. 11

    Good list, will use for some inspiration on my next holding page project.

  12. 12

    Akshata Shanbhag

    May 24, 2011 1:05 pm

    Youzee’s teaser looks intriguing. A wonderful roundup.

  13. 13

    Ricardo Saavedra

    May 24, 2011 1:40 pm

    The piicto app it’s look a lot with path. Coincidence ? Maybe ?

  14. 14

    I missed more examples of Coming Soon pages. Sheepy Me could be a good example for online stores —

  15. 15

    Pushan Barman

    May 25, 2011 12:00 am

    I don’t find the reason behind deleting my comment. It wasn’t a spam. It falls under the article topic I guess and its just another example.

    I have a question:
    Why don’t people generally write “coming soon” ? I have seen many designs where it is depicted that the website will come soon but in an indirect way. Is there anything to do with SEO?

    • 16

      Yes, it is partly to do with SEO.

      Sites don’t want to rank for “coming soon”!

      It’s much more beneficial for visitors and search engines alike to have copy about what the site is about.

      For brand new sites on new domains, a holding page will help the search engines to see that the site is genuine, rather than a “scam” site.

  16. 18

    Check out if you want to have a coming soon page in minutes.

    For inspiration, visit the gallery:

  17. 19

    Rochelle Dancel

    May 25, 2011 1:35 am

    Thank you for these really great examples.

    Too often, the ‘coming soon’ page is an afterthought, but if done well, it can be integrated into your marketing campaign strategy.

  18. 20

    Nice insights with some great examples. This article made me also dig deeper into the parallax effect.

  19. 21

    Execute Digital

    May 25, 2011 3:13 am

    Perfect timing for this article, we are currently finalising our holding page.

  20. 22

    Murtaza Ali

    May 25, 2011 6:10 am

    Wonderful! and Nice explained article.

    Well, You can use ‘Email Opt-in for Launch’ instead of ‘Data collection-ability’.

  21. 23
  22. 24

    John Zimmer

    May 25, 2011 9:55 am

    A great article about an important aspect of marketing and branding. It shows that you need to put in some work even before you put in the work!

    And many thanks for linking to my post on the psychology of storytelling.


    John Zimmer

  23. 25

    Nate Gilmore, Shipwire fulfillment

    May 25, 2011 9:58 am

    This is a really nice design write up for “coming soon” pages.

    I think this is missing a big recommendation for e-commerce companies.


    If you are going to attract all that attention and get visitors, why not go further than information collection? Why not get a committed pre-order for some or all the amount (Assuming its a product). This means you have backorders and you also get an indication of inventory you might need.

    Fantastic thoughtful article.


  24. 26

    I really like the Piictu one, specially because i see them thinking of branding with words (“piics are what we call pictures taken on piictu”) from very early on. I think that creates excitement.

    My true question is for how long “beta access” will remain exciting. Once thousands of start-ups continue using it, I think it’ll loose its charm.

  25. 27

    Thanks!!! This is the very helpful for everyone. :)

  26. 28

    Nice article, however you published it one week too late for me :) I just finished designing a coming soon page (, but it is nice to have some sort of checklist to see how i did.

    Additional reasons that we had to build a coming soon page were (1) to get already some domain history for SEO purposes and (2) to have an identity which we can show to prospective partners.

  27. 29

    Kari Honkanen

    May 27, 2011 9:45 am

    We went out with an idea to launch our “coming soon” page in two parts. The first’s out, sign up for the update:

  28. 30

    I really like the coming soon page – very elegant!

  29. 31

    Wow, Piictu looks amazing. They could definitely pass that one page off as a finished site.

    But, you guys forgot about Capturely. I built it to help people get a Coming Soon page out to the world as soon as they buy their domain. Maybe next time, yea?

    Let me know what you think:

  30. 32

    I’d also suggest this page:

  31. 33

    Great post Ryan and nice examples – prefinery is particularly rad, although I guess it’s gotta be cause that’s what they do!

  32. 34

    Great article! Would you have any insight regarding best practices for how early to launch a “teaser countdown” banner/landing page?

  33. 35

    Thanks for the great advice! I took into account the suggestions and made my own coming soon page for an app I’m looking to launch soon:

  34. 36

    Gr8 post

  35. 37

    Thanks for this post which really helped us to design our own page:

    I hope you’ll like it :)

  36. 38

    One of the major problems I discovered with these “early access” coming soon pages is that I’ve signed up for them and months later received my invite. But by the time I received the invite I forgot what the site was, no longer recognized the name, and was too busy to relearn what it is I signed-up for — if I don’t know what it is, I won’t miss it.

    The way I see it, if you’re not Google, Facebook, or another well-known brand do not release your coming soon page until you’re about to release the invites.

  37. 39

    official cheap tory burch sale

    August 25, 2011 2:35 am

    The wide width dress sandals from Softspots are extremely popular because of the high level of comfort they offer while retaining the style element.

  38. 40

    Just came across this one on Forrst today. Quite humorous:

  39. 41

    Josef Nakládal

    January 22, 2012 9:22 pm

    Thanks for this post. Very inspiring for our new comming soon page:

  40. 42

    What a great list of information. For the better customer support, Live2Support is very effective tool.

  41. 43

    Blue Rabbit

    June 12, 2013 1:55 pm

    Awsome article, gives you positive inspiration. You may also check one od my favorite “Coming soon” page

  42. 44

    As we’ll see, most teaser pages focus strongly on two or three of these elements but rarely hit all four.


↑ Back to top