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

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

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

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"

Footer Section

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!