Jeff AndersenProduct Marketing Manager

Behind the fold: the making of the new Manifold landing page

Behind the fold: the making of the new Manifold landing page

There is a never-ending quest for product landing pages to speed up load times, deliver better messaging, and boost conversion. It’s something we take seriously here at Manifold.

We have constantly iterated on our landing page over time. Each iteration taking a slightly new approach to attempt to establish the perfect intersection of performance and education.

Let’s take a look at our process.

Deep-dive on the history of www

I was recently tasked with guiding the delivery of an updated landing page for Manifold. I wanted to understand where we’ve been with our page so that we could make good decisions for the future and not repeat any past mistakes. This meant doing a deep-dive on the history of our website.

Due to the fact that we deploy our homepage with Netlify, we were able to access the Deploy Preview for every major release we had done with our site without lifting a finger. It allowed us to preview the experience dating all the way back to a year ago, by simply changing the URL.

Starting off we did a qualitative analysis of each page’s strategy. What was the structure of the page? What did we have for interactive elements? What was our core messaging? This gave us an idea for where we stood as a company at different periods of our lifecycle.

Once we understood what the experience felt like, it was now time to get serious and correlate that with hard data. Quantitative analysis of the page including load time, optimization, and business goal performance (conversion, which elements garnered the most attention).

Over time our page had steadily become slower and slower, and our primary device audience was optimized poorly (with a desktop score of only 72/100).

A look at three previous iterations of the Manifold landing pageA look at three previous iterations of the Manifold landing page

What shape should the page take?

Using insights from our deep dive on the past versions of our landing page we were able to establish a new direction for the landing page that incorporated older successful strategies, as well as new ones.

We wanted to achieve three main goals:

  1. Prominently feature our service providers

  2. Provide a simple representation of our workflow

  3. Living content

One new thing we wanted to incorporate was more interactivity on the page. We decided that this should be a video that would be featured prominently in the hero and cover more of the higher level vision for the product. We worked with an amazing animator to develop this explainer video:

Embedded content: https://www.youtube.com/watch?v=Cy9G0jHBF8Y

Next was developing the content structure for the page.

We recently ran a product test under a separate brand, which used a very simple three-step process to explain its value proposition. It performed well, and we received great feedback on it.

Drawing on this experimental landing page, we established the three primary steps to employing Manifold which would lead into a visualization of the development and deployment workflow:

  1. Define your app

  2. Assemble your stack

  3. Integrate Manifold

Wire-framed and user tested

Now that we had white-boarded what we wanted to convey with the page, we worked with our wonderful designers to wireframe our ideas.

Once we had something that resembled a landing page we went right into user testing. The new structure for our landing page afforded us the ability to easily make isolated changes to the page in a particular section without doing wholesale modifications (as we had done in the past).

During user testing, we wanted to understand section by section what users understood. Each was asked to describe what they understood after reviewing a step in the workflow.

After reviewing hours of video, we found common themes and addressed them in the wireframes. New tests were executed with a focus on the problem areas and it was confirmed that our changes had indeed improved comprehension.

Iterate and repeat.

We didn’t just strive to validate our messaging and boost comprehension: we needed the page to be more performant.

A major part of this was changing our landing page’s framework. We actually improved performance 7.5x by switching to Next.js, but you can read about that here. These changes resulted in our desktop optimization score rising to 94/100.

What did we deliver?

The page begins with an amazing solar system animation. It’s eye-catching and begins our theme of putting service providers first.

The page transitions to discovery of services. We are able to showcase new and interesting services available on the platform.

☑️ Prominently feature our service providers

Next we present the Manifold workflow. Using two mock interfaces we’re able to convey an lot of information, in a simple manner. The graphics showcase how Manifold integrates with your team and deployment pipeline.

☑️ Provide a simple representation of our workflow

We now have a Community section. This section gives us a place to share events we are sponsoring or speaking at, fresh content from our blog, and new services coming soon.

☑️ Living content

Three goals. Three checkmarks. And here’s the result

StratusUpdate

Sign up for the Stratus Update newsletter

With our monthly newsletter, we’ll keep you up to date with a curated selection of the latest cloud services, projects and best practices.
Click here to read the latest issue.