Objective

Design and launch a new content marketing thought leadership site in 6 weeks for C-suite marketers

Overview

The Marketing and Digital Business teams at IBM partnered together to create a new thought leadership website that would be a single destination designed and curated by and for marketers featuring articles, videos, white papers, ebooks and blog posts. The content would come from a variety of sources including industry experts both inside and outside of IBM, influencers, customers, partners and consultants. The goal was to attract and retain the target audience of marketing leaders throughout the world who were looking for the latest trends, insights and customer solutions for marketing professionals. The goal of the site was to eventually lead these marketing leaders to deeper learning within ibm.com such as to IBM case studies and solutions that fit their business needs. The ultimate goal was conversion, either through registering for an IBM account and/or subscribing to our newsletter. Further down the funnel, we also wanted users to ultimately convert, by trying or buying a product.

My role

My team consisted of a product owner, scrum master, four developers, two visual designers, a UX strategist and a UX researcher and myself as UX designer. As the UX designer, I created flows and wireframes as well as occasionally conducted user research to get as much information as possible on our prospective users.

Background research

Competitive analysis

As this was an entirely new site to IBM, I conducted a competitive analysis to understand how competitors were creating and disseminating engaging marketing content to their users. I compared competitors sites along the following metrics: overall site, content, navigation, design, and social media aspects.

I then recommended new types of content to be featured on the new marketing site: articles/blogs, events, case studies, white papers, videos, podcasts, thought leadership articles, customer testimonials, as well as other links to deeper learning within ibm.com. I recommended to feature content that did not push the IBM sales pitch too hard as we were targeting users who were more interested in high level industry trends, rather than brand-centric solutions.

Design

User flows

I then created user flows to demonstrate the primary paths a user would take from our marketing site on to other areas within ibm.com to eventually convert in order to communicate to our team and stakeholders what the high level vision of our site was to be.

Initial brainstorming

The primary mission from our stakeholders was to make this site look and feel modern to marketers. So the two visual designers and I conducted several whiteboarding and sketching sessions in order to brainstorm a large number of different designs. We began to realize that image and content-rich layouts would lend itself best to this sort of user. As we wanted to highlight industry leaders or famous authors writing content, we decided to feature the author's name and date prominently. We also wanted to be able to show a curated list of content as well as show a list of articles sorted by recently published.

Research

While we were exploring ways of pushing boundaries on our design system, our user researcher conducted a few short interviews with our sponsor marketing users. We found that marketers wanted to learn about the latest trends, news and insights that would help them in their jobs and that they liked in-depth content like how-tos and case studies. We also learned that these marketers didn't like teasers that led nowhere. While our stakeholders wanted a visually striking news hub to be a primary source for marketers to read about latest news and trends as well as to get users to register for an IBM account or to try or buy a product.

Design

Wireframes

Based on this understanding, I created wireframes for the home page. We also started brainstorming layouts for the article posts. We wanted to feature the content front and center, as this was the main reason a user would click on one of our tiles. But we also wanted to allow them to discover different content like related articles to the article they were on, as well as to learn more about some IBM solutions via the tile on the right.

Visual design

After receiving approval for the wireframes, the visual designers then created visual designs for the two pages based on the wireframes.

Content strategy

We then worked with a content strategist team to work on the topics of most interest to marketers. We would use those topics as topic landing pages. Based on the visual designs created, I created wireframes for these new topic page content types. The goal of these pages was to help marketers learn more about a topic as well as narrow down to some sub-topics.

We also worked with a separate team who created what we called “collections” pages that would showcase a group of products or services that revolved around a topic. Throughout the project we coordinated the designs between our tiles that pointed to their pages to create a cohesive experience for the user.

Usability testing

While our developers were in the process of setting up some back-end technologies in preparation for our new designs, we decided to conduct some initial user research on our home, article and collection pages. I conducted usability tests with four target users.

The goals of the test were to understand how users felt about the overall design, and functionality of the home / landing page, article page and collection page.

One of the key takeaways was to understand the users and meet them where they were in order to optimize our site to their needs, despite stakeholder requests that focused more on making the site flashy and pretty. At the end of the day, functionality and ease of use were most important to the users and all other requests were secondary to that.

Some of the primary findings were that users:

• Liked the modern design of the homepage and thought the article pages were straightforward and allowed them to read content, which was the primary purpose of this sort of site
• Responded very negatively to tiles without titles, which was a stakeholder requests, since their primary purpose was to read the content
• Liked the dynamic nature of tiles that allowed them to see more information upon hover.
• Wanted more clarity around what a “Collection” was and where the tiles would take them.
• Preferred reading more about what was trending rather than what we chose to pick for them, entitled "Editor's picks".
• Wanted to be able to save articles for later.

Design updates

We updated our designs along the following principles based on the user feedback:

1. Allow users to quickly skim by making all headlines visible and move less essential information into a hover state (like number of minute read, sharing, and saving for later).
2. Allow users the ability to see what is latest and trending very easily.
3. Be transparent around where users will go by clicking on anything, such as the collections tiles, which is to sell products and services.

We updated our designs to help with legibility and readability by increasing the opacity of the dark gradient over images and by adding an 8px gutter between tiles. We also eliminated the branding tile at the top left to maximize space for actual articles and moved it to a skinny banner at the top.

AB testing

Our lead visual designer felt strongly that the design should have a dark background, which was an interpretation of our stakeholders' desire to make the site look and feel more modern, however I felt that our users, who expressed that they wanted to use this site as a source for reading a lot of content and keeping up with the latest news, I felt that legibility and scannability was more important. We decided to do an AB test on the current version and the white version. We also set up a survey asking users to choose between dark or light.

Outcome

After a few weeks of testing, we reached statistical significance in finding that users were split in their preference between light and dark and the AB test showed that there was no preference in terms of our KPIs which were bounce rate and click through rate. We realized that choosing between a light and dark background came down more to a matter of preference rather than usability, and that whichever background we chose, we would not affect the usage of our site. We wanted to continue tweaking our site and improving on it, but unfortunately this site became part of the Watson marketing organization and is no longer live.

Lessons learned

I learned that sometimes design tweaks that designers can agonize over can sometimes be up to simple personal preference, as in the case of the AB test we ran. I also learned the extreme importance of balancing the needs of the stakeholders with the users in order to have a successful project.