From awful to awesome (and everything in between)
We ramped up our marketing efforts by making landing pages for PPC campaigns. Designing a landing page is similar to designing a website, but more focused on a single call to action.
In our case, the goal was to make the visitor create a trial. Designing a website, you have several pages (eg. homepage, pricing, features…) at your disposal to persuade the visitor, but with a landing page, you have only one.
A landing page has to answer:
- Why you’re worth the time?
- What’s the product?
- Why use it?
- What’s the cost?
- Why are you better than others?
- Are there any special offers?
- What’s the next step?
All that on a single page. Oh, and that page has to be really simple because of the ever-shortening attention span on the internet.
Before the design
We first chose the focus of our campaign. ActiveCollab is quite a big application and there were several possible angles:
- Team collaboration
- Work organization
- Getting paid
Because there’s a great number of apps for managing to-do’s and collaboration, we decided to create a campaign that focused on the whole workflow, from project inception to getting paid, so it was a good fit.
1.0
The first design was created without much internal collaboration. Marketing said we needed a landing page and we’re targeting freelancers; the copywriter laid out and structured the information; the designer created the mockup.
We put our main features and a sign-up form above the fold so the visitor can create a trial as soon they land. We kept it simple. If you need more information, you’d scroll down to read more and then we’d hit you with a big sign up form again, so you don’t have to go back up again.
The result was awful — it was limp, lifeless, and uninspired. It didn’t sell, it didn’t make you go “Woah, I need to try this”. The reaction was more like “Meh, I might give it a shot if the day at the office is especially slow.”
If we’re to convince anyone to set aside a minute and create a trial, we needed to up our game and start working together more closely.
2.0
We remembered we have a video showing how easy it is to create an invoice. The video was great: funny, just long enough to communicate the benefit, and it showed how it all works.
We put a headline (focusing on “you”, the visitor), in the paragraph below identified a problem “you” might face and a solution, and listed the steps as bullet points for scannability.
We also had to put “project management” somewhere so the visitor doesn’t get the wrong conclusion that ActiveCollab is an invoicing app.
We reformatted the sign-up form so it didn’t take so much space by making it vertical. We also needed social proof and show the visitor they can trust us by placing logos of our customers.
It was a bit better than the previous, but it still didn’t sell. The design and the layout looked like something from 2006. Plus it missed a lot of information. Would anyone create a trial solely on that?
But at least we started thinking and working together.
2.1
We kept the video but made it really big to make sure the visitor watch it (as it had all the info). We reworded the copy to include “task management” and added some useful invoicing features; we also clarified our social proof so the visitor doesn’t have to think “what’s up with those logos”. We singled out a few useful features and elaborated more on them, thus replacing the steps and the workflow.
In case the visitor doesn’t watch the video, we put all the steps on how invoicing is easy, along with the real in-app screenshots (screenshots are essential information when you’re selling software). We also put the “Why you’ll love…” to make the whole experience pleasant and human.
We debated whether we should include the website footer. The argument against it shouldn’t be included because the visitor shouldn’t have to leave the page for more information. The page has only one goal: create a trial. If the visitor leaves without creating a trial, conversion goes down.
But that's far from true. If the visitor sees the footer, they will go to the page they need and there create a trial. So the conversion happens, only not on the landing page. After all, we can't predict what someone needs and cater to everyone. The best we can do is lay out all the information most people need and if someone needs more, they know where to go.
In the end, we decided to include the footer because you shouldn’t limit a user. If they need more information and they don't see where to click, they will leave and you fail. Plus, a page without a footer lacks credibility. Footers combined with popups are actually one of the main ways online ecommerce stores convert prospective customers into buying the product.
This iteration was much better, but there was still room for improvement. We still needed a catchy tagline, tighter copy, and greater incentive for the user to respond to our call to action.
3.0
We thought more about the video and realized it was too focused on creating invoices — what we wanted is to present the whole workflow, so we dropped it.
In its place, we put an image of a desk and a screen showing the app. We came up with the tagline “Invoice your work in under 1 minute” which followed the formula:
(YOU) + VERB + WHAT + MEASURABLE BENEFIT
Underneath, we identified the problem we solved for the user and why should they use our app. Much better and more sales oriented.
The design was nice and simple but a bit dark and claustrophobic. It needed work, as well as more information — just one paragraph wasn’t enough.
3.1
We changed the background and opened up the page visually by introducing brighter colors and dynamics with a bouncy line, associating the user with improvement and growth. We moved the sign-up form to the right, below the text, and put social proof under it.
We also added the how-it-works steps and illustrated the ideas with icons, for clarity (some people respond better to visual cues). Also, another call to action was needed at the bottom of the page so the user doesn’t have to scroll back all the way to the top — you want to capture them whenever they are; plus the goal of the page should be real clear.
We were close to the solution. The steps needed more work as the order wasn’t clear and there was no flow: the page wasn’t understandable from the get-go. Plus, there wasn’t any real incentive to create the trial.
3.2
We replaced the blue shape at the top with a soft gray gradient which looked more polished and refined. But the biggest breakthrough was the middle: we laid out the steps in clear order and inserted focused screenshots so the visitor “gets” it instantly (and starts learning about the interface).
Also, we put back the social proof at the bottom (above the footer) and designed a much more compelling call to action.
We decided to give a special offer and incentivize people who came from the PPC campaign by offering them 90 days for free, as opposed to the regular 30. We made sure to emphasize that: the arrow guides the user to the form and there’s an asterisk (*) gently signaling that it’s a limited offer and the visitor should take advantage of it while it lasts.
All the elements were in place, they just needed a bit more polishing. The steps, which went left-right-left-right, weren’t readable and alternate backgrounds weren’t utilized properly.
The color should signify one logical unit — but in our case, the visitor gets an impression that gray steps belong with the sign-up form, and that the white steps are a separate unit. That’s bad user experience.
Also, the line that goes from the top to the sign-up form introduces confusion: only the steps should be connected, and the sign-up form doesn’t have anything to do with the workflow.
Final
We dropped all the visual complexity in favor of clarity:
- No more gradient;
- No image that looks like stock footage — the screenshot is what sells the product; it also shows that ActiveCollab - is a project management app;
- No alternate backgrounds —steps are a separate logical unit and the background should communicate that;
- No left-right element mess — everything is now where you expect it to be, so your eyes don’t have to jump around to - find the next piece of info;
- No sign-up form at the top, just an anchor link to it;
- The steps are connected with a dotted line that guides the user;
- Copy follows a simple formula: verb+what;
We added pricing information (“starting at less than $1/day”) in a smaller font, but we are curious how it will affect the conversion rate, making it a prime candidate for an A/B test.
The result may not be the prettiest version of the landing page but it gets the job done the best. It’s optimized for readability and is scannable. It sells. Every element is there with a reason. We now know exactly:
- Why each element exists,
- Why it’s at that particular place,
- Why it’s styled the way it is.
Visual design is great but conversion is king.
You want to make your pages as readable and easy to understand as possible — on the web, you only get 3 seconds before the visitor decides if you’re worth their attention. In other words, don’t make them think.
BTW the landing page is live and you can create a free 90-day trial.
So we designed for conversion, but did it work? During the design, we debated whether to include footer and pricing. We decided to go with our gut feeling and then test our assumptions.
A/B testing
Looking at Google Analytics, we found that most visitors went to Pricing page and Features page from the footer.
The original landing page had a footer but didn’t have pricing. We wanted to find out:
- How a footer affects the conversion rate?
- How pricing affects the conversion rate?
So we created four variations of the landing page in Optimizely:
Our main goal was the creation of free trial and the second goal was engagement (clicking anywhere on the page).
We ran the test for 2 weeks and here are the results:
- The pages without the footer performed the worst.
- The inclusion of pricing had a negative effect on conversion.
- Our design assumptions were correct as the original landing page had the highest conversion rate (7.94%).
Explaining the results
The engagement rate went down for pages without the footer because the user doesn’t have anywhere to click to go next in case they need more information. Pricing drives the engagement rate because it’s a slider and a visitor needs to interact with it to see different prices.
Why pricing negatively affects the conversion is a matter of psychology: you remind the person they will need to pay for the product one day, so subconsciously they try to avoid the cost by closing the page.
Good salesmen never talk about the price up front (unless they’re selling a commodity and the price is their competitive advantage). They first focus on the product, trying to interest you; once the question of price comes up, the customer will be warmed up and ready to listen, even cooperate.
Conventional advice says that you shouldn’t include a footer so a visitor doesn’t stray away from your main call to action, but it’s not a good practice. One of our readers gave great insight on why you should include a footer, one we agree with:
It’s not a good idea to get rid of all the links leading to other pages of the website. It gives an impression there is nothing more to the company other than that particular page, which makes it seem like a “one day company” that has no experience and is probably going to die the day after tomorrow. I want to see that the company is “serious” and has a serious website. — everdimension
Also, some people need more information before making any kind of commitment. By giving them access to all the information, you put them in the driver's seat and let them create a trial on their own terms (we made sure it’s possible to create it from every page).
Adding LiveChat
There was one improvement we did implement: we included the LiveChat so the visitor can ask us anything they want to know.
Previously, the chat was in our Help section but our support received a lot of technical questions that were outside their scope of knowledge. We decided to move the chat to our marketing pages so the support can better utilize their skills by doing pre-sale and providing product information.
Once we added the chat, we gained insight into what visitors want to know and what they don’t understand. This is better than doing a usability test and ask a person “What do you think?” — we get to hear a real potential customer:
We assumed that if you can track time, you can also track expenses —we were wrong and we know that because we talked with our visitors. We also found out that a lot of people are looking for Basecamp/Asana + Harvest alternative, so that’s a good idea for another landing page.
Different people want to know different things, but we can’t put all the information on the page — we need to keep it focused.
Chat is great for covering those cases, plus the support can act as sales agents and further encourage the visitor to sign-up.
What’s next?
Currently, we’re experimenting with the sign-up form by putting it at the top in B variation. Other than that, we think it’s perfect as it is and will start creating other landing pages for other marketing campaigns, following the established pattern.
If you have any suggestions, leave a comment. We’d love to hear your thoughts and ideas.
