BannerBear Landing Page Teardown

A UI and UX teardown to showcase all the design hacks behind BannerBear landing page and how they boost their conversions.

Written by Jim Raptis

August 3, 2021

BannerBear Landing Page Teardown

Bannerbear reached $16k MRR in a year with brilliant product development and marketing hacks by its founder Jon.

In this article, I want showcase some UI tricks on Bannerbear landing page that boost conversions & product adoption.

Let's go!

Read Short Twitter Thread Instead

Hero Section

https://gallery.eocampaign1.com/8f83198a-b6e3-11eb-a3d0-06b4694bee2a%2F1621849418061-bannerbear-hero.jpg

The Bannerbear's hero section communicates its real value perfectly, both with their copies and visuals.

1. Headline

Brief explanation of the core Bannerbear value "Scale Marketing" while it refers to their niche "Marketing Automation".

2. Subtitle

It gets specific. It introduce the product and explain how it creates the value in their title: "Auto-generate visuals with their API"

3. Visuals

The Bannerbear visuals show perfectly what's the product about. Use a simple API call to generate beautiful marketing visuals.

4. CTA

The CTA is simple yet effective. "Get Started For Free" prompts people to try the product without any hesitation.

The 3 points below the button remove any possible objection. Free trial. No CC. Cancel Anytime.

πŸ‘ Done Right:Β Choose visuals that demonstrate your product's value over pure screenshots.

πŸ‘Ž Needs Improvement: Use social proof. Always include testimonials from respected people in your niche above the fold (if you have any of course).

Feature Section

https://gallery.eocampaign1.com/8f83198a-b6e3-11eb-a3d0-06b4694bee2a%2F1621850601290-bannerbear-feature-section.jpg

Bannerbear follows an interesting practice for their feature sections. Each feature section highlights a specific use case for the product.

In that way, it hooks different personas into their product.

For example: This section showcases the Zapier integration & prompts people familiar with Zapier to take a closer look at this use case with the CTA.

  • Screenshot from Zapier makes users feel familiar
  • CTA redirect them to a separate page, dedicated to the Bannerbear-Zapier integration

πŸ‘ Done Right: Promote use cases over plain features!

πŸ‘Ž Needs Improvement: Use social proof again. Also, use logos that user can visual identify instantly (eg. the Zapier logo in this case)

Pricing Section

https://gallery.eocampaign1.com/8f83198a-b6e3-11eb-a3d0-06b4694bee2a%2F1621851163652-bannerbear-pricing.jpg

The Bannerbear pricing model played an important role in the rapid revenue growth in the last 12 months.

  1. Create 3 plans (one for each of your customer persona) and charge them accordingly
  2. Make the center plan prominent to highlight it and lead people there with the "Most Popular" tag & the CTA color
  3. Leverage "Price Anchoring" to make the popular plan look like a bargain (compared to the Enterprise plan).
  4. Use tables to visually distinguish plan benefits

πŸ‘ Done Right: Use multiple tiers to boost revenue.

πŸ‘Ž Needs Improvement: Compare your pricing with the "traditional alternative". For example: "Save over $10000 in designer fees with a simple $99/month subscription"

https://gallery.eocampaign1.com/8f83198a-b6e3-11eb-a3d0-06b4694bee2a%2F1621852551125-bannerbear-footer.jpg

Most people neglect their footer section. But that's a costly mistake!

Your footer can be your secret SEO weapon.

Use your popular articles, use case and feature pages to redirect users into your website. In that way, you increase the time spend on your website which is a benefit for you SEO game.

Also, it's a great place to collect your most useful links and help people make their way in your website.

πŸ‘ Done Right:Β Use article & page links on your footers.

πŸ‘Ž Needs Improvement: Don't overdo it! Too many links might confuse and/or distract people from their flow.


That's all for today folks!

If you love these tips, you can follow me on Twitter where I post similar UI/UX tips almost daily!

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract

  • Logo

    Learn to design better User Interfaces with practical UI & UX tips

  • Projects

    MagicPattern

    BrandBird

    PH Launch Checklist

  • Popular Posts

    15 Practical UI Form Tips

Β©2021 . Made by Jim Raptis