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 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.
The Bannerbear's hero section communicates its real value perfectly, both with their copies and visuals.
Brief explanation of the core Bannerbear value "Scale Marketing" while it refers to their niche "Marketing Automation".
It gets specific. It introduce the product and explain how it creates the value in their title: "Auto-generate visuals with their API"
The Bannerbear visuals show perfectly what's the product about. Use a simple API call to generate beautiful marketing visuals.
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).
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.
👍 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)
The Bannerbear pricing model played an important role in the rapid revenue growth in the last 12 months.
👍 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"
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!
Get notified about new tips & articles before anyone else!
I love these little tips. It’s like Dribbble but actually useful.
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.
Head of Marketing at Abstract