Creating a Lead-Gen Landing Page – UX Case Study
About the project
The marketing team drives a lot of traffic, some that is very expensive, to various product pages of the website. The goal with those pages is to provide all the necessary information to the visitor and guide them towards previewing a video and ultimately buying it. While the team has been somewhat successful at that, there was always a notion that we can do better, due to the look/feel and overall experience of the product page.
Given how important the product pages are and how much money was spent driving traffic, the team asked me to analyze the current product pages and look for opportunities to increase user interaction and experience. Together with the VP of Marketing, I worked on gathering data that will give us a baseline on the state of these product pages and their performance. Based on the findings, I presented tangible solutions with wireframes, prototypes and a final design.
I started looking at some of the high traffic product page and analyze their results in more detail – looking at the time on page, bounce rate, exit rate and overall conversion rate. I also wanted to see what visitors do when they get to the page. Installing a screen recording tool allowed me to see if they are reading the content; which parts are they looking at and how they navigate the page.
What is the problem
These are some of the problems that we identified looking at the analytics and screen capture data
- Visitors don’t spend a lot of time on the site and only skim through the content
- A lot of visitors are checking the price and looking at the order widget before even previewing the film
- Visitors don’t complete the registration form or verification process.
Problem 1 – Short Time on Page
In Google Analytics, I can look at individual pages and see how much time visitors spend there. In general, content heavy pages should have a higher time on site number, unless that content is not relevant, or the content isn’t very appealing.
Taking into account that the marketing team is driving traffic from very targeted sources, we can assume that the content is very relevant to the audience. While I was observing the session recordings, I noticed that most people are skimming through the content heavy page. The quick and jerky movement of the screen and mouse leads me to believe that they are only reading the subject lines and anything that might stick out.
The product page was very content heavy and due to the page template, the content itself was formatted in a way that made it difficult to read, so we decided to rewrite some of the existing content and remove large chunks of it in order to improve readability. Furthermore, we add bullet points and broke up the content into various sections.
I also worked on designing the template and formatting the content, so that it would be easier on the eye with a lot of white space and softer colors.
Many of the important points were lost in the vast amount of content, so I decided to extract those and turned them into product features – along with small icons for each of those.
Problem 2 – Price Conscious Visitors
Looking at the session recording tool, I noticed that many of our visitors check the price of the product while on the page – maybe it’s because of the prominent location or maybe due to the various pricing options that we have available.
In either case, the price and the pricing options seem to overshadow the content itself. Instead of reading the details/features and watching the full preview, a lot of our visitors abandon the page once they see the premium price.
If you were to visit a car dealership looking for a new car, the dealer would most likely point you to a car that suites your preferences. They would ask you to sit in it, to play around with some of the features and to take it for a spin. Only after you’ve really experienced the car will they want to talk about the price. For our particular case, we decided that showcasing the video preview and details at the top of the page (above the fold) will direct visitors to consume that information before they move on to seeing the price, which was moved all the way to the bottom of the product page.
Problem 3 – Registration Abandonment
We’ve already redesigned the product page registration form and have seen great results from that redesign, but there are some factors that we were not able to change – such as creating a multi-step form.
For us to have complete control of the registration process, we needed a more flexible platform that we can build and test various types of forms.
Once we selected a new platform (Instapage), I created various forms with different form fields combinations to test with. I also made it easier to complete the form by requiring less information from visitors and not requiring them to enter a password or verifying their email.
By conducting numerous A/B tests, I was able to identify the registration form type and location that gave us the best overall user experience and conversion rate.
Test #1 – Standard Form vs Multi-Step Form
A multi-step form is a long form that is broken into multiple pieces. The aim there is to have a form that is less intimidating and daunting to visitors . My effort to create a positive user experience by only showing 4 fields at a time would make it appear more organized and less overwhelming. These are the forms that I used in the A/B test:
The notion that adding steps to a form to improve conversion might be counter-intuitive, but the results clearly illustrate how the perception of a shorter form has a profound impact on the completion rate. The experiment demonstrates that the multi-step (2-step) form clearly outperformed the standard form, 7.42% vs 4.55%.
Test #2 – New Page vs Lightbox
Once I figured out that a multi-step form converts between than a standard form, I set out to see if a multi-step form would perform between using a lightbox (interstitial) or a new page. Again, I was going into this with not just the idea of improving the user experience, but also to increase the conversion rate.
Below are the screenshots of the two forms – the left being the form within a lightbox, while the one on the right is on a new page.
While this test didn’t produce the gains we saw in test #1, the results were still significant enough for us to determine that a new page sign up strategy was worth pursuing and implanting on other properties. The new page had a conversion rate of 11.27%, while the lightbox received 9.85. This may not be significant enough for some individuals, but this would give us around 14 more conversions per 1000 visits.
Having a platform that will allow you to make rapid changes to design, copy, forms and CTAs (call to actions) can have a profound impact on the overall user experience, but also on the business goals. A/B and multi-variate testing allows marketers, but also UX designers, to identify the visuals and placements that enhance the experience of the user by conducting experiments with live traffic. In our case, it helped us identify trends and user behavior that we can later apply to our actual website.
Old product page design
New landing page design