Background

The project began with a request from our Director of Demand Generation, Sam, who noticed that our paid landing page conversion was lower than expected.

I am trying to improve our paid traffic conversion rates. I want three landing page templates that I can clone in Contentful and swap out copy/images and customize for certain campaigns or ad groups. I'd rather us design something outside of Contentful and then custom build a template that matches that design.

These landing pages all will have a different design and CTA above the fold. One will promote a contact sales form, one will promote a freemium plan form, and the final one will promote a demo video (that has email collection enabled).

These landing pages will all have the same sections and elements below the fold though. These sections are:
- Banner w/ customer logos
- A features section with three call outs
- Integrations call out section
- Pricing modals
- Review Badges
- Testimonial carousel

My thoughts after reading this:

• “Improve our paid traffic conversion rates.” Success metric, got it.

• “Three landing page templates that I can clone in Contentful and swap out copy/images and customize for certain campaigns or ad groups.” Okay, he wants to iterate on content quickly. Why three?

• “I'd rather us design something outside of Contentful.” Hmm. Why doesn’t he want to use our existing components?

• “…contact sales form, freemium plan form, and a demo video.” Ah, there are the three strategies, three CTAs.

• “…same sections and elements below the fold.” How did he decide on these elements? They’re pretty similar to what we already have – what does he think is lacking? Why should they all be the same?

Defining the problem

With this context from Sam, I got to digging:

1. Comparing conversion data between all of our running pages. Were there any patterns between high or low performing pages?

2. Best practices. Were there any obvious best practices missing from our current pages?

3. Scroll and interaction data. How are current visitors interacting with these pages?

4. Conversations. What did Demand Gen. think was going on with these pages?

Conversion data

Some of the top performers weren’t even conversion-focused landing pages – just engaging product pages on our website. What could we accomplish if we took those elements and applied some conversion principles to them?

Best practices

Some of our pages didn’t keep CTAs above the fold, and some took the user to another page where the form lived, rather than bringing the form onto the landing page.

Scroll and interaction data

I saw lots of scrolling up and down on the pages with bigger visual sections. On pages with less visual value props, people scrolled quickly right by to the bottom then back up, presumably not finding what they’re hoping to skim for.

Conversations

Some things that I heard from Sam were, “I wish these pages looked more like the home page,” “I don’t think it’s clear where to look,” and “I want to use the design of our testimonials on the pricing page.” Reading between the lines, it was clear he shared a hypothesis I was forming: the visual styles of these pages and the visual representations of the products could more effectively tell a fast story.

Two examples of existing pages:

Hypotheses

Using the context and data, I collaborated with the Director of Demand Generation to craft a list of hypotheses.

Visual:

1. Updating the page elements (especially headers) to include more Wistia brand elements and have a stronger hierarchy would be more engaging, leading to increased conversions.

2. More visual representations of our product and functionality will be more engaging and communicate value more quickly.

Functional:

1. Placing brand logos above the fold will increase conversion by creating instant trust without requiring the visitor to dig any deeper than page load.

2. A sticky navigation that aligns with the primary CTA of the page, and links within the page or to a modal rather than to an external page, will increase conversions by keeping the visitor within the page.

3. Giving a preview of our paid plans will give visitors the information they need to make a decision.

Iteration

Using our hypotheses from discovery, which aligned with Demand Gen.’s initial list of elements, I created a few page variations for the different desired offers. I presented my directions and thinking in a review meeting with all stakeholders, where everyone could ask questions, give feedback, and discuss. The Figma file was also shared so that comments could be left asynchronously.

There was some light feedback, but most of it was instance-level implementation that didn’t impact the components directly, but informed the amount of flexibility I needed to support.

Data Modeling

At this point, Sam and I revisited and discussed which insights we’d want to iterate for, and therefore what properties needed to be available in the CMS, and which could be baked into the components. It was a balance of opening our options without over-complicating the build or increasing development scope.

Refinement

After refining the variations each component would need to support, I refined the designs into a set of new components (and molecules of components) below.

Hero with CTA and video (also supports a still image), plus “mini” social proof banner:

Hero with video and form, plus larger, but below the fold, social proof banner:

Pricing band:

Testimonial band, with stars that can be replaced with company logos, optional links with card hover states, and colors that can be customized:

Content sections with more real estate for imagery:

A sticky navigation bar that brings the primary and/or secondary CTA along with the user on scroll:

A birds eye view of all components in Figma:

Creating & grooming tasks for development

As the original task was getting a bit unwieldy, I created a project to encompass the development work, and the content creation for the first round of pages we planned to build in our CMS and A/B test.

Next steps

At the time of my departure from Wistia, these components were currently being built. Next, the team will use the components to build new pages in our CMS to test against a set of 6 existing pages. The new pages will have new copy, videos, and design – rather than isolating variables, we are confident that this is a strong step forward, and are merely checking to make sure we don’t tank conversions by accident. Should that happen, we’ll isolate variables to diagnose. Otherwise, we will have our new baseline, and will continue tweaking the levers enabled by the component content models to gain further insights.