Landing Page Action Kit
Content
35 Beautiful Landing Page Design Examples to Drool Over [With Critiques]
A professionally designed landing page can improve your conversion rates.
This post is all about showcasing awesome landing pages, to give you some inspiration for your next design. It’s worth stating that no page is ever perfect – or conversely, every page can be better. With this in mind, we’ll be offering perspective on what makes each page special or interesting, while providing some insight into what we would try out in an A/B test experiment to optimize for higher conversions.
But what is it that makes a landing page design effective?
There are many factors, but the principle reasons are an adherence to the fundamental rules of conversion centered design: • Use a clear and concise value statement so visitors understand the purpose of the page immediately • Focus the whole page on a single message, with a single primary call to action (CTA) • Use conversion design rules to make your CTA stand out (whitespace, color, contrast, directional cues) • When using a form to collect data, balance the amount of information requested with the perceived value of the item being given in return (report, eBook etc.) • Use modal dialogs for supplementary information (terms & conditions, privacy policy, product details) as opposed to sending them to your website (which removes them from your intended conversion path) • And many more that I’ll get into in the examples below…
1a. Manpacks – Seduction Oriented Design
Site*: www.Manpacks.com Critiqued by: Oli
What I Like
• It’s sexy: Predictable response? Yes, absolutely. That’s the whole point. • Validation: They jump right into showing off the famous publications that have featured their company. From a design perspective, the grey monotone prevents a mishmash of colour creating any visual distraction from the call to action (CTA). • Value propositions: The main content on the page answers two simple questions: “What is it?” and “Why should I care?” • Testimonials: The second is one of the funniest I’ve read. Socks as a Service – genius. • Removal of doubt: The subtext below the CTA lowers the perceived risk, which can improve the clickthrough-rate (CTR).
1b. Manpacks – Seduction Oriented Design
Site*: www.Manpacks.com Critiqued by: Oli
Things I’d change or test
• Tagline: To make it more immediately clear what the purpose of the page is, I’d add a succinct tagline beside the logo. • Main title (core value proposition): There are a couple of ways to use a headline: A) use a very clear statement of what you are offering to enable an understanding of the purpose of your page, or B) entice your visitor to want to keep reading by using a seductive headline. They’ve gone with B here, presumably in an attempt to catch your attention and increase curiosity (or to push a particular button). For a test, I’d try approach A and make it really clear from the get go – what Manpacks is (this would work really well with the tagline to help pass a five second test).
The example on the left shows an alternate page they created, presumably to speak to a different segment or create a different emotional trigger.
2. FluidSurveys – Kings of Contrast
Site*: http://fluidsurveys.com Critiqued by: Oli
What I Like
• Clear value proposition: The headline is very simple and leaves no doubt about the purpose of the page and the product. And it’s nicely backed up by a well written explanation of some of the core benefits directly below. • Highlighted testimonial: The brushed highlight of the testimonial gives it a bit of extra design zing and prevents the page from feeling too text heavy. • Contrast: They chose two nicely contrasting colors to highlight important elements. The free label, and the form CTA. • Context of use: Their choice of imagery lets you know that the product can produce mobile-ready polls. • Validation: Like the example above, they provide a strong sense of trust by including a set of logos. • They’re Canadian! Woot!
2. FluidSurveys – Kings of Contrast
Site*: http://fluidsurveys.com Critiqued by: Oli
Things I’d change or test
• Remove the footer navigation: Any extraneous navigation on a landing page can lead your visitors down the wrong path. I’d recommend removing the footer nav to simplify the available choices. • Explain the logos: Add a small label (like example #1) to explain that they are client logos (or sites that have featured/written about them).
3. Golden Sands – Selling Me Softly
Site*: GoldenSandsExperience.com Critiqued by: Oli
What I Like
• Experience: It immediately makes me want to go on holiday and stay in a pimp hotel. The pillows are literally selling me softly. • Price: Travel is very much about price, and they get that out of the way right off the bat, so you can move on to the finder details after unerstanding if you can afford it or not. #smrt • Endorsement: The Trip Advisor certificate of excellence let’s you know that a recognized authority has validated the company.
3. Golden Sands – Selling Me Softly
Site*: GoldenSandsExperience.com Critiqued by: Oli
Things I’d change or test
• The form header: Apply now? For what? It’s unclear what you’re applying for – I thought it was a booking site, but apparently I have to apply for something. Make it clear why people are filling out your form. • Primary value proposition: There’s no clear statement of what the page is for or what you’ll get. I’d try moving the hotel logos from the top and adding in a strong statement that • Testimonials: The testimonials shown are anonymous which reduces their impact (as they could have been made up). Always ask permission to use a testimonial and include the name of the person providing it for extra trust points. • Exclusive: There is a mention of an exclusive preview invitation, but it doesn’t explain what you’re being invited to. I’d also make this stand out more if it’s an important selling point – perhaps using some visual cues to draw the viewers eye.
4. The Sharp Firm – A Consistent CTA
Site*: SharpFirm.com Designed by: http://www.nuartisan.net Critiqued by: Oli
What I Like
• Consistent CTA’s: the Calls to action on this page are matched in two ways. They have the same message and the same color to let you know which areas to pay attention to. Bonus points for not saying “Submit” on the form button. • Use of video: There are two videos that help build an honest and open dialog with visitors right off the bat. First you get to hear from the company and then they use real video testimonials from clients – much more effective than written quotes. • Clarity: No company wants to be contacted about something they don’t do. By listing the services they offer they ensure the right people will get in touch.
4. The Sharp Firm – A Consistent CTA
Site*: SharpFirm.com Designed by: http://www.nuartisan.net Critiqued by: Oli
Things I’d change or test
Honesty, this page is great – I’d change very little. • Purpose of contact: I wouldn’t normally advocate making a form longer. But it might be helpful to add a dropdown list containing the purpose of the enqiry. This would help from a reporting angle (letting you gauge the needs of your prospects in a simpler manner).
5. GreenLighted – Superfresh
Site*: Greenlighted.com Critiqued by: Oli
What I Like
• It looks awesome! Yeah, I know ugly pages convert great too, but the design here makes me want to stare at it and find out what they’re all about. • Visual chunking: The page is broken up very well vertically, aiding the consumption of information.
5. GreenLighted – Superfresh
Site*: Greenlighted.com Critiqued by: Oli
Things I’d change or test
• What is it? I get a rough sense of what the purpose of the company is, but I wouldn’t mind a more detailed description. To prevent the extra copy cluttering the page, it could be opened in a lightbox. Better yet, add a video explaining what it is, how it works and why you should register. • Who’s it for? Make it clearer what the demographic of intended customers is. If I don’t think/know it’s for me I won’t sign up. • Post conversion social sharing: There’s value in being able to check out the company in it’s social channels – especially when it’s new. However, it would be worth trying moving them to the form confirmation page, so that you’re asking someone who’s already interested in your company, to share your story.
6. Cheezburger – I Can Has be Funny?
Site*: Cheezburger.com Critiqued by: Oli
What I Like
• Cheezburgers!!!!! Actually, I hate real cheeseburgers (can’t eat cheese – waaa waaa waaa). Aside from that, I just think it’s awesome that the Cheezburger family is using Unbounce. • Content chunking: Like the previous example, the page is broken down vertically in a way that makes it easy to digest. They aid getting you back to the top (as it’s a long page) with the classic ^top links at the end of each section. • Strong clarity in the value proposition: The headline is simple and inviting and the secondary block of content and CTA explain in simple terms that you can create a free site. • Repeated CTA: This is a must have for a long landing page. Here they repeat the CTA (the yellow button) in 3 of the sections to keep enticing you to sign up (this is smart as you don’t know which piece of content will trigger the sign-up response and having a CTA right there will aid conversions.
6. Cheezburger – I Can Has be Funny?
Site*: Cheezburger.com Critiqued by: Oli
Things I’d change or test
Nada.
7. ReadItForMe – Show me the CTA
Site*: Get.ReadItFor.me/Launch Critiqued by: Oli
What I Like
• Major endorsements: Having testimonials from a big names like Zappos and top business author Daniel Pink gives you instant credibility. • Good use of the highlighter: Some old-school sales letters really overdo the yellow highlighter pen – but here it’s really useful at bringing some of their core benefits to your attention. • Design break: Although a little ways down the page – the extended stripe stops you in your tracks (next to the boot print – yup, that’s a pun) and brings the subscription CTA to your attention. This type of break in the design is an excellent way to increase attraction.
7. ReadItForMe – Show me the CTA
Site*: Get.ReadItFor.me/Launch Critiqued by: Oli
Things I’d change or test
• Move the stripe up: Put the form above the fold. • Book list: Have a PDF (or other format) with a full list of the currently available books to give people a reason to register – and put it right near the form.
8. Smart Rewards – Clean, Fresh & Simple
Site*: ShareAndTell.com Critiqued by: Oli
What I Like
• Descriptive tagline: The tagline beside the logo makes it very clear what the concept is. • Clean design: The use of whitespace makes the page very easy to read. • One very clear CTA: It’s really obvious what you need to do and the use of contrast shows you within a second where it is.
8. Smart Rewards – Clean, Fresh & Simple
Site*: ShareAndTell.com Critiqued by: Oli
Things I’d change or test
• Privacy policy: You should always include a privacy policy when asking for an email address. Especially when doing Google AdWords as they can sometimes ban your account if you don’t have one. Stick it right next to the email field with an anti-spam statement. • Bullets: there is a lot of text – try breaking it up with some sub-headers or a few bullet points explaining the core benefits.
9. Crikey! – Driven by the Benefits
Site*: Crikey.com.au Critiqued by: Oli
What I Like
• Starts with a bang: Crikey is right! The big bold headline tells you right away that you’re getting a free trial, helping to increase the no-risk factor. • Simplicity: The secondary headline spells out what you’ll get and the 3 bullet benefits are crystal clear. • Social proof: The testimonials (one from a big name) let you know it’s probably worthwhile.
Things I’d change or test
• Price: One barrier is the lack of a price. If you’re going to hide the cost (after the trial) – I’d throw a trust statement near the sign-up form that states that you can cancel at any time etc. • Privacy policy: As in the example above, I’d link to a lightbox page containing your privacy policy and place it in the form area.
10. Echodemic – Selling a Promise
Site*: Echodemic.com Critiqued by: Oli
What I Like
• Opening statement: The opening sentence describes their offering perfectly and succinctly. • Social proof: The decent sized Facebook following lends credibility to their appeal and the fact that they understand how to build a following which is what they are selling. • Honesty: It tells you the cost, so you can weigh up the potential value associated with extending your brand reach. • Clear contact method: The big phone number increases the trust factors by letting you know there are real people to deal with. This will also help with being able to assess the time, number of fans (what demographic they are) and value that you’ll get for your spend.
10. Echodemic – Selling a Promise
Site*: Echodemic.com Critiqued by: Oli
Things I’d change or test
• Move the form: Stick the form above the brand logos. • How are the logos connected: Are they just hotel names to help you understand the point of the page? Or are they existing customers? Make this clear with a title if they are customers.
11. H. Bloom – Pro”Fresh”ional Repetition
Site*: HBloom.com Critiqued by: Oli
What I Like
• Repetition of CTA: Being a long page they are using the smart practice of repeating the CTA throughout. • Teaser: The low price with free shipping placed next to the CTA is a nice way to encourage a click-through. • Sectional: Each section of the site is almost like it’s own mini landing page, with titling, a purpose, a CTA and plenty of social proof with customer and press mention logos.
11. H. Bloom – Pro”Fresh”ional Repetition
Site*: HBloom.com Critiqued by: Oli
Things I’d change or test
• Short version: I really like the current version, but it would be interesting to see just the top section used on it’s own.
12. Wistia – Content Marketing Done Right
Site*: Wistia.com Critiqued by: Oli
What I Like
• It’s all about the benefits: They do a great job of selling you on the reasons for entering your email. • The size of the prize: In this case they are giving a ton away in exchange for only one form field – this is a very good deal.
Things I’d change or test
• Clearer headline: The whole point is to receive a guide to video marketing, but with the funky title design, it’s hard to read and the word guide gets kinda lost. • Privacy policy: If you’ve been reading thus far you know the scoop. • Preview: Build extra trust and incentive by showing a short preview of one of the videos.
13. Zipongo – Fresh Food!
Site*: Zipongo.com Critiqued by: Oli
What I Like
• Freshness: The design (photography, cleanliness and color palette) really exemplify freshness here • Massive CTA: What should you do on this page? Dead obvious right? As it should be. • Big clear benefit: The 50-90% off makes it clear why you should care.
Things I’d change or test
• Title: Use the word food! Make it super obvious. • Unbounce: Send us some free fresh food! :)
14. Tapptics – Emphasizing Design
Site*: Tapptics.com Critiqued by: Oli
What I Like
• Eating your own dog food: The offering here is all about design, and what better way to sell yourself than with a beautiful design. • Sense of urgency: Using the classic “limited time offer” can increase the feeling of urgency and hence conversions. And everyone loves a deal. • Full disclosure: The entire contents of the design kit are shown so you know exactly what you’re getting. No smoke ‘n’ mirrors here. • It’s personal: By including a family photo of the designer it gains a more human feeling which can increase trust. • Includes a video: (The stick figure). Demoing what you’ll get. • Live chat: You can chat directly with Jen which is a great way to get questions answered (which can be fed back into an A/B test once you know where confusion/ hesitation lies).
14. Tapptics – Emphasizing Design
Site*: Tapptics.com Critiqued by: Oli
Things I’d change or test
• Chat position: I’d put the live chat widget right at the point of conversion – so that anyone hesitant to click to buy, has a support channel right there.
15. Tube Mogul – Start Here
Site*: TubeMogul.com Critiqued by: Oli
What I Like
• Directional cues: The use of arrows guides people through how they should interact with your page. • Trust: Customer logos let you know they have a solid product. • Showing features: Screenshots help show what you’ll get.
Things I’d change or test
• Video! When offering a video solution, you should really be using a video to demonstrate what your product is about. Tsk, tsk. • Button copy: Make it very explicit. What exactly are you downloading? The only way to know is to read the small text at the top of the form area. Repeat this clearly on the button
16. Startup Weekend – Newsletter Signup
Site*: StartupWeekend.org Critiqued by: Carlos
What I Like
• Clean: This is very easy to read. The white background with orange headers and black body text stands out easily and the action is easy to see. • Emphasis: Startup Weekend clearly got the memo that bold is a good way to draw attention to important information. • Proof: Existing companies that started at a Startup Weekend.
Things I’d change or test
• Leverage Lists: Too much of a good thing is a bad thing; the first paragraph has too much bold. That first paragraph is probably better off as a list. If you step back from the content you can see that the bold is overpowering.
17. Video Storytelling – eBook Download
Site*: Causevox.com Critiqued by: Carlos
What I Like
• Straight to The Point: The title is informative and leads directly to the action. • What’s the Value: It is important to state what your give away is worth. If you are giving something for free people don’t necessarily think about how much it would cost them to buy the thing you are giving. • Function: About the eBook has a concise description of what the book contains, now the visitor knows what they are going to get.
17. Video Storytelling – eBook Download
Site*: Causevox.com Critiqued by: Carlos
Things I’d change or test
• Order: I would definitely test having Written by appear directly below the action. That makes the eBook more important than the authors, but still offers up the authors as a trust factor at the action point. • Benefits: How does this benefit the visitor. Try making Create Video the Right Way more about how to connect to the people watching, or what feelings the non-profit needs to produce. Non-profits in particular rely on emotional and human connections, if you are trying to speak to them you should have some human benefits attached. • 1-2 Punch: I would test making this page even shorter. Instead of three rows make the second row two columns: one with function, one with benefits.
18. Huli Health – Process Explained
Site*: HuliHealth.com Critiqued by: Carlos
What I Like
• Count it Off: Good use of numbers. This page makes it very clear what the process looks like. • Major Media: The references to major media coverage is a powerful trust factor. • Match Game: Content and images are very well aligned here. Search, Dentists, Scheduling, Traveling, and Review are all clearly expressed.
Things I’d change or test
• Order: I would definitely test having the ordered list above the action. • Trust and Action: I would also test putting the major media logos directly before asking for the action. Showing the visitor you are trustworthy and legitimate before asking them to do anything is a good way to maximize your response rate.
19. Blabcake – Setting the Stage
Site*: BlabCake.com Critiqued by: Carlos
What I Like
• Simple: Clear headline telling the reader where they are. • Good Button: The action is tied to the desire to be notified when the launch happens. • Support: This is a good second call to action. Usually I avoid second calls, but this is an appropriate use of social out links to let the person decide how they want the notification to come. • Oli: I just love the visual design of this page – as a coming soon page, the stage curtains opening remind me of my dad’s theatre. I have a lot of respect for companies that begin their journey with a conscious desire to provide excellence through multiple channels (design, UX, usability) – all of which ultimately lead to conversion.
19. Blabcake – Setting the Stage
Site*: BlabCake.com Critiqued by: Carlos
Things I’d change or test
• Text: The sub-headings all beg the question: “How?” Try using some description of the function that accompanies the benefit described in the subheadings. • Icons: The magic icon is spot on. The other two are a good chance to test different ways to express your future plans. Try showing characters using the appropriate devices, or acting out things related to using the product. • Sharing: Test a secondary call to send this page to a friend, or share on Twitter or Facebook, instead of just following (more action oriented than passive).
20. Polytown – A Guided Experience
Site*: Polytown.co.li Critiqued by: Carlos
What I Like
• Fast: A pre-order, a deal, and an action all in the first foreground element. • Time: The deal is time dependent, that adds some urgency. • To the Point: Each element literally points to the next step.
Things I’d change or test
• Closing: I would try switching the actions so that buying action is at the top and the signup for a Free version is at the bottom – to give more weight to the commerce portion.
21. Demandforce – Marketing Tour
Site*: Demandforce.com Critiqued by: Carlos & Oli
What I Like
• As see on!: Right at the top is a testimonial that describes a benefit and associates the product with a third-party authority, and then backs it up with a great quote from the cpmpany showing how it made them extra money (who doesn’t like that!?) – donations taken at Unbounce.com/olis-poor/ – They even have an Amazon review :) • Market share: they already seem to have a 30% market share – invest. • Demonstrate: Love the images that show what the emails and texts look like.
21. Demandforce – Marketing Tour
Site*: Demandforce.com Critiqued by: Carlos & Oli
Things I’d change or test
• Big Form: There are only two required fields, don’t make a visitor feel like they are taking on a long labor to get information. Scale back to just name and phone number. And don’t start the conversation with “Fill in this form. That’s the equivalent of walking into The Gap and being told to try on clothes and then buy them (yeah right, like they fit well).” Seduce, or even coerce, but don’t instruct. • Call to action: The visitor isn’t really looking to sign up, they probably will respond more to “Request Tour” or “Get Started”. • Footer: The links in the footer, other than Privacy, are just distractions. Get rid of as many leaks as possible to keep conversion high.
22. Adzerk – Green for Go
Site*: Adzerk.com Critiqued by: Carlos
What I Like
• Classic Presentation: Blue and white is a classic business related color scheme. • Tell them and tell them again: The page opens and closes with the same challenge (16 second sign-up). • Iconic: Good use of icons, they help make the content bite sized.
Things I’d change or test
• Important Buttons: the button colors are too similar in color range to the blue. If you want your buttons to pop you need them to contrast with the main theme color. • Benefits: I was most of the way through the page before I could answer the questions about why I would want this. Try moving your benefits, like 5¢ CPM, up near the first CTA button.
23. Boost Your Search – Free Audit
Critiqued by: Carlos
What I Like
• ROBOTS: We like robots. • Make Something Important: Good visual language on the pricing. There is a clear visual communication of which one is the best option. • Show me the numbers: Nice use of statistics and clear communication of cost.
23. Boost Your Search – Free Audit
Critiqued by: Carlos
Things I’d change or test
• Back it up: Cite the sources (Statistics and Testimonial) show that you didn’t just make them up to get the sale. • Stick to your guns: Choose one action and stick with it. In cases like this the e-mail lead is not nearly as valuable as the customer. • Make Two Pages: Differentiate the action Free audit and Paid Plan into separate landing pages so you can segment the traffic from channels like PPC.
24. Knovio – No Talent Required
Site*: Knovio.com Critiqued by: Carlos
What I Like
• Big Buttons: The buttons are bold. • Clear Value: The bullets have clear indications of the value. • Video: The use of video to demonstrate video is spot on and the video title is informative even if you don’t watchit.
Things I’d change or test
• Choose your fight: There are six actions on this page– three social and three button CTAs. There are so many great elements on this page, instead of having the “take a tour” button try having the tour be the video element. • Keep it Simple: Reduce the number of potential actions. Even though this is a tool built on a more robust software let this page get people into the free version and use other pages to upgrade the user.
25. Oil & Gas Investing – Form Focused
Site*: USOilInvestments.info Critiqued by: Carlos
What I Like
• Right to the Point: The action is right at the top. • Supporting Action: Supportive secondary call, call us or download. I am usually against secondary calls, but since this is a big ticket item the phone may be more important. • Scannable: Clear sub-headings make it easy to understand without having to read every piece of text.
Things I’d change or test
• Mis-match: The Oil & Gas Industry block has a visual mis-match; none of those are oil or gas related. Change the images or the headline. • Close Strong: Test a CTA at the bottom too. Which ever is the primary action, probably the phone number.
26. Menucopia – Pre-launch Done Right
Site*: Signup.Menucopia.com Critiqued by: Carlos
What I Like
• Iconic: Great icon to start. If that matches your social media avatar you get bonus points. • Minimalist: Simple open designs give your content room to breathe. • One and Done: One simple action; I think I love you Menucopia.
Things I’d change or test
• Call to Action: That button needs a more compelling action: Join, Get on the List, Be First. Your call to action should be from the perspective of the user and you should be able to add “I want to” before the button’s text. • Social Proof: Test social logos in the benefits section. Don’t just tell people you integrate social, show them the logos. • More Contrast: The blue text should be darker for better readability, and the button text should be bolder.
27. Eureka Report – With Bonus Gift
Site*: EurekaReport.com.au Critiqued by: Carlos
What I Like
• Red, White & Black: The color scheme is classic and trustworthy; this is clearly business oriented. • Bam, CTA: The CTA is descriptive, value based, and right at the beginning. • Images Match: Messaging and imaging are well matched, Time magazine.
27. Eureka Report – With Bonus Gift
Site*: EurekaReport.com.au Critiqued by: Carlos
Things I’d change or test
• Wait What: The product, Eureka Report, is overpowered by the incentive. Am I getting the Eureka Report or Time Magazine. Fix the hierarchy so it’s clear what the purpose of the page is. Try switching the positioning of the 10 reasons block and the form block. • Top X: As popular as Top 10s are smaller lists are punchier and more memorable. Try 5 or 7 that will give you a littler more space to play with too! • Incentive Placement: Test having the “Ends Midnight” next to the form in place of the clock. Remind them right as they are taking action why they are doing it now.
Design Showcase – Digital Telepathy
The remainder of the examples shown have been designed by our premium design partner, Digital Telepathy. First up is the page that showcases their IMPRESS landing page & banner design service and then a series of pages they’ve designed for Unbounce customers.
28. IMPRESS Landing Page Design
Site*: IMPRESS Critiqued by: Oli
What I Like
• Contemporary design: They mix beautiful modern design with modern navigational interaction. Instead of a microsite, the nav does a scroll further down the page to the next section. • Separated landing pages: Each section (or internal page) acts like it’s own landing page with a strong title, beautifully designed description of it’s purpose and a call to action. • Endorsements from big names: Famous names in the industry are used to provide evidence that they are capable of quality work.
28. IMPRESS Landing Page Design
Site*: IMPRESS Critiqued by: Oli
Things I’d change or test
• Hard to find the navigation: The navigation to take you to the next section is hidden on the left side of the page and can be easily missed – leaving the visitor not knowing to scroll down. I’d prefer to see a traditional top navigation that does the same smooth scroll effect to each section with a “back to top” link to reconnect to the header area.
29. SlideDeck Pro
Site*: Slidedeck.com Critiqued by: Oli
What I Like
• The title: Great at describing the demographic – designers. It’s clear if you are a designer, you’re in the right place. • Descriptive CTA: The button describes what you’ll get and how much it costs you. • Demo: They have a great modal demo of what a slidebar is to show you in context what you are buying – BIG plus points. • Features: The page breaks down the feature set really simply • Customers: An impressive set of customer logos completes the evidence that they are good at what they do.
29. SlideDeck Pro
Site*: Slidedeck.com Critiqued by: Oli
Things I’d change or test
• What’s a slider: The best slider, but is it a mini burger or a Javascript thingymajig? You decide? (if you clicked the demo button this is moot).
30. Retargeter
Site*: Retargeter.com Critiqued by: Oli
What I Like
• Headline highlghting: the black background with white text come over as a great exercise in contrast based design to highlight the headline and get the purpose of the page across quickly. • Choice of contact method: Not everyone is new school – especially larger companies. So phone numbers can be fast effective ways to get in contact with people. they combine the main CTa with the secondary phone CTA well in the header. • Good testimonials: Photos, names and links add credibility.
Things I’d change or test
• Pick your conversion goal: the main problem with this page is that there is a click-through CTA at the top and a form below. Which is the intended conversion goal? Chances are most will click the button at the top out of curiosity, but this isn’t a true reflection of conversion or real intent. I’d stick the form up top and remove the button – or vice versa – test, test, test.
31. PetAmberAlert – Literal Design
Site*: PetAmberAlert.com Critiqued by: Oli
What I Like
• Heartstrings! The title alone cuts you to the bone (pun intended). • Best CTA of the day: Find your pet now is such a strong call to action to anyone in this situation. Demographic gold. • Heartstrings #2: “There is a 77% chance that your pet will be seen by someone who received our Pet Amber Alert via:” – come one – convinced yet! This one is all about the copywriting. Awesome.
Things I’d change or test
What? How could I, What a great cause. Honestly though, it’s a good page with good trust factors (logos and testimonials) and a good explanation of what to expect (what’s your pet worth – the pricing table). • Bottom nav: Take away all the extra links – it’s poor form. That’s my gentle critique.
32. Monsoon – The Value of Association
Site*: Monsoonco.com Critiqued by: Oli
What I Like
• Modern tech: Speaks to a very specific modern technology sector (catches the HTML5 nerds is what I’m saying). • Why?: Strong section on the importance of the company’s technology. • Nice form container: the form is above the fold and contained nicely although it could use a little more contract and a visual cue to point out that this is what you want the customer to do.
32. Monsoon – The Value of Association
Site*: Monsoonco.com Critiqued by: Oli
Things I’d change or test
• Mobile Apps: The purpose *appears* to be to build mobile apps but it’s very buried in small text beneath the main imagery – much better to use large test to convey the message and *then* follow it up with “context of use” images where you see apps used on mobile devices. • Talk to us: Why? What is the benefit of talking to you about your project? Try adding a direct benefit beside the CTA that says “Talk to us about your next project, so that we can a,b,c the hell out of it…!” • Clients: Put the title above the images so it’s clear why they are there.
33. Dev Auditions – Chunking & Simple Steps
Site*: DevAuditions.com Critiqued by: Oli
What I Like
• Clear value proposition: It’s clearly about hiring better people – focused on dev. But the headline could be clearer (see below). • Walkthough: The 3-step process paints a simple picture of how the company operates. • Close with the benefits: I like the start, middle and end of this page. Like a good story it leads you through what you need to know, ending with what you’ll get and a closing CTA. +1.
Things I’d change or test
• Clearer headline: Hire Smarter is generic – if you’re looking at dev hires then make the dev logo bigger or change the main headline into something with greater clarity such as “Hire Smarter Dev Talent”. • Types of position: As it’s recruiting, I’d include some scope of the types of talent covered as development can be wide ranging. What are your areas of expertise, and geographical boundaries?
34. Smartr – Smartr Design for Smartr Phones
Critiqued by: Oli
What I Like
• Personal Color: Bold colors that also feel friendly because they are earthy. • Above the Fold: CTA, Video, and Interface presented above the fold–lovely. • Show & Tell: Clear visual instruction toward the 10 reasons means the visitor know where to go and what to expect.
34. Smartr – Smartr Design for Smartr Phones
Critiqued by: Oli
Things I’d change or test
• Matching: The screenshots have low connection to their text. You should test some other images for the features that may better illustrate the text. • 2nd Headline: The second headline loses focus. Is that the benefits or the comparison chart that is being called the best? • Close Strong: The final action doesn’t look clickable and forces a return to the top of the page. Just restate your CTA instead.
35. Keas – Fresh Design is Healthy
Site*: Keas.com Critiqued by: Oli
What I Like
• Image and Words: Light, easily understood background that matches the concept of health. • Give it Space: An open layout lets people scan. Scanning is very useful for getting to the action at the end of the page. • Happiness: The big testimonial is about happiness, which connects well with health, good job taking advantage of natural connections.
Things I’d change or test
• Emphasis: There are so many italics and bolds that it is hard to tell what is important. • Don’t Compete: There are competing CTAs. This page is asking people to Learn More, but one is free (a click) and the other has a cost (e-mail and phone number). If you must have a second action make sure they are cooperative.
Awesome Stat
People finally seem to be getting the message about being more explanatory and creative with their CTA copy (“No More Submit! No More Submit!” – feel free to chant along). From the selection of “lead gen” landing page examples shown, a whopping 73% are doing it right and describing what will happen when you push their buttons!
*wipes eye in moment of gushing pride* - Oli Gardner
5 Conversion Studies Your Competitors Don’t Want You to Know About
We all know that great web design and conversions go hand-inhand, but just what connects the two? What many marketers fail to understand is that your website is more of a “user experience” than a book cover: people interact with your site as they use it, so making it pretty is not your only concern. Fortunately, you can inform yourself by utilizing a variety of insightful eye-tracking studies that reveal how customers really view your website. Let’s get started with some of my favorites:
Use these 5 conversion studies to stay ahead of the competition. Science, FTW! (Image source)
1. Your Headlines Matter… A Lot
In one of my favorite design related studies of all time, Eyetrack III reveals just how important your headlines are in your design. The answer: Super important. In fact, your headlines are consistently the most viewed thing on your homepage, even before your images! Even more interesting is that your headlines need to capture someone’s attention is less than 1 second in order to be effective. That means getting to the point about what you’re offering is crucial. It also means that you need to make your headlines stand out and entice people to read and click. Because of this short time-frame, it’s best to put important and bold words at the very beginning. It’s one of the reasons that list posts do so well on blog: the number appears first, and it’s inviting to see a number. I recently did a post entitled The Marketer’s Guide to Cult Addiction, and the title was formatted to let people know the post was for marketers first, then follow up with a drastic word (“cult”) to keep them hooked. I like how my buddy Rafal Tomal did Copyblogger’s homepage, because you know exactly what sorts of products and services they offer, and that’s after only reading the headline.
Without a concise idea of what your company offers, you’ll lose a lot of potential customers. How well does your headline spell out what your business does for customers?
2. When Things Should Stand Out
Everybody appreciates a web design that “blends” well with the correct colors and subtle texturing, but should anything ever stand out in your web design? According to research that ultimately lead to the documented Von Restorff effect (named after the lead researcher), it should be your call-to action: those things that are “isolated” from others get noticed first. Derek Halpern does a great job of using this study to point out the silliness of asking “what’s the best color for conversions?” In a recent post, as this research shows us; The best color is the color that stands out from the rest of your design.
Over on Help Scout, we use a green button to promote our free 15-day trial versus our normally blue + white color scheme because it sticks out like a sore thumb… and we want it to. First, you need to take a look at what your baseline and accent colors are:
Next, you need to find a color that stands out among these colors. This will become your action color. If you’re sticking with a neutral white and green color scheme for the majority of your site, you could go with a large orange button for your call-to-action. You’ll notice that Mint does this, and you’ll see that it doesn’t have to look ugly!
Notice the two orange areas, one is a call to sign up and the other asks you to get started for free. Be sure to use your “action color” only for actions, don’t get it confused with other colors because you’ll leave your visitors confused.
3. Clean Up Your Act with Whitespace
Some great information from both Eyetrack III as well as Susan Weinschek’s book Neuro Web Design shows us how designers can clean up their act by implementing something that the eye loves: good ol’ fashioned whitespace. Both of these sources show us that website visitors are much more likely to be engaged (and finish reading) content that has the appropriate amount of whitespace and that looks easy to read. This is thus a key ingredient for creating a kick-ass landing page: You won’t be doing any converting if people aren’t reading your stuff. Rafal Tomal comes to the rescue again with these easily implemented images showing how you can improve your written content with a few simple changes:
The Importance of whitespace in spacing: Rafal shows us that it is important to spread out your copy with bold headlines and shorter paragraphs so people keep reading.
The importance of whitespace in written content: Rafal recommends increasing line spacing and indentation for copy.
You’ll notice huge sites like Smashing Mag and even NBC news have incorporated this font + whitespace styling into their written content. Don’t be afraid to utilize whitespace: You don’t have to have a minimalist design to incorporate a healthy amount of whitespace that promotes the reading of your well-crafted copy.
4. Getting Clever With Your Images
It’s a visual world these days, and there are a few ways that you can get mighty clever with your images, all by using a very simple design trick known as “line of sight”. This data comes to us via researcher Giovanni Galfano and his studies on how we react to the gaze of others. He discovered two very clear things about images… 1. We can’t resist following the gaze of another face, even if the face isn’t real 2. We are very susceptible to following arrows and other directional cues
This example from Chemistry.com may look familiar:
This is the quintessential example of line of sight in action. It also must be working, because they’ve been using it for quite some time now.
I also saw a noticeable boost in conversions when I implemented the line of sight technique over on Sparring Mind… even though it wasn’t a real face.
As I also mentioned, Galfano found that directional cues also have a major impact on where we look onpage (only slightly less effective than faces). I know a lot of designers who are averse to using things like arrows because they feel “too pushy”, but there is a way to implement them with class, such as how Rafal worked them in on Chris Brogan’s stunning redesign:
Subtle yet effective.
Are you implementing directional cues into your design? You should be.
5. Getting People Started
One thing that the Eyetrack III study noted was that the headline + intro paragraph was pivotal in deciding whether or not people would read the full piece (whatever is was, blog post, landing page, etc.). The problem then is this: How do you get people to approach your content without slacking on quality? I like Derek Halpern’s approach on the matter, with his opinion being: “The only job of your opening is to get people to read your opening… that’s it.” It’s true, getting people past the first couple of lines has been proven to be the biggest indicator in whether or not they’ll finish a piece of content. Thanks to awesome from Mary Dyson, we also finally have and answer on what to do: People read content faster on long lines, but prefer content on shorter lines… So, why not give ‘em both? Starting off blog posts or landing page copy with a short line length can help increase initial “stickyness” of your content, and then after they start reading, you can go back to a longer line length.
The easiest way to accomplish this is with an image aligned to the right:
This creates the shorter line length that we desire to see (as revealed by Mary’s research), but also returns to a more natural line length as the content progresses. Just complete your post introduction beside the image, and continue the rest of the post as usual. No reason to scare people away with a big “wall o’ text” now!
4;;8=6
MORE
1
6 TO
STEPS
P
roperly written e-commerce copy can make a HUGE di erence on your website. It’s not uncommon to see proper copywriting increase search tra c by 50% and conversion rates by 30%. Below, we’ve presented 6 steps to selling more through e-commerce copywriting. Courtesy of @smashingmag.
ce mer m o Ec riting w wi t h o c py
ay ni n o FORMATTING
A good e-commerce website should use combination of bullets and paragraphs. Bullets do a great job in highlighting key product details, and paragraphs add color and texture to your product descriptions.
79% of people scan pages instead of reading every word.
2
Use Crisp & Car COPYWRITING
Avoid long sentences. Long, wordy sentences are di cult to digest and aren’t good at persuading your audience to buy your product.
A barrel of la
ughs!! ay the golden egg!! L
Avoid clichés and jargon. Clarity should be your goal—not clever one-liners. Excessive use of clichés and jargon will only distract your readers. Leave out extraneous, flowery language that won’t help customers choose your product.
ABC. 123.
Speak simply. You’re not competing in a spelling bee—you’re selling your wares. Your writing should be easy to understand. Using an advanced vocabulary will only lead to confusion.
This product is the best product available.
Write in an active voice. Your sentences should lead with the noun that is doing the action. Active voice is clearer and makes it easier to persuade your visitors to buy your products.
3
v i C pywriing MISTAKES
Be sure to write good copy for product pages. The most common mistake is to have no copy on product pages. Without copy, you lose a vital mode of expressing your product and building trust. The lift in conversion rates and search tra c are always palpable.
Establish a consistent tone sitewide. Every page across your site should have the same general tone. This gives users a sense of comfort and safety.
Don’t exaggerate. Be honest when promoting your product. Failing to do so will cost your website authenticity and trust.
Don’t reinvent the wheel. Consumers have developed shopping habits from their collective experience across thousands of websites. Instead of being creative, stick with standard naming conventions for labels like “contact us,” “add to basket,” etc.
Localize your copy. Everyone has heard an example of an awkward translation. With cultural sensitivity in mind, try to localize your copy as much as possible—don’t use robotic translation. If localized copy is not possible, write copy that is compatible for everyone.
4
Esbish TRUST
Write impeccable copy. Grammar and spelling mistakes make you look careless and incompetent. If you won’t invest the time to produce reasonably clean copy, there’s a good chance that your visitors won’t invest their time and money in your business.
State the obvious. Don’t be afraid to hold your customer’s hand and guide them through your website—paying special attention to the checkout process. Be clear when explaining payment, shipping and return processes. If a customer is uncertain about any of these details they won’t buy your product.
A Forrester study showed that 20% of people had abandoned a purchase because shipping costs were unclear
5
G b v n by n THE BASICS
Keep product descriptions straightforward and informative. Product descriptions don’t have to be boring—they should be positive and inspiring. However, be careful about how aggressive your copy sounds. You want to draw readers in, but you don’t want to su ocate them.
Weave the informative in with the creative. Informative copy that’s engaging will keep visitors on your site and persuade them to buy your product. Strong product images which support the copy also help give potential customers a favorable impression.
6
uran h COMPETITION
Intertwine SEO into your website structure. Category, brand and product pages all should have unique text. Work with your copywriter to craft a message around each page. If you have a liates, provide them with alternative copy so that both you and your a liates can rank for di erent keyword combinations.
Need to know if your copy is working or not? We can help!
Let’s talk: +1 (888) 767-5477
PEOPLE PAY YOU. NOT PAGEVIEWS.
KISSmetrics is a powerful web analytics solution that helps you make smarter business decisions. Try KISSmetrics for FREE: kissmetrics.com/signup
Special thanks to @smashingmag and @cmcopywriters
A professionally designed landing page can improve your conversion rates.
This post is all about showcasing awesome landing pages, to give you some inspiration for your next design. It’s worth stating that no page is ever perfect – or conversely, every page can be better. With this in mind, we’ll be offering perspective on what makes each page special or interesting, while providing some insight into what we would try out in an A/B test experiment to optimize for higher conversions.
But what is it that makes a landing page design effective?
There are many factors, but the principle reasons are an adherence to the fundamental rules of conversion centered design: • Use a clear and concise value statement so visitors understand the purpose of the page immediately • Focus the whole page on a single message, with a single primary call to action (CTA) • Use conversion design rules to make your CTA stand out (whitespace, color, contrast, directional cues) • When using a form to collect data, balance the amount of information requested with the perceived value of the item being given in return (report, eBook etc.) • Use modal dialogs for supplementary information (terms & conditions, privacy policy, product details) as opposed to sending them to your website (which removes them from your intended conversion path) • And many more that I’ll get into in the examples below…
1a. Manpacks – Seduction Oriented Design
Site*: www.Manpacks.com Critiqued by: Oli
What I Like
• It’s sexy: Predictable response? Yes, absolutely. That’s the whole point. • Validation: They jump right into showing off the famous publications that have featured their company. From a design perspective, the grey monotone prevents a mishmash of colour creating any visual distraction from the call to action (CTA). • Value propositions: The main content on the page answers two simple questions: “What is it?” and “Why should I care?” • Testimonials: The second is one of the funniest I’ve read. Socks as a Service – genius. • Removal of doubt: The subtext below the CTA lowers the perceived risk, which can improve the clickthrough-rate (CTR).
1b. Manpacks – Seduction Oriented Design
Site*: www.Manpacks.com Critiqued by: Oli
Things I’d change or test
• Tagline: To make it more immediately clear what the purpose of the page is, I’d add a succinct tagline beside the logo. • Main title (core value proposition): There are a couple of ways to use a headline: A) use a very clear statement of what you are offering to enable an understanding of the purpose of your page, or B) entice your visitor to want to keep reading by using a seductive headline. They’ve gone with B here, presumably in an attempt to catch your attention and increase curiosity (or to push a particular button). For a test, I’d try approach A and make it really clear from the get go – what Manpacks is (this would work really well with the tagline to help pass a five second test).
The example on the left shows an alternate page they created, presumably to speak to a different segment or create a different emotional trigger.
2. FluidSurveys – Kings of Contrast
Site*: http://fluidsurveys.com Critiqued by: Oli
What I Like
• Clear value proposition: The headline is very simple and leaves no doubt about the purpose of the page and the product. And it’s nicely backed up by a well written explanation of some of the core benefits directly below. • Highlighted testimonial: The brushed highlight of the testimonial gives it a bit of extra design zing and prevents the page from feeling too text heavy. • Contrast: They chose two nicely contrasting colors to highlight important elements. The free label, and the form CTA. • Context of use: Their choice of imagery lets you know that the product can produce mobile-ready polls. • Validation: Like the example above, they provide a strong sense of trust by including a set of logos. • They’re Canadian! Woot!
2. FluidSurveys – Kings of Contrast
Site*: http://fluidsurveys.com Critiqued by: Oli
Things I’d change or test
• Remove the footer navigation: Any extraneous navigation on a landing page can lead your visitors down the wrong path. I’d recommend removing the footer nav to simplify the available choices. • Explain the logos: Add a small label (like example #1) to explain that they are client logos (or sites that have featured/written about them).
3. Golden Sands – Selling Me Softly
Site*: GoldenSandsExperience.com Critiqued by: Oli
What I Like
• Experience: It immediately makes me want to go on holiday and stay in a pimp hotel. The pillows are literally selling me softly. • Price: Travel is very much about price, and they get that out of the way right off the bat, so you can move on to the finder details after unerstanding if you can afford it or not. #smrt • Endorsement: The Trip Advisor certificate of excellence let’s you know that a recognized authority has validated the company.
3. Golden Sands – Selling Me Softly
Site*: GoldenSandsExperience.com Critiqued by: Oli
Things I’d change or test
• The form header: Apply now? For what? It’s unclear what you’re applying for – I thought it was a booking site, but apparently I have to apply for something. Make it clear why people are filling out your form. • Primary value proposition: There’s no clear statement of what the page is for or what you’ll get. I’d try moving the hotel logos from the top and adding in a strong statement that • Testimonials: The testimonials shown are anonymous which reduces their impact (as they could have been made up). Always ask permission to use a testimonial and include the name of the person providing it for extra trust points. • Exclusive: There is a mention of an exclusive preview invitation, but it doesn’t explain what you’re being invited to. I’d also make this stand out more if it’s an important selling point – perhaps using some visual cues to draw the viewers eye.
4. The Sharp Firm – A Consistent CTA
Site*: SharpFirm.com Designed by: http://www.nuartisan.net Critiqued by: Oli
What I Like
• Consistent CTA’s: the Calls to action on this page are matched in two ways. They have the same message and the same color to let you know which areas to pay attention to. Bonus points for not saying “Submit” on the form button. • Use of video: There are two videos that help build an honest and open dialog with visitors right off the bat. First you get to hear from the company and then they use real video testimonials from clients – much more effective than written quotes. • Clarity: No company wants to be contacted about something they don’t do. By listing the services they offer they ensure the right people will get in touch.
4. The Sharp Firm – A Consistent CTA
Site*: SharpFirm.com Designed by: http://www.nuartisan.net Critiqued by: Oli
Things I’d change or test
Honesty, this page is great – I’d change very little. • Purpose of contact: I wouldn’t normally advocate making a form longer. But it might be helpful to add a dropdown list containing the purpose of the enqiry. This would help from a reporting angle (letting you gauge the needs of your prospects in a simpler manner).
5. GreenLighted – Superfresh
Site*: Greenlighted.com Critiqued by: Oli
What I Like
• It looks awesome! Yeah, I know ugly pages convert great too, but the design here makes me want to stare at it and find out what they’re all about. • Visual chunking: The page is broken up very well vertically, aiding the consumption of information.
5. GreenLighted – Superfresh
Site*: Greenlighted.com Critiqued by: Oli
Things I’d change or test
• What is it? I get a rough sense of what the purpose of the company is, but I wouldn’t mind a more detailed description. To prevent the extra copy cluttering the page, it could be opened in a lightbox. Better yet, add a video explaining what it is, how it works and why you should register. • Who’s it for? Make it clearer what the demographic of intended customers is. If I don’t think/know it’s for me I won’t sign up. • Post conversion social sharing: There’s value in being able to check out the company in it’s social channels – especially when it’s new. However, it would be worth trying moving them to the form confirmation page, so that you’re asking someone who’s already interested in your company, to share your story.
6. Cheezburger – I Can Has be Funny?
Site*: Cheezburger.com Critiqued by: Oli
What I Like
• Cheezburgers!!!!! Actually, I hate real cheeseburgers (can’t eat cheese – waaa waaa waaa). Aside from that, I just think it’s awesome that the Cheezburger family is using Unbounce. • Content chunking: Like the previous example, the page is broken down vertically in a way that makes it easy to digest. They aid getting you back to the top (as it’s a long page) with the classic ^top links at the end of each section. • Strong clarity in the value proposition: The headline is simple and inviting and the secondary block of content and CTA explain in simple terms that you can create a free site. • Repeated CTA: This is a must have for a long landing page. Here they repeat the CTA (the yellow button) in 3 of the sections to keep enticing you to sign up (this is smart as you don’t know which piece of content will trigger the sign-up response and having a CTA right there will aid conversions.
6. Cheezburger – I Can Has be Funny?
Site*: Cheezburger.com Critiqued by: Oli
Things I’d change or test
Nada.
7. ReadItForMe – Show me the CTA
Site*: Get.ReadItFor.me/Launch Critiqued by: Oli
What I Like
• Major endorsements: Having testimonials from a big names like Zappos and top business author Daniel Pink gives you instant credibility. • Good use of the highlighter: Some old-school sales letters really overdo the yellow highlighter pen – but here it’s really useful at bringing some of their core benefits to your attention. • Design break: Although a little ways down the page – the extended stripe stops you in your tracks (next to the boot print – yup, that’s a pun) and brings the subscription CTA to your attention. This type of break in the design is an excellent way to increase attraction.
7. ReadItForMe – Show me the CTA
Site*: Get.ReadItFor.me/Launch Critiqued by: Oli
Things I’d change or test
• Move the stripe up: Put the form above the fold. • Book list: Have a PDF (or other format) with a full list of the currently available books to give people a reason to register – and put it right near the form.
8. Smart Rewards – Clean, Fresh & Simple
Site*: ShareAndTell.com Critiqued by: Oli
What I Like
• Descriptive tagline: The tagline beside the logo makes it very clear what the concept is. • Clean design: The use of whitespace makes the page very easy to read. • One very clear CTA: It’s really obvious what you need to do and the use of contrast shows you within a second where it is.
8. Smart Rewards – Clean, Fresh & Simple
Site*: ShareAndTell.com Critiqued by: Oli
Things I’d change or test
• Privacy policy: You should always include a privacy policy when asking for an email address. Especially when doing Google AdWords as they can sometimes ban your account if you don’t have one. Stick it right next to the email field with an anti-spam statement. • Bullets: there is a lot of text – try breaking it up with some sub-headers or a few bullet points explaining the core benefits.
9. Crikey! – Driven by the Benefits
Site*: Crikey.com.au Critiqued by: Oli
What I Like
• Starts with a bang: Crikey is right! The big bold headline tells you right away that you’re getting a free trial, helping to increase the no-risk factor. • Simplicity: The secondary headline spells out what you’ll get and the 3 bullet benefits are crystal clear. • Social proof: The testimonials (one from a big name) let you know it’s probably worthwhile.
Things I’d change or test
• Price: One barrier is the lack of a price. If you’re going to hide the cost (after the trial) – I’d throw a trust statement near the sign-up form that states that you can cancel at any time etc. • Privacy policy: As in the example above, I’d link to a lightbox page containing your privacy policy and place it in the form area.
10. Echodemic – Selling a Promise
Site*: Echodemic.com Critiqued by: Oli
What I Like
• Opening statement: The opening sentence describes their offering perfectly and succinctly. • Social proof: The decent sized Facebook following lends credibility to their appeal and the fact that they understand how to build a following which is what they are selling. • Honesty: It tells you the cost, so you can weigh up the potential value associated with extending your brand reach. • Clear contact method: The big phone number increases the trust factors by letting you know there are real people to deal with. This will also help with being able to assess the time, number of fans (what demographic they are) and value that you’ll get for your spend.
10. Echodemic – Selling a Promise
Site*: Echodemic.com Critiqued by: Oli
Things I’d change or test
• Move the form: Stick the form above the brand logos. • How are the logos connected: Are they just hotel names to help you understand the point of the page? Or are they existing customers? Make this clear with a title if they are customers.
11. H. Bloom – Pro”Fresh”ional Repetition
Site*: HBloom.com Critiqued by: Oli
What I Like
• Repetition of CTA: Being a long page they are using the smart practice of repeating the CTA throughout. • Teaser: The low price with free shipping placed next to the CTA is a nice way to encourage a click-through. • Sectional: Each section of the site is almost like it’s own mini landing page, with titling, a purpose, a CTA and plenty of social proof with customer and press mention logos.
11. H. Bloom – Pro”Fresh”ional Repetition
Site*: HBloom.com Critiqued by: Oli
Things I’d change or test
• Short version: I really like the current version, but it would be interesting to see just the top section used on it’s own.
12. Wistia – Content Marketing Done Right
Site*: Wistia.com Critiqued by: Oli
What I Like
• It’s all about the benefits: They do a great job of selling you on the reasons for entering your email. • The size of the prize: In this case they are giving a ton away in exchange for only one form field – this is a very good deal.
Things I’d change or test
• Clearer headline: The whole point is to receive a guide to video marketing, but with the funky title design, it’s hard to read and the word guide gets kinda lost. • Privacy policy: If you’ve been reading thus far you know the scoop. • Preview: Build extra trust and incentive by showing a short preview of one of the videos.
13. Zipongo – Fresh Food!
Site*: Zipongo.com Critiqued by: Oli
What I Like
• Freshness: The design (photography, cleanliness and color palette) really exemplify freshness here • Massive CTA: What should you do on this page? Dead obvious right? As it should be. • Big clear benefit: The 50-90% off makes it clear why you should care.
Things I’d change or test
• Title: Use the word food! Make it super obvious. • Unbounce: Send us some free fresh food! :)
14. Tapptics – Emphasizing Design
Site*: Tapptics.com Critiqued by: Oli
What I Like
• Eating your own dog food: The offering here is all about design, and what better way to sell yourself than with a beautiful design. • Sense of urgency: Using the classic “limited time offer” can increase the feeling of urgency and hence conversions. And everyone loves a deal. • Full disclosure: The entire contents of the design kit are shown so you know exactly what you’re getting. No smoke ‘n’ mirrors here. • It’s personal: By including a family photo of the designer it gains a more human feeling which can increase trust. • Includes a video: (The stick figure). Demoing what you’ll get. • Live chat: You can chat directly with Jen which is a great way to get questions answered (which can be fed back into an A/B test once you know where confusion/ hesitation lies).
14. Tapptics – Emphasizing Design
Site*: Tapptics.com Critiqued by: Oli
Things I’d change or test
• Chat position: I’d put the live chat widget right at the point of conversion – so that anyone hesitant to click to buy, has a support channel right there.
15. Tube Mogul – Start Here
Site*: TubeMogul.com Critiqued by: Oli
What I Like
• Directional cues: The use of arrows guides people through how they should interact with your page. • Trust: Customer logos let you know they have a solid product. • Showing features: Screenshots help show what you’ll get.
Things I’d change or test
• Video! When offering a video solution, you should really be using a video to demonstrate what your product is about. Tsk, tsk. • Button copy: Make it very explicit. What exactly are you downloading? The only way to know is to read the small text at the top of the form area. Repeat this clearly on the button
16. Startup Weekend – Newsletter Signup
Site*: StartupWeekend.org Critiqued by: Carlos
What I Like
• Clean: This is very easy to read. The white background with orange headers and black body text stands out easily and the action is easy to see. • Emphasis: Startup Weekend clearly got the memo that bold is a good way to draw attention to important information. • Proof: Existing companies that started at a Startup Weekend.
Things I’d change or test
• Leverage Lists: Too much of a good thing is a bad thing; the first paragraph has too much bold. That first paragraph is probably better off as a list. If you step back from the content you can see that the bold is overpowering.
17. Video Storytelling – eBook Download
Site*: Causevox.com Critiqued by: Carlos
What I Like
• Straight to The Point: The title is informative and leads directly to the action. • What’s the Value: It is important to state what your give away is worth. If you are giving something for free people don’t necessarily think about how much it would cost them to buy the thing you are giving. • Function: About the eBook has a concise description of what the book contains, now the visitor knows what they are going to get.
17. Video Storytelling – eBook Download
Site*: Causevox.com Critiqued by: Carlos
Things I’d change or test
• Order: I would definitely test having Written by appear directly below the action. That makes the eBook more important than the authors, but still offers up the authors as a trust factor at the action point. • Benefits: How does this benefit the visitor. Try making Create Video the Right Way more about how to connect to the people watching, or what feelings the non-profit needs to produce. Non-profits in particular rely on emotional and human connections, if you are trying to speak to them you should have some human benefits attached. • 1-2 Punch: I would test making this page even shorter. Instead of three rows make the second row two columns: one with function, one with benefits.
18. Huli Health – Process Explained
Site*: HuliHealth.com Critiqued by: Carlos
What I Like
• Count it Off: Good use of numbers. This page makes it very clear what the process looks like. • Major Media: The references to major media coverage is a powerful trust factor. • Match Game: Content and images are very well aligned here. Search, Dentists, Scheduling, Traveling, and Review are all clearly expressed.
Things I’d change or test
• Order: I would definitely test having the ordered list above the action. • Trust and Action: I would also test putting the major media logos directly before asking for the action. Showing the visitor you are trustworthy and legitimate before asking them to do anything is a good way to maximize your response rate.
19. Blabcake – Setting the Stage
Site*: BlabCake.com Critiqued by: Carlos
What I Like
• Simple: Clear headline telling the reader where they are. • Good Button: The action is tied to the desire to be notified when the launch happens. • Support: This is a good second call to action. Usually I avoid second calls, but this is an appropriate use of social out links to let the person decide how they want the notification to come. • Oli: I just love the visual design of this page – as a coming soon page, the stage curtains opening remind me of my dad’s theatre. I have a lot of respect for companies that begin their journey with a conscious desire to provide excellence through multiple channels (design, UX, usability) – all of which ultimately lead to conversion.
19. Blabcake – Setting the Stage
Site*: BlabCake.com Critiqued by: Carlos
Things I’d change or test
• Text: The sub-headings all beg the question: “How?” Try using some description of the function that accompanies the benefit described in the subheadings. • Icons: The magic icon is spot on. The other two are a good chance to test different ways to express your future plans. Try showing characters using the appropriate devices, or acting out things related to using the product. • Sharing: Test a secondary call to send this page to a friend, or share on Twitter or Facebook, instead of just following (more action oriented than passive).
20. Polytown – A Guided Experience
Site*: Polytown.co.li Critiqued by: Carlos
What I Like
• Fast: A pre-order, a deal, and an action all in the first foreground element. • Time: The deal is time dependent, that adds some urgency. • To the Point: Each element literally points to the next step.
Things I’d change or test
• Closing: I would try switching the actions so that buying action is at the top and the signup for a Free version is at the bottom – to give more weight to the commerce portion.
21. Demandforce – Marketing Tour
Site*: Demandforce.com Critiqued by: Carlos & Oli
What I Like
• As see on!: Right at the top is a testimonial that describes a benefit and associates the product with a third-party authority, and then backs it up with a great quote from the cpmpany showing how it made them extra money (who doesn’t like that!?) – donations taken at Unbounce.com/olis-poor/ – They even have an Amazon review :) • Market share: they already seem to have a 30% market share – invest. • Demonstrate: Love the images that show what the emails and texts look like.
21. Demandforce – Marketing Tour
Site*: Demandforce.com Critiqued by: Carlos & Oli
Things I’d change or test
• Big Form: There are only two required fields, don’t make a visitor feel like they are taking on a long labor to get information. Scale back to just name and phone number. And don’t start the conversation with “Fill in this form. That’s the equivalent of walking into The Gap and being told to try on clothes and then buy them (yeah right, like they fit well).” Seduce, or even coerce, but don’t instruct. • Call to action: The visitor isn’t really looking to sign up, they probably will respond more to “Request Tour” or “Get Started”. • Footer: The links in the footer, other than Privacy, are just distractions. Get rid of as many leaks as possible to keep conversion high.
22. Adzerk – Green for Go
Site*: Adzerk.com Critiqued by: Carlos
What I Like
• Classic Presentation: Blue and white is a classic business related color scheme. • Tell them and tell them again: The page opens and closes with the same challenge (16 second sign-up). • Iconic: Good use of icons, they help make the content bite sized.
Things I’d change or test
• Important Buttons: the button colors are too similar in color range to the blue. If you want your buttons to pop you need them to contrast with the main theme color. • Benefits: I was most of the way through the page before I could answer the questions about why I would want this. Try moving your benefits, like 5¢ CPM, up near the first CTA button.
23. Boost Your Search – Free Audit
Critiqued by: Carlos
What I Like
• ROBOTS: We like robots. • Make Something Important: Good visual language on the pricing. There is a clear visual communication of which one is the best option. • Show me the numbers: Nice use of statistics and clear communication of cost.
23. Boost Your Search – Free Audit
Critiqued by: Carlos
Things I’d change or test
• Back it up: Cite the sources (Statistics and Testimonial) show that you didn’t just make them up to get the sale. • Stick to your guns: Choose one action and stick with it. In cases like this the e-mail lead is not nearly as valuable as the customer. • Make Two Pages: Differentiate the action Free audit and Paid Plan into separate landing pages so you can segment the traffic from channels like PPC.
24. Knovio – No Talent Required
Site*: Knovio.com Critiqued by: Carlos
What I Like
• Big Buttons: The buttons are bold. • Clear Value: The bullets have clear indications of the value. • Video: The use of video to demonstrate video is spot on and the video title is informative even if you don’t watchit.
Things I’d change or test
• Choose your fight: There are six actions on this page– three social and three button CTAs. There are so many great elements on this page, instead of having the “take a tour” button try having the tour be the video element. • Keep it Simple: Reduce the number of potential actions. Even though this is a tool built on a more robust software let this page get people into the free version and use other pages to upgrade the user.
25. Oil & Gas Investing – Form Focused
Site*: USOilInvestments.info Critiqued by: Carlos
What I Like
• Right to the Point: The action is right at the top. • Supporting Action: Supportive secondary call, call us or download. I am usually against secondary calls, but since this is a big ticket item the phone may be more important. • Scannable: Clear sub-headings make it easy to understand without having to read every piece of text.
Things I’d change or test
• Mis-match: The Oil & Gas Industry block has a visual mis-match; none of those are oil or gas related. Change the images or the headline. • Close Strong: Test a CTA at the bottom too. Which ever is the primary action, probably the phone number.
26. Menucopia – Pre-launch Done Right
Site*: Signup.Menucopia.com Critiqued by: Carlos
What I Like
• Iconic: Great icon to start. If that matches your social media avatar you get bonus points. • Minimalist: Simple open designs give your content room to breathe. • One and Done: One simple action; I think I love you Menucopia.
Things I’d change or test
• Call to Action: That button needs a more compelling action: Join, Get on the List, Be First. Your call to action should be from the perspective of the user and you should be able to add “I want to” before the button’s text. • Social Proof: Test social logos in the benefits section. Don’t just tell people you integrate social, show them the logos. • More Contrast: The blue text should be darker for better readability, and the button text should be bolder.
27. Eureka Report – With Bonus Gift
Site*: EurekaReport.com.au Critiqued by: Carlos
What I Like
• Red, White & Black: The color scheme is classic and trustworthy; this is clearly business oriented. • Bam, CTA: The CTA is descriptive, value based, and right at the beginning. • Images Match: Messaging and imaging are well matched, Time magazine.
27. Eureka Report – With Bonus Gift
Site*: EurekaReport.com.au Critiqued by: Carlos
Things I’d change or test
• Wait What: The product, Eureka Report, is overpowered by the incentive. Am I getting the Eureka Report or Time Magazine. Fix the hierarchy so it’s clear what the purpose of the page is. Try switching the positioning of the 10 reasons block and the form block. • Top X: As popular as Top 10s are smaller lists are punchier and more memorable. Try 5 or 7 that will give you a littler more space to play with too! • Incentive Placement: Test having the “Ends Midnight” next to the form in place of the clock. Remind them right as they are taking action why they are doing it now.
Design Showcase – Digital Telepathy
The remainder of the examples shown have been designed by our premium design partner, Digital Telepathy. First up is the page that showcases their IMPRESS landing page & banner design service and then a series of pages they’ve designed for Unbounce customers.
28. IMPRESS Landing Page Design
Site*: IMPRESS Critiqued by: Oli
What I Like
• Contemporary design: They mix beautiful modern design with modern navigational interaction. Instead of a microsite, the nav does a scroll further down the page to the next section. • Separated landing pages: Each section (or internal page) acts like it’s own landing page with a strong title, beautifully designed description of it’s purpose and a call to action. • Endorsements from big names: Famous names in the industry are used to provide evidence that they are capable of quality work.
28. IMPRESS Landing Page Design
Site*: IMPRESS Critiqued by: Oli
Things I’d change or test
• Hard to find the navigation: The navigation to take you to the next section is hidden on the left side of the page and can be easily missed – leaving the visitor not knowing to scroll down. I’d prefer to see a traditional top navigation that does the same smooth scroll effect to each section with a “back to top” link to reconnect to the header area.
29. SlideDeck Pro
Site*: Slidedeck.com Critiqued by: Oli
What I Like
• The title: Great at describing the demographic – designers. It’s clear if you are a designer, you’re in the right place. • Descriptive CTA: The button describes what you’ll get and how much it costs you. • Demo: They have a great modal demo of what a slidebar is to show you in context what you are buying – BIG plus points. • Features: The page breaks down the feature set really simply • Customers: An impressive set of customer logos completes the evidence that they are good at what they do.
29. SlideDeck Pro
Site*: Slidedeck.com Critiqued by: Oli
Things I’d change or test
• What’s a slider: The best slider, but is it a mini burger or a Javascript thingymajig? You decide? (if you clicked the demo button this is moot).
30. Retargeter
Site*: Retargeter.com Critiqued by: Oli
What I Like
• Headline highlghting: the black background with white text come over as a great exercise in contrast based design to highlight the headline and get the purpose of the page across quickly. • Choice of contact method: Not everyone is new school – especially larger companies. So phone numbers can be fast effective ways to get in contact with people. they combine the main CTa with the secondary phone CTA well in the header. • Good testimonials: Photos, names and links add credibility.
Things I’d change or test
• Pick your conversion goal: the main problem with this page is that there is a click-through CTA at the top and a form below. Which is the intended conversion goal? Chances are most will click the button at the top out of curiosity, but this isn’t a true reflection of conversion or real intent. I’d stick the form up top and remove the button – or vice versa – test, test, test.
31. PetAmberAlert – Literal Design
Site*: PetAmberAlert.com Critiqued by: Oli
What I Like
• Heartstrings! The title alone cuts you to the bone (pun intended). • Best CTA of the day: Find your pet now is such a strong call to action to anyone in this situation. Demographic gold. • Heartstrings #2: “There is a 77% chance that your pet will be seen by someone who received our Pet Amber Alert via:” – come one – convinced yet! This one is all about the copywriting. Awesome.
Things I’d change or test
What? How could I, What a great cause. Honestly though, it’s a good page with good trust factors (logos and testimonials) and a good explanation of what to expect (what’s your pet worth – the pricing table). • Bottom nav: Take away all the extra links – it’s poor form. That’s my gentle critique.
32. Monsoon – The Value of Association
Site*: Monsoonco.com Critiqued by: Oli
What I Like
• Modern tech: Speaks to a very specific modern technology sector (catches the HTML5 nerds is what I’m saying). • Why?: Strong section on the importance of the company’s technology. • Nice form container: the form is above the fold and contained nicely although it could use a little more contract and a visual cue to point out that this is what you want the customer to do.
32. Monsoon – The Value of Association
Site*: Monsoonco.com Critiqued by: Oli
Things I’d change or test
• Mobile Apps: The purpose *appears* to be to build mobile apps but it’s very buried in small text beneath the main imagery – much better to use large test to convey the message and *then* follow it up with “context of use” images where you see apps used on mobile devices. • Talk to us: Why? What is the benefit of talking to you about your project? Try adding a direct benefit beside the CTA that says “Talk to us about your next project, so that we can a,b,c the hell out of it…!” • Clients: Put the title above the images so it’s clear why they are there.
33. Dev Auditions – Chunking & Simple Steps
Site*: DevAuditions.com Critiqued by: Oli
What I Like
• Clear value proposition: It’s clearly about hiring better people – focused on dev. But the headline could be clearer (see below). • Walkthough: The 3-step process paints a simple picture of how the company operates. • Close with the benefits: I like the start, middle and end of this page. Like a good story it leads you through what you need to know, ending with what you’ll get and a closing CTA. +1.
Things I’d change or test
• Clearer headline: Hire Smarter is generic – if you’re looking at dev hires then make the dev logo bigger or change the main headline into something with greater clarity such as “Hire Smarter Dev Talent”. • Types of position: As it’s recruiting, I’d include some scope of the types of talent covered as development can be wide ranging. What are your areas of expertise, and geographical boundaries?
34. Smartr – Smartr Design for Smartr Phones
Critiqued by: Oli
What I Like
• Personal Color: Bold colors that also feel friendly because they are earthy. • Above the Fold: CTA, Video, and Interface presented above the fold–lovely. • Show & Tell: Clear visual instruction toward the 10 reasons means the visitor know where to go and what to expect.
34. Smartr – Smartr Design for Smartr Phones
Critiqued by: Oli
Things I’d change or test
• Matching: The screenshots have low connection to their text. You should test some other images for the features that may better illustrate the text. • 2nd Headline: The second headline loses focus. Is that the benefits or the comparison chart that is being called the best? • Close Strong: The final action doesn’t look clickable and forces a return to the top of the page. Just restate your CTA instead.
35. Keas – Fresh Design is Healthy
Site*: Keas.com Critiqued by: Oli
What I Like
• Image and Words: Light, easily understood background that matches the concept of health. • Give it Space: An open layout lets people scan. Scanning is very useful for getting to the action at the end of the page. • Happiness: The big testimonial is about happiness, which connects well with health, good job taking advantage of natural connections.
Things I’d change or test
• Emphasis: There are so many italics and bolds that it is hard to tell what is important. • Don’t Compete: There are competing CTAs. This page is asking people to Learn More, but one is free (a click) and the other has a cost (e-mail and phone number). If you must have a second action make sure they are cooperative.
Awesome Stat
People finally seem to be getting the message about being more explanatory and creative with their CTA copy (“No More Submit! No More Submit!” – feel free to chant along). From the selection of “lead gen” landing page examples shown, a whopping 73% are doing it right and describing what will happen when you push their buttons!
*wipes eye in moment of gushing pride* - Oli Gardner
5 Conversion Studies Your Competitors Don’t Want You to Know About
We all know that great web design and conversions go hand-inhand, but just what connects the two? What many marketers fail to understand is that your website is more of a “user experience” than a book cover: people interact with your site as they use it, so making it pretty is not your only concern. Fortunately, you can inform yourself by utilizing a variety of insightful eye-tracking studies that reveal how customers really view your website. Let’s get started with some of my favorites:
Use these 5 conversion studies to stay ahead of the competition. Science, FTW! (Image source)
1. Your Headlines Matter… A Lot
In one of my favorite design related studies of all time, Eyetrack III reveals just how important your headlines are in your design. The answer: Super important. In fact, your headlines are consistently the most viewed thing on your homepage, even before your images! Even more interesting is that your headlines need to capture someone’s attention is less than 1 second in order to be effective. That means getting to the point about what you’re offering is crucial. It also means that you need to make your headlines stand out and entice people to read and click. Because of this short time-frame, it’s best to put important and bold words at the very beginning. It’s one of the reasons that list posts do so well on blog: the number appears first, and it’s inviting to see a number. I recently did a post entitled The Marketer’s Guide to Cult Addiction, and the title was formatted to let people know the post was for marketers first, then follow up with a drastic word (“cult”) to keep them hooked. I like how my buddy Rafal Tomal did Copyblogger’s homepage, because you know exactly what sorts of products and services they offer, and that’s after only reading the headline.
Without a concise idea of what your company offers, you’ll lose a lot of potential customers. How well does your headline spell out what your business does for customers?
2. When Things Should Stand Out
Everybody appreciates a web design that “blends” well with the correct colors and subtle texturing, but should anything ever stand out in your web design? According to research that ultimately lead to the documented Von Restorff effect (named after the lead researcher), it should be your call-to action: those things that are “isolated” from others get noticed first. Derek Halpern does a great job of using this study to point out the silliness of asking “what’s the best color for conversions?” In a recent post, as this research shows us; The best color is the color that stands out from the rest of your design.
Over on Help Scout, we use a green button to promote our free 15-day trial versus our normally blue + white color scheme because it sticks out like a sore thumb… and we want it to. First, you need to take a look at what your baseline and accent colors are:
Next, you need to find a color that stands out among these colors. This will become your action color. If you’re sticking with a neutral white and green color scheme for the majority of your site, you could go with a large orange button for your call-to-action. You’ll notice that Mint does this, and you’ll see that it doesn’t have to look ugly!
Notice the two orange areas, one is a call to sign up and the other asks you to get started for free. Be sure to use your “action color” only for actions, don’t get it confused with other colors because you’ll leave your visitors confused.
3. Clean Up Your Act with Whitespace
Some great information from both Eyetrack III as well as Susan Weinschek’s book Neuro Web Design shows us how designers can clean up their act by implementing something that the eye loves: good ol’ fashioned whitespace. Both of these sources show us that website visitors are much more likely to be engaged (and finish reading) content that has the appropriate amount of whitespace and that looks easy to read. This is thus a key ingredient for creating a kick-ass landing page: You won’t be doing any converting if people aren’t reading your stuff. Rafal Tomal comes to the rescue again with these easily implemented images showing how you can improve your written content with a few simple changes:
The Importance of whitespace in spacing: Rafal shows us that it is important to spread out your copy with bold headlines and shorter paragraphs so people keep reading.
The importance of whitespace in written content: Rafal recommends increasing line spacing and indentation for copy.
You’ll notice huge sites like Smashing Mag and even NBC news have incorporated this font + whitespace styling into their written content. Don’t be afraid to utilize whitespace: You don’t have to have a minimalist design to incorporate a healthy amount of whitespace that promotes the reading of your well-crafted copy.
4. Getting Clever With Your Images
It’s a visual world these days, and there are a few ways that you can get mighty clever with your images, all by using a very simple design trick known as “line of sight”. This data comes to us via researcher Giovanni Galfano and his studies on how we react to the gaze of others. He discovered two very clear things about images… 1. We can’t resist following the gaze of another face, even if the face isn’t real 2. We are very susceptible to following arrows and other directional cues
This example from Chemistry.com may look familiar:
This is the quintessential example of line of sight in action. It also must be working, because they’ve been using it for quite some time now.
I also saw a noticeable boost in conversions when I implemented the line of sight technique over on Sparring Mind… even though it wasn’t a real face.
As I also mentioned, Galfano found that directional cues also have a major impact on where we look onpage (only slightly less effective than faces). I know a lot of designers who are averse to using things like arrows because they feel “too pushy”, but there is a way to implement them with class, such as how Rafal worked them in on Chris Brogan’s stunning redesign:
Subtle yet effective.
Are you implementing directional cues into your design? You should be.
5. Getting People Started
One thing that the Eyetrack III study noted was that the headline + intro paragraph was pivotal in deciding whether or not people would read the full piece (whatever is was, blog post, landing page, etc.). The problem then is this: How do you get people to approach your content without slacking on quality? I like Derek Halpern’s approach on the matter, with his opinion being: “The only job of your opening is to get people to read your opening… that’s it.” It’s true, getting people past the first couple of lines has been proven to be the biggest indicator in whether or not they’ll finish a piece of content. Thanks to awesome from Mary Dyson, we also finally have and answer on what to do: People read content faster on long lines, but prefer content on shorter lines… So, why not give ‘em both? Starting off blog posts or landing page copy with a short line length can help increase initial “stickyness” of your content, and then after they start reading, you can go back to a longer line length.
The easiest way to accomplish this is with an image aligned to the right:
This creates the shorter line length that we desire to see (as revealed by Mary’s research), but also returns to a more natural line length as the content progresses. Just complete your post introduction beside the image, and continue the rest of the post as usual. No reason to scare people away with a big “wall o’ text” now!
4;;8=6
MORE
1
6 TO
STEPS
P
roperly written e-commerce copy can make a HUGE di erence on your website. It’s not uncommon to see proper copywriting increase search tra c by 50% and conversion rates by 30%. Below, we’ve presented 6 steps to selling more through e-commerce copywriting. Courtesy of @smashingmag.
ce mer m o Ec riting w wi t h o c py
ay ni n o FORMATTING
A good e-commerce website should use combination of bullets and paragraphs. Bullets do a great job in highlighting key product details, and paragraphs add color and texture to your product descriptions.
79% of people scan pages instead of reading every word.
2
Use Crisp & Car COPYWRITING
Avoid long sentences. Long, wordy sentences are di cult to digest and aren’t good at persuading your audience to buy your product.
A barrel of la
ughs!! ay the golden egg!! L
Avoid clichés and jargon. Clarity should be your goal—not clever one-liners. Excessive use of clichés and jargon will only distract your readers. Leave out extraneous, flowery language that won’t help customers choose your product.
ABC. 123.
Speak simply. You’re not competing in a spelling bee—you’re selling your wares. Your writing should be easy to understand. Using an advanced vocabulary will only lead to confusion.
This product is the best product available.
Write in an active voice. Your sentences should lead with the noun that is doing the action. Active voice is clearer and makes it easier to persuade your visitors to buy your products.
3
v i C pywriing MISTAKES
Be sure to write good copy for product pages. The most common mistake is to have no copy on product pages. Without copy, you lose a vital mode of expressing your product and building trust. The lift in conversion rates and search tra c are always palpable.
Establish a consistent tone sitewide. Every page across your site should have the same general tone. This gives users a sense of comfort and safety.
Don’t exaggerate. Be honest when promoting your product. Failing to do so will cost your website authenticity and trust.
Don’t reinvent the wheel. Consumers have developed shopping habits from their collective experience across thousands of websites. Instead of being creative, stick with standard naming conventions for labels like “contact us,” “add to basket,” etc.
Localize your copy. Everyone has heard an example of an awkward translation. With cultural sensitivity in mind, try to localize your copy as much as possible—don’t use robotic translation. If localized copy is not possible, write copy that is compatible for everyone.
4
Esbish TRUST
Write impeccable copy. Grammar and spelling mistakes make you look careless and incompetent. If you won’t invest the time to produce reasonably clean copy, there’s a good chance that your visitors won’t invest their time and money in your business.
State the obvious. Don’t be afraid to hold your customer’s hand and guide them through your website—paying special attention to the checkout process. Be clear when explaining payment, shipping and return processes. If a customer is uncertain about any of these details they won’t buy your product.
A Forrester study showed that 20% of people had abandoned a purchase because shipping costs were unclear
5
G b v n by n THE BASICS
Keep product descriptions straightforward and informative. Product descriptions don’t have to be boring—they should be positive and inspiring. However, be careful about how aggressive your copy sounds. You want to draw readers in, but you don’t want to su ocate them.
Weave the informative in with the creative. Informative copy that’s engaging will keep visitors on your site and persuade them to buy your product. Strong product images which support the copy also help give potential customers a favorable impression.
6
uran h COMPETITION
Intertwine SEO into your website structure. Category, brand and product pages all should have unique text. Work with your copywriter to craft a message around each page. If you have a liates, provide them with alternative copy so that both you and your a liates can rank for di erent keyword combinations.
Need to know if your copy is working or not? We can help!
Let’s talk: +1 (888) 767-5477
PEOPLE PAY YOU. NOT PAGEVIEWS.
KISSmetrics is a powerful web analytics solution that helps you make smarter business decisions. Try KISSmetrics for FREE: kissmetrics.com/signup
Special thanks to @smashingmag and @cmcopywriters
