Week #1 | Automation and A/B Testing

As I finish up my second week at Industry Dive, I realize I’ve already been exposed to so many different concepts. In general, these ideas have been centered on automation and A/B testing. I have little experience with both of these topics, because my previous projects were smaller in scope. I have been introduced to automation through tools like Grunt and GitHub, which clean up my workflow and allow me to be more efficient. Other projects in the office implementing automation include ad design and newsletter image creation. As for A/B testing, I had the chance to work directly on a project for the news articles that would be tested using real site visitors. We used Visual Website Optimizer (VWO) to create the A/B test, and I learned about the features it offers — the coolest being a heat map of user clicks. For this project, I was in charge of designing and coding an inline newsletter sign-up section for news stories. This would then be A/B tested to determine the design that leads to more customer conversions.

Challenge

My task was to design an inline call-to-action that flowed well with the articles and did not disrupt the reader. The goal was to create even more leads on user sign-ups for the site’s daily newsletter. The main challenge was making the section stand out in the middle of the story without distracting or annoying the reader. Along with this, if it were too similar to advertisements in the right-rail then the reader would instinctively pass over it.

Approach

The first step was to gather different examples across publications and see which were working and how they could be improved. I found three publications using similar strategies to what we wanted to implement: The Washington Post, CNBC and The New York Times. All three used slightly different tactics. The New York Times used a call-out box on the side. This solved the issue concerning breaking up the story, but it could be easily missed while reading. CNBC used a more graphic approach and incorporated an image. While a full picture may be distracting, this concept converts well to possibly using an icon. Lastly was The Washington Post, which used a clean, horizontal approach that flowed well but could be easily lost as it was very understated.

Results

After playing around with different designs and hierarchy, I came up with three designs. Each one was modeled after a different example seen on the web but was adjusted where necessary to be more effective. The most challenging part of the design was finding the proper sizes for the text and button. For example, my instinct was to create a large call-to-action button, but this came off as distracting rather than effective. The first design was chosen to be A/B tested. The test includes three test variables: two with the design but different copy and then the control with no new inline text. It will take at least a week before we can analyze the results.

From these first two weeks, I have learned the importance of looking at competitors and evaluating their tactics and using them as inspiration. I also learned the effectiveness of A/B testing and how user interaction is the best way to see if something is working. Moving forward, I hope to keep learning how to use automation and get more comfortable with Github to be more productive.

Design #1

Screen Shot 2016-06-08 at 10.21.53 AM

Design #2

Screen Shot 2016-06-08 at 10.23.28 AM

Design #3

Screen Shot 2016-06-08 at 10.34.32 AM

Advertisements