Splitbee is an all-in-one analytics and conversions platform with a clear emphasis on exceptional user experience (UX). Also, it's made by two inspiring indie hackers (and brothers) Timo and Tobias Lins.

In this issue, I will showcase their best UI and UX tricks throughout the Splitbee landing page that boost conversions & product adoption.

Let's go!

🐦 Read Short Twitter Thread Instead

Hero Section

A close look at Spitbee's header section:

1. Headline/Subtitle

The messaging is kinda generic but it gives us a hint on what Splitbee does. It's an analytics & conversions platform.

2. CTA

The copy focuses on the value and is actionable "Add to Your Website".

Also, the "No Credit Card required" hint below the button removes any possible objections for the visitor.

3. Visuals

It's the most important element on the landing page. It helps us instantly understand the product's value and its core differentiation: Design.

Also, the mobile mockups hint at mobile responsiveness, which is uncommon for most analytics software.

4. Product Demo

It's critical to allow the users experience the product in a live demo. There is no better way to persuade people about your product value.

Moreover, the vertical layout prompts visitors to scroll further and not focus on the hero section. This is a good practice if you want to show all the extra benefits of your product.

👍 Done Right: Simple language and catchy product screenshots are a strong combination. Especially if your own product is your biggest strength.

👎 Needs Improvement: The absence of social proof. Social Proof is important and testimonials are a great way to allow other users to praise your product.

Personalize User Experience

Splitbee personalizes your experience by customizing their visuals with your country's flag and information about your active session.

It's a genius way to show you that their product works and make you say WOW.

They create a memorable experience for their visitors which is possible to lead to many social media shares.

👍 Done Right: Perfect hack for a live demo.

👎 Needs Improvement: It's the perfect place to add a CTA since the user is very likely to take the next step (signup) due to this pleasant surprise. But the closest CTA is more than two screenfulls away. It's a great application for Fitts's law:

"The time to acquire a target is a function of the distance to and size of the target."

Read about Fitts's law

Social Proof

Social proof is the best way to build trust around your brand, according to the Halo Effect:

"We think anything that experts use is great because they are probably more knowledgeable than us in their area of specialization."

Bonus points for quotes by industry experts like Guillermo Rauch, the founder of Vercel!

👍 Done Right: Highlight key phrases within customer testimonials.

👎 Needs Improvement: Nope...

Pricing Section

The Splitbee pricing page applies two great techniques:

1. Icons to visually distinguish different tier
2. A slider that allows users to calculate their potential monthly fee within a usage-based pricing model

In the meanwhile, the visuals keep on being unique and in line with Splitbee's branding.

👍 Done Right: The visual importance of the paid tier

👎 Needs Improvement: Testimonials (or even better case studies) can back up your pricing nicely.

CTA Section

The CTA section is the last chance to convert your visitor so you need to amaze them.

Splitbee does this with an exceptional visual.

The visual is in line with the rest of the landing page and makes the experience even more memorable.

👍 Done Right: Never forget to add a CTA section at the bottom of your landing page with a clear CTA.

👎 Needs Improvement: Normally, prefer to add a product screenshot over a generic image to remind your value to your visitor. Although in this case the graphic is 👌 and grabs the user's attention.

---

That's all for now folks!

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