These 3 Design Changes Increased our Conversions by 53%
I’m the founder of Belacam.com, which is a new social media site where you earn more money as your content gets popular. With 40,000 users, we are always looking for ways to acquire more. This week, we made 3 major changes to our landing page that have resulted in 53% more user registrations.
These design changes are applicable to any website. If you run or create websites, I highly recommend applying these principles for immediate and positive results.
As I detail the steps we took, it’s also helpful to check out the landing page at Belacam.com, so you can experience the design changes for in a live setting.
Simplification
Simplification is a core value that we stress to every member of our company. We firmly believe that any feature or website can be made better by using fewer words, fewer moving parts, and more white space. As we work, we commonly apply what we call The Apple Test: “If Apple made this, how would it look?”
Our old landing page, seen below, did not live up to that standard. It lacked concrete anchor points and did a poor job of getting people to focus on the registration form at the bottom, which is where we want new users to go. If they don’t get to the registration form, we lose.
To simplify things down, we moved from a horizontal layout to a vertical split, as seen in the new landing page below.
This one change is a great example of simplification. On the new page, there are only two things to worry about: the left side and the right side. The signup form is instantly apparent and clearly the main focus. The more apparent our form is, the more conversions we can expect.
We also simplified the login form to a login button in the upper right-hand corner. When clicked, the login field pops down. This simplification allows for more whitespace and removes the conflict of having two forms on one page.
The final simplification is in the color scheme softening. The new background colors are as follow:
Left Side: #EEF2F6 (blue-gray)
Right Side: #FFFFFB (off-white)
Facebook and Twitter both use similar colors for their backgrounds, and there’s a reason for that. When deciding on colors for your site, take inspiration from others. Feel free to use ours listed above; we know they work well.
Incentivize
Instead of paying advertisers to promote Belacam, we would rather pass that money to our users. Everyone who joins Belacam gets $.25 just for signing up.
The new landing page puts that bonus at the forefront of the signup process. Leaving the page without registering means walking away from free money, and that’s tough for people to do.
Get creative with offering incentives to your site’s visitors. If you offer a free trial, highlight that on your registration form. Your incentive should be well communicated so leaving your site means leaving something good (and free) on the table.
Animation
The X-factor to our signup page, and what I think sets it apart from most others, is the animation we’ve added. The GIF below shows it well, but you should also try it out for yourself at Belacam.com.
The animation is a clever way to highlight the signup bonus and keep users interested in filling out the rest of the form. Depending on the length of your form, it’s not uncommon to see a 50% drop off rate in those who start your form and those who finish it.
By coding with Javascript or JQuery, you should be able to add some entertaining animations throughout your forms. Perhaps completed input fields turn green, or the final conversion button doesn’t activate until everything is filled out.
Whatever you do, remember that it’s all about reducing the boredom in filling out forms. Add some flair, and you reduce your drop-off rate. More conversions will follow.
