Objective

Design and implement marketing landing page templates for IBM marketers to quickly and easily create pages for IBM customers.

Overview

Our primary mission as the Page templates team at IBM was to create a system of scalable templates, coupled with template guidance documentation, in order to create a sense of unity and consistency on ibm.com. We designed the templates with the goals of our two types of users in mind. The first were the IBM digital marketers, who would use our templates in order to quickly create pages for their marketing campaigns without needing extra design resources. The second is the actual end users of those pages who come to ibm.com to learn more about how IBM products and solutions could solve their business needs. In the creation of these templates, it was always important to keep in mind the form and function of the templates in relation to these two types of users. In order to ensure the end product would satisfy the dual purposes of our templates, we constantly had to strike a balance between what IBM marketers wanted, as well as what the end user wanted.

The most recent page template that our team tackled was the Marketing Landing Page (MLP) template. Industry-wide, marketing landing pages are defined as "a standalone web page distinct from your main website that has been designed for a single focused objective”. [Source: Unbounce]

My role

I was responsible for the UX design and user research. I created user journey maps, personas, and wireframes for the marketing landing page templates. Once we had developed visual designs and a working HTML and CSS prototype, we worked with two teams to push our pages live. Once the page was live, I managed the AB tests and usability tests of the page templates. I then took the user feedback and communicated it out to the larger team in order to prioritize updates to our next iteration.

Our approach

Our team, which was comprised of a visual designer, developer, content strategist, scrum master, and product owner, had an initial kickoff with stakeholders to begin work on our project and get an understanding of the current landscape of marketing landing pages at IBM. We did research on industry best practices and guidance on marketing landing pages’ purpose, intent and execution. Our team was tasked with creating templates for these marketing landing pages that would enable a cohesive experience for the user, from the point of a user’s inquiry, to arriving at a marketing landing page, and finally to a destination within ibm.com. Based on this understanding, as well as knowing that our template would need to accommodate a wide range of user needs and content types, we decided to create two different types of marketing landing page templates; an offer-based template whose primary objective would be to drive engagement through a single or multiple actionable offers; and a reference template whose primary objective would be to help guide users by answering their questions with succinct, easily digestible information with the option to explore related IBM destinations.

Audits

To begin our process, we first conducted a current and competitive state audit of best practices of marketing landing page implementations both within IBM and in the industry as a whole. We evaluated them on the following metrics: paid keyword data, metadata, page content, UX, and visual design. We also conducted a competitive state audit of marketing landing pages outside of IBM and evaluated them on the following metrics: paid keyword data, metadata, page content, UX, and visual design. We used the audit findings to inform our next phase of the work, which was to understand the users arriving at marketing landing pages. We conducted an audit of existing personas at IBM, and honed in on the key points about each persona that would help inform our design. We selected a large number of personas, from which to narrow down in order to inform our design:

User journey and mapping

From the list of five personas we initially reviewed, we narrowed it down to who we thought would be the primary user. We did this by first understanding what stage a user would most likely be in if they arrived at a marketing landing page. Because marketing landing pages are often search capture pages, users were most likely arriving at marketing landing pages to learn more about a product that they might not know about at all, or that they might be somewhat familiar with but not enough to make any purchasing decisions. So we selected a persona that would be someone who would most likely conduct their own research to find a product to fit their business needs by beginning their search on Google. We selected a developer from a medium sized to large company who was self-motivated and curious enough to research solutions on his own. Once finding a solution that he liked enough, he would be the primary proponent of integrating the product into their business.

Once we decided on a persona, I created a user journey map that illustrated how the two users of our template would interact with our marketing landing page template, with the two users of our template being the IBM marketers who would create marketing landing pages from our template, and the end user, Nick, who would come to the marketing landing page on ibm.com to learn more about a specific product, or offer, or campaign.

Design

Brainstorming

Once the personas and user journey were fleshed out and communicated to the broader team, we began work on brainstorming as a team what type of content Nick would expect to see on a marketing landing page to help him make a decision.

Templating documentation

We then prioritized and selected the primary modules for our two templates and created a schema to help understand the overall structure of our template. This diagram was the output of our module brainstorming and prioritizing, identifying content module types, their purposes, why a user would want to read it, and where it should be placed on the page.

Wireframes

We then started to create wireframes using the module schema. I created the following wireframes in Omnigraffle for the offer template. In order to ensure the template could be flexible, I created wireframes for the maximum amount of modules, as well as wireframes for a minimum amount of modules, focusing on four different types of offers: contact, read a case study, watch a demo, and sign up.

Visual design

We then created visual designs for each of our templates. We worked with two teams to adopt our templates. We worked first with the API Economy team to work with our reference template because their scheduled release of their page would occur before the other teams page. I worked closely with their development team to initiate an AB testing plan in order for our page to go live alongside their page. I set up the AB test to split the traffic 50/50 once arriving at the API Economy team’s page. We would use the data that came from the AB test to help inform the design. We also conducted usability tests in order to get users reaction on both pages.

Wireframe for reference template

We also created wireframes for the reference template.

Visual design for reference template

We then created visual designs for the reference template.

Outcome

As we collected results from the AB test, I learned a valuable lesson that the amount of traffic on the API Economy team’s website, and therefore, marketing landing page was too low to get significant results. We did monitor data, nonetheless, and found that we received 30% more clicks on our actionable content. Our template and module system was adopted in our content management system for other teams to use them, which they are still using today.