Jesse Rogers

Adaptiva Landing Pages

Improving on an existing design to create a better experience and improve lead generation

The vast majority of high value leads come through web forms for Adaptiva. As the creative director in marketing, it's my job to make sure that our users have the quickest, easiest, and most pleasant experience converting into a qualified lead.

In Q4 of 2016, I launched a redesign for Adaptiva's overall landing page template.

The Goal

Input and vision from executive management was minimal, but the goal was clear: get more users who visit the page to fill out the form.

The Issues

Conversion rates were good, but they could have been better. Some users were going to a landing page to presumably fill out the form, but ended up leaving before converting.

The old landing page template was very image heavy and detracted user attention away from the form. The centered text layout also made it difficult to fit multiple lines of copy on the page while maintaining good readability.

Since the old template included a large image, users and stakeholders grew tired of seeing the same image, so several duplicates with different images were made. A lot of the CSS is written directly in the head element, so changes across the board needed to be done to several duplicate templates.

 

The Solution

I mean, the old template is actually pretty cool. At least it is when there isn't so much text, as is the case in the example above. But of course, as we designers know, there's always too much text, and the old design simply didn't make room for it without pushing the form down and allowing the image to overpower the call to action.

The new design set the form aside in a section of its own.

The image was eliminated entirely, allowing for a consistent, uniform style that didn't feel like we were too lazy to switch up the photography.

The form being below an understated, stylish gradient banner and title leaves room on the other side for the text, and plenty of it. And it doesn't look particularly empty without a ton of copy either.

The new landing page is coded smarter, too.

Unlike last time, which was essentially copied and pasted from a JSFiddle, I actually embedded linked stylesheets and javascript files to automate the task of making changes to multiple landing pages.

New micro-interactions, animations, and state changes delight the user and drive them further down the page toward the "submit" button.

Overall, there's much less bloat in the stylesheet and the HTML structure is more well-written. Browser support is better as well.

 
 

These landing pages are currently being used only for Adaptiva OneSite and Adaptiva Client Health related initiatives, so the page comes in two color palettes to reflect the product.

Mobile

Of course we gotta talk about mobile. The new page layout looks great on mobile.

The mobile experience really puts the Adaptiva brand and the call to action front and center, which is all we really want the user to focus on.

landing-page-mobile.png
 

The Results

In the month following the implementation of the new landing page template, submission rates have been up from the old template.

In the month after implementation, submission rates are up over 10% for pages using the new design.

We'll continue to iterate on this design as new ideas and best practices come to light in 2017. We may add sections below the form to allow for customer quotes, customer logos, and other means to solidify the user's decision to finish converting.