{"id":976,"date":"2016-02-18T10:07:47","date_gmt":"2016-02-18T10:07:47","guid":{"rendered":"https:\/\/woodpecker.co\/blog\/?p=976"},"modified":"2025-01-21T10:28:06","modified_gmt":"2025-01-21T09:28:06","slug":"animated-landing-page","status":"publish","type":"post","link":"https:\/\/woodpecker.co\/blog\/animated-landing-page\/","title":{"rendered":"7 Things We Learned Builiding an Animated Landing Page for our SaaS"},"content":{"rendered":"

Normally, I write about cold emails but this week is about something completely different.\u00a0I\u2019m going to tell you the story of our new landing page<\/a> \u2013 have you seen it already? You lose a lot if you haven\u2019t, believe me. Anyway, I hope this story and the 7 things we learned from it will help you in the process of creating landing pages for your own start-up.<\/p>\n

***<\/p>\n

This post has been first published on 25th Sep 2015<\/strong>, and updated on 18th Feb 2016<\/strong>.<\/em><\/p>\n

***<\/p>\n

In August 2015, we decided we needed a new landing page. A page according to an original project based on an original idea.<\/p>\n

\u201cHow about the Woodpecker pecking at the sign-up form?\u201d \u2013 we were just kidding while brainstorming about the new landing. We wouldn\u2019t have dared to suppose that the ideas from the top of our heads would be actually brought to live.<\/p>\n

Our previous landing pages<\/h2>\n

But let’s start from the beginning. First, I want to show you our\u00a0very first\u00a0landings \u2013\u00a0out of sentiment (plus for a little “before and after” effect.) \ud83d\ude42<\/p>\n

Since we started working on Woodpecker<\/a> at the beginning of 2015, we had two versions of our landing page for beta.<\/p>\n

Both of them were simplistic. Neither of them took us more than an hour to set up (well, excluding the time I spent on the copy…<\/p>\n

If you think putting together 3 sentences is easy, you\u2019re probably right. But try to describe your app in 3 sentences to get people signing up for early access. Not so easy, is it?)<\/p>\n

Here they are:<\/p>\n

<\/p>\n\"Woodpecker.co-LP-wersja2\"<\/a><\/p>\n

The first version of the page didn\u2019t even include a logo. That\u2019s because we didn\u2019t have a logo at that time. But it made people sign up for the beta anyway (3 sentences, remember! \ud83d\ude09 ).<\/p>\n

The second version was also very simple, but in this one we already used our brand new Woodpecker logo<\/a>.<\/p>\n

<\/p>\n\"Woodpecker.co<\/a><\/p>\n

And this was just enough, until we decided we want to put our landing here and there to expose the idea of our start-up\u00a0some more. We needed an original design to do that. So we thought\u2026<\/p>\n

Let\u2019s make a new landing!<\/h2>\n

When we started the topic of a new landing page, we knew just two things:<\/p>\n

    \n
  1. We want the page to be simple, yet powerful.<\/li>\n
  2. We have a powerful logo that we want to expose on the page, obviously.<\/li>\n<\/ol>\n

    So, why not use the logo as the main motif on the page and come up with a way to make it even more powerful?<\/p>\n

    We asked LemonTea<\/a> to help us out with that. They are a digital marketing agency from Poland and they do awesome websites for organizations in and outside the country. This way, we had more heads to figure out what we want to have on our landing.<\/p>\n

    The next step was brainstorming on what we could do with the logo to enhance it and make the page memorable to for its viewers.<\/p>\n

    Let\u2019s make the Woodpecker alive<\/h2>\n

    We figured that we could use\u00a0our logo as a kind of mascot on the site. We thought, \u201cmaybe the Woodpecker<\/span>\u2019s eye could move? Hey, it could follow some gliding envelopes with his eyes! Wow, it would be totally awesome if its whole head could move, like it was pecking!\u201d<\/p>\n

    Well, I remember my first realistic thought was: \u201cThat\u2019s not gonna happen. It\u2019s too much hardcore design to do. It would be almost like making a cartoon\u2026\u201d<\/p>\n

    At moments like that, I always think I\u2019m so lucky to have appropriate people around me. At our previous start-up<\/a> we needed a tool that would send our cold emails for us, we had Maciej<\/a>\u00a0(our CTO) to make our whim happen. Now we want an animated Woodpecker<\/span> \u2013 and here\u2019s Kinga<\/a> saying, \u201cwell, I could actually do that\u201d.<\/p>\n

    The animated design<\/h2>\n

    In the meantime we found out that LemonTea<\/a> have already done some animated websites, we checked out their previous projects and we loved them \u2013 the animation was pretty impressive.<\/p>\n

    We started talking about what effect could be achieved with our Woodpecker<\/span>. Finally, we decided to take up the challenge \u2013 we wanted to make the Woodpecker<\/span> alive.<\/p>\n\"screen-04\"\n

    Do you recall how a few paragraphs ago I mentioned that we didn\u2019t take more than an hour to set up our previous landings? Now, this wasn\u2019t the case here.<\/p>\n

    <\/p>\n\"screen-01\"<\/a><\/p>\n

    Kinga<\/a> has actually spent a few days (and one night) to make sure the Woodpecker<\/span> will move as befits a woodpecker<\/span>.<\/p>\n

    And the same time, she was also working on new designs for Woodpecker.co<\/a> within the app, as we constantly develop new features and improve the existing ones. So there\u2019s no way we can ever forget about the app even for a moment, even if we do totally awesome marketing projects.<\/p>\n\"screen-02\"\n

    I wish I had taken a photo of Kinga the day she was finally done with preparing the animation. That was a rare combination of satisfaction and exhaustion indeed.<\/p>\n

    Next, we needed to specify all the details with the LemonTea crew, so that the many woodpeckers<\/span> Kinga had ready on her drive could become one living Woodpecker on our site.<\/p>\n

    <\/p>\n\"screen-03\"<\/a><\/p>\n

    And Kinga really pays attention to details (like eyebrows lifted a bit too high, or pupils directed a little bit too low). I\u2019m not just saying this because Kinga is a designer and all designers pay attention to details, obviously.<\/p>\n

    She really can see the smallest things a common mortal wouldn\u2019t be able to notice with the naked eye. And moreover, she makes sure the little things, like the eyebrows and pupils, are taken care of.<\/p>\n

    So here\u2019s big and juicy \u201cThank you\u201d to the whole\u00a0LemonTea<\/a>\u00a0team, and especially \u0141ukasz who\u2019s coded the site for us last September: thanks for your patience, open mind and pandering to all our whims. \ud83d\ude09<\/p>\n

    The effects<\/h2>\n

    After a few weeks of fruitful cooperation, the page was\u00a0ready.<\/p>\n

    There were the gliding envelopes. There was the eye blinking and following the envelopes, making sure all the emails reach their addressees at the right time. There was the pecking I thought would be almost impossible to do.<\/p>\n

    The page was what I had in my mind when I had been\u00a0imaging the impossible. We had a living Woodpecker<\/span> on the landing page of our beta. It was lively, it was memorable, it was powerful.<\/p>\n

    Actually, it was so intriguing that we heard from a growth hacker who signed up for the trial out of curiosity, what the Woodpecker<\/span> would do once he signed up. So yeah, you gotta be careful with creative web design. \ud83d\ude42<\/p>\n

    Another alteration of the site – Jan\/Feb 2016<\/h2>\n

    Now we’re getting really close to closing the beta period for Woodpecker. \ud83d\ude42 A SaaS website ultimately needs more than 3 sentences and 6 links, right? That’s why we’re currently working on the new, fuller version of the site. And we’re still improving it step by step.<\/p>\n

    A few days ago, we published\u00a0the new homepage<\/a>. It still has the animated woodpecker\u00a0on the top, but no envelopes anymore. But we added much more information, which you can see\u00a0as you scroll down the page.<\/p>\n

    <\/p>\n\"Woodpecker-new-landing\"<\/a><\/p>\n

    More information without lots of\u00a0copy<\/h3>\n

    For now, we decided on short descriptions of core features along with little graphics. We wanted the site to be easy to scan through. At the same time, we wanted it to explain our SaaS a little bit. Again, few\u00a0words\u00a0\u2013 lots of information to convey. Not an easy task for a copywriter.<\/p>\n

    <\/p>\n\"Woodpecker-integration\"<\/a><\/p>\n

    <\/p>\n\"\"<\/a><\/p>\n

    The homepage also includes some testimonials\u00a0we’ve got from our clients so far. We believe it’s\u00a0always good to show<\/em> that a solution is helpful, not just say<\/em> that on the website.<\/p>\n

    <\/p>\n\"\"<\/a><\/p>\n

    The current version of the page has been prepared in cooperation with\u00a0Ideas ON<\/a>\u00a0\u2013 many thanks guys! \ud83d\ude09<\/p>\n

    This is not the end…<\/h2>\n

    There’s much more information than we previously had on our landing pages. But we’re not finshed yet. There are a few more pages to add, so the site becomes a full presentation of our SaaS. Currently, we’re working on the page “How it works”. Stay tuned to see upcoming alterations. \ud83d\ude42<\/p>\n

    If you\u2019re also curious what the Woodpecker looks like alive go to Woodpecker.co<\/a> and find out.<\/p>\n

    What’s in it for you?<\/h2>\n

    Ok, so that’s our story, but what’s in it for you? Here’s the 7 things we’ve learned when improving our landing page so far.<\/p>\n

    1. Start slow \u2013 but start anyway.<\/h4>\n

    You don’t wait until your product is perfect<\/em> before you launch it. And you don’t have to strive for a perfect<\/em> website from the very beginning. The first site is supposed to check whether you have any potential clients out there \u2013 people who are interested with the very idea of your solution. Sure, it’s harder to attract people without a fantactic site.<\/p>\n

    But if there are people who really have a pain you are trying to solve with your product or service, they will sign up for beta tests after reading just 3 sentences.<\/p>\n

    2. Use your web design to promote your solution.<\/h4>\n

    At the moment you have a website with an original design, you can promote it on web design galleries<\/a> and\u00a0sites promoting start-ups<\/a> to get some more traffic. Some of the sites allow free submissions, some of them will charge you for featuring\u00a0your website, but there are enough of them to choose a couple\u00a0that will fit your needs.<\/p>\n

    3. Ask a group of friends or a befriended company for help.<\/h4>\n

    Sometimes, when planning a landing page, you get stuck in your own ideas and you get so excited that you can miss some crucial details. That’s why it’s good to have someone outside the business to take a fresh look on your ideas and give you some feedback based on another perspective.<\/p>\n

    4. Ask current clients for opinion, before you launch.<\/h4>\n

    At the point when you’ve got your copy and designs, you can ask your current clients and testers for opinion. First, ask those who match your ideal customer profile<\/a>\u00a0especially well. You want more people matching\u00a0the profile to become your clients \u2013 so if the\u00a0current clients like the site, there’s higher probability your\u00a0potential clients will like it as well.<\/p>\n

    5. Be clear in the headline.<\/h4>\n

    Make sure the visitor knows right away what your solution is. You can use a juicy one liner, or a savvy play on words if\u00a0you’re Nike<\/a>, Airbnb<\/a>, or Slack<\/a>. In other words, you don’t have to explain what you do if everyone already knows who you are. But initially, nobody knows you. Nobody knows what you offer. And if they don’t know what you do, they can’t even tell if they want to know you or not.<\/p>\n

    So be pragmatic in the headline. Tell them what can you do for them, so that after\u00a02 seconds\u00a0from\u00a0entering\u00a0your site, they know where they are.<\/p>\n

    6. Writing\u00a0the copy, focus on the client.<\/h4>\n

    It’s like in cold emails<\/a>\u00a0\u2013 everyone likes reading about themselves. Make sure the viewers of your website\u00a0feel like they read about themselves, even when reading about you. Use more “you” and “your” and make sure you write about benefits when presenting\u00a0features. I’m still learning that, it’s not easy.<\/p>\n

    7. Don’t just say you’re awesome, show it.<\/h4>\n

    If you already have some clients, ask them to give you some feedback and use it on your website to show you’re actually solving people’s problems. Lincoln Murphy gives super-useful advice on getting testimonials from your clients without even asking for them. We used advice from this post<\/a>, check it out.<\/p>\n

    What do you think?<\/h2>\n

    We already have some positive feedback from our testers and users. But we\u2019d love to find out what you think the new version of our\u00a0landing page. Feel free to leave a comment here or drop us an email at hello@woodpecker.co.<\/p>\n

    \n