Designing for Personalization: the Story of Optimizely’s Homepage

Imagine a world of B2B high tech marketing where visitors to your website aren’t anonymous: you know their website, industry, where they’ve engaged with you in the past, and you can use that information to instantly transform a stock experience into one that’s tailor-made for them.

We recently took on the project of redesigning and personalizing the Optimizely homepage. The time had come to move from a single ‘average best’ experience to a best possible version tailored to unique visitors.

In this post, we’ll address three things:

1. Why we rolled the redesign and personalization initiatives into one ambitious project
2. How we defined the audiences we wanted to create experiences for as part of personalization (spoiler: there’s a lot of them)
3. What it means to shift from a conversion-focused homepage to one that facilitates both conversion and engagement

We’ll also show you what the homepage actually looks like for our different audiences.

In true Optimizely fashion, we’re testing the old page against the new one. In a follow-up post, we’ll show how the new page performs in this experiment. But for now, let’s get into what’s new:

Before and After

Meet our first step towards an improved homepage:

The old homepage (left) compared to the new, personalized homepage (right).

The old homepage (left) looks and functions like a lead form. There’s a single form field and call-to-action (CTA), and a few logos and benefits displayed below the fold, and nothing else linked. The new homepage (right) features a flexible hero with multiple CTAs, more customer validation, links to product marketing pages, and spots to surface relevant content and events to visitors.

Non-Personalized vs. Target Audiences

These personalized hero experiences below feature images, messaging, and content that are personalized based on which audience(s) the visitor is a part of.

A personalized experience for employees of travel companies.

A personalized experience for employees of Microsoft.

A personalized experience for employees of Adidas.

The Drawbacks of a One-Size-Fits-All Experience

Why We Redesigned the Homepage

Previously, our homepage was designed and extensively A/B tested to optimize lead conversion rates. Over many years, it became an extremely effective lead generation machine for our Marketing and Sales teams.

Previous Optimizely.com Homepage Flow

Although many visitors would create accounts, lots of them were unqualified, with incomplete lead data. This created problems further down the sales funnel, like issues with lead scoring and a low conversion rate to first conversations and sales opportunities. This meant our marketing spend on ads and other campaigns were driving visitors to become leads that weren’t good candidates to become paying customers. Like any business, we want to improve the quality of our leads in order to maximize the impact of our marketing spend.

Even for quality leads that came into our sales pipeline, many of them had converted so quickly that they had very little context on who we are, what problems we help solve, and what our products do. We needed to provide a better web experience that focused more on education and engagement, and that offered a variety of paths through the website before asking for visitors to convert.

Why We’re Personalizing the Homepage

Rather than treating all visitors to a single ‘average best’ experience when they come to Optimizely.com, we chose to make a deliberate departure and create a new design that could support personalized messaging, creative, and CTAs for audiences that we believe will drive the most impact for our business. We also knew we had to live up to the high expectations our customers and prospects (customer experience experts) have for creating and delivering personalized digital experiences.

Focusing on personalized experiences for well-defined audiences supports Optimizely’s shift towards an account-based marketing (ABM) strategy, a B2B approach to marketing that focuses on highly tailored experiences for target groups of accounts, and on generating far fewer leads of much higher quality within those target accounts and industries.

The audiences that we chose to focus on were formed using key firmographic, demographic and behavioral attributes. Many of them we are able to execute on using the Dynamic Customer Profiles built into Optimizely Personalization with our own customer and prospect data, and for others we partnered with Demandbase to further build out our data warehouse.

Some of the audiences we chose to focus on are:

• Named accounts: Current and prospective customers that are part of a target account list.
• Industries: Visitors from target verticals which have strong use cases for A/B testing and personalization.
• Geography: North American vs. European vs. APAC and so on.
• Customers: Visitors who are known Optimizely customers using a variety of current and legacy plans.
• Engaged visitors: Return visitors who have engaged with one or more of Optimizely’s digital properties in the past (blog, website, community, knowledge base, etc.).

For each of these audiences, we might choose to personalize messaging, imagery, customer validation, or relevant content and events. We may want to show them a compelling personalization use case, or their key contacts at Optimizely. Our previous homepage design didn’t support the range of personalization we wanted to tackle, so we iterated and user tested our way to a new design that would accommodate our new goals while fixing the issues we had before with our conversion-focused homepage. (More detail on exactly how we transitioned through this in our next post).

Testing the New Homepage Design

This is, importantly, a test. We’re making a change that may decrease our homepage lead conversion rate, but we hope to increase other metrics that we now feel are important for providing a great digital experience: engagement, clicks to engage with other pages of the website, and sales velocity of the leads we generate.

We’re currently testing the new homepage against the old one, to ensure that we’re directionally comfortable with our new engagement and conversion metrics, and that all of the new campaigns are performing as expected.

Once we’ve rolled out the new design to 100% of our traffic, it will become the new baseline that all of our future changes are tested against. We’re planning to start by testing CTA copy, headline copy, and a handful of other elements on the page.

Planning for Personalization

This page was designed entirely with personalization in mind. This is where the rubber really meets the road with the new design: in the versatility of the components of the page.

The flexible hero section, personalization modules, customer validation, and promotion cards are components that will let us tailor and personalize the experience based on the audience they belong to.

Here are a few examples of the homepage design, personalized for specific visitors.

Flexible Hero Section:

In this section, we can now swap out background imagery, update the headline with relevant messaging, and serve a more relevant primary and secondary CTA, depending on the visitor.

Audiences served:

• Customers
• Target accounts
• Industries

Modular Personalization Bar:

This section lets us surface a variety of targeted information and more subtle calls to action. It’s part content and messaging, part personalization demo for our visitors. If these were promotional modules on your website, what would you show your visitors?

Audiences served:

• Target accounts
• Engaged visitors
• Customers

Customer Validation:

To show visitors from key industries that we have successfully partnered with companies like them, we’re now able to showcase social proof in the form of customer logos and quotes from a visitor’s industry peers. We can also do this by geography, leveraging the name recognition of brands who are based in the same region as the visitor.

Audiences served:

• Industries
• Geographies

Content and Event Promotions:

These promotional spots can be updated to surface relevant content, events, and other engagement opportunities for our visitors based on what we know about them. Maybe we’re hosting an event nearby (we know their office is 10 miles away), have published content related to their industry, or have an upcoming user group a customer might benefit from.

Audiences served:

• Industries
• Geographies
• Customers
• Engaged visitors

What’s Next?

As we mentioned, we’re currently running the new homepage as a test against the old to monitor the following metrics:

• Engagement metrics (time on page, clicks)
• Lead conversion rate
• Accounts created
• Lead qualification rate

Stay tuned for a post on those findings as soon as they’ve reached statistical significance. We’ll also be testing some of the new functionality we’ve added, so we can understand how our visitors are interacting with the new elements and continue to refine them. We’ll also continue to build out our audiences, to understand which personalized information is most compelling to our visitors when they first see it.

Curious how we pulled this project off? In the future, we’re hoping to share:

• Turning data into action: How we executed on a personalized homepage
• Top to bottom: Organizational readiness for personalization
• Results: What was the business impact of a personalized homepage?