Lately the SEO industry has collectively started to wake up to the fact that the “Content Marketing” masquerade is coming to a close. However the show must go on and users have been saving the last dance for quality ideas and Content Strategy. As a believer in remarkable content I’d say it’s about time Prince Charming showed up.
However, as with most heavily touted ideas in SEO, this call for quality comes up against a variety of issues. First, how do you get buy-in to create this content? Well, I covered that in my 2012 MozCon talk. Second, how do you make it? Tom Critchlow delivered a solid point at MozCon that I touched on at SearchFest when he said that SEOs can’t do what creative agencies do. To a certain extent I agree. I agree that we as an industry should stop citing Old Spice, Dollar Shave Club, and Coca Cola as examples of what we should be doing, but I disagree with his point that we should limit ourselves to the undercooked “content marketing” that SEO has become shunned all over the internet for.
Let’s talk about some creative content that SEOs have actually had a hand in and how they made it happen.
Some Great Examples of Creative and What it Took to Make Them
Recently there have been some impressive creative pieces that have been strategically manned by SEOs so I reached out to Dave Snyder of Copypress, Kris Roadruck of SearchFanatics, Devin Concannon of FreePeople and Dennis Goedegebuure of AirBNB to find out what it took to make those happen. I suppose it’s best to let them tell you how the magic happened in their own words.
2013 State of Content Marketing Study Interactive White Paper on CopyPress
Dave and his team put out an impressive interactive 2013 State of Content Marketing white paper that caught my eye, especially since we are currently working on a similar project with SurveyMonkey on Search Behavior. From what I can tell, they used jQuery and the Raphael Vector library specifically for this project and the overall site leverages MooTools and Scroll Gallery as well. I’ll let Dave take it from here:
How many people were involved in the process of the project, from research to design and development?
Dave Snyder: 1 Marketing Project Manager – Our marketing coordinator played this role. Pretty key for a collaborative piece like this. Nicole on our team did this job perfectly. She was up all night before we published it getting everything set. PR, email etc.
1 Copywriter/Researcher – I actually did this work, because I am a control freak. This included handling survey questions, interviews, case studies, and all 3000+ words of copy.
1 Copy Editor/ Research Assistant – Our Blog editor Amanda managed my data requests, checked my spelling, make sense of the madness. She sifted through all of the data and responses for obscure data points I wanted.
1 Designer – Kelly, our brand designer, is a trained infographics designer whom I snatched from doing work for a couple of other well-known agencies to get her in-house
2 Front End Developers- Derek and Kyle did different pieces. Derek handled the JS, and Kyle made it all work in WordPress. They worked together on email signup implementation.
How many hours were spent in the data analysis, data viz conception, and development phases of the project?
DS: Data analysis was handled by the content side, which is generally how CopyPress develops digital media. I would say we spent 16 working hours digging through data. The basic data was in your face, but there was a lot of info in the details. Concept through Development Phase was broken like this:
- Wireframe – 2 working days from designer
- Design of interactive piece – 5 working days. There was a lot of small assets with this since it’s interactive
- Design of White Paper – 1 day, using pre-made assets
- Coding – 4 days. There are some really tricky things going on with the JS that I even thought were minimal. Cross browser compatibility is the issue
How long ago did you start planning the design and development part of the project?
DS: We starting the design and development roughly 2.5 weeks ago I believe. The entire project was planned at the close of the year.
How did your team decide upon the graphic representation of your data and did you draw inspiration from another example or data viz piece?
DS: So our team of digital media designers and developers are pumping out about 100 pieces mixed between infographics, videos, illustrations per month. They mostly draw inspiration from each other, and places all around the web. We put our team through an extensive training process. For this piece I laid out my basic concept and let them roll with it. They are smarter than me and rocked it.
What are the steps in the process your team uses when analyzing data to represent visually and interactively?
DS: Segment the data into logical buckets, and then dissect the data from there.
i.e. You have a bag of oranges
12 individual oranges
10 slices per orange
3 seeds per slice
This each becomes a unique visualization, and in an interactive piece a layer to add interactivity too. One of the biggest mistakes designers make when trying to do visualized data is not picking data points that lend themselves to a visual, or picking a visual that simply doesn’t match the most compelling data. For me it all starts with data and flows from there. I actually don’t think we made this piece intuitive enough from a user perspective. And, that is something we need to do a better job of. Here is another example of a way to go though, our work :
https://70.85.25.171/~getconve/search2dev/images/birth_year/birth_year_inflation.html
What kind of return has this project seen?
We generated over 300 email signups and 50 qualified leads. Our email signups are worth about $15 a piece and leads about $200
The project is quite meta in that it’s a great content marketing piece about content marketing. I applaud Dave and his team on a continued commitment to quality content. I applaud me on the use of alliteration in that last sentence.
Truckpocalypse on TruckerClassifieds
I chatted with Kris Roadruck, the infamous anti-hero of SEO. I was incredibly impressed when he first showed me the Truckapocalypse interactive data visualization with it’s cool side-scrolling and interesting concept. So much so that I went on a tweet spree about how this mean we finally have a cool piece of creative that we as an industry can hang our hat on. So of course once I finally got the chance to showcase the idea of SEO-driven creative, I wanted to include him. However Kris thought my questions were – well, I’ll let him you what he thought my questions were…
Kris: Heh. I’m looking at your questionnaire and I think your company probably obfuscates your processes a lot more than we do LOL
I mean the process was like “Dude, we gotta make these guys an interactive infographic. What is everyone into right now that could translate? ‘I’m totally into doomsday preppers, plus the Mayan thing is coming up and that movie red dawn is about to come out. People in the country are into apocalypses.’
‘Cool. I’m about to Google and see if anyone ever wrote a whitepaper on what would happen if trucks stopped running. Someone had to do that post 9/11’
‘Hit. found white paper’
‘OK. Let’s make it a truck that drives through these scenarios. Who do we know that doesn’t suck at art?”
‘Cool. We got art, other Kris can you program this sh*t? There is probably some sort of JS library for side scrolling’
2 weeks later done.
What I love bout Kris’ approach is that it completely circumvents any type of process, red tape or the need for fifteen people to be involved. Much like what Justin Briggs described in his Searchfest deck, the Searchfanatics guys sat down and hacked away until it was done. I didn’t get a chance to ask Kris about the return he got from the project, but they used it to relaunch TruckerClassifieds by placing it the homepage to collect all the links and shares and then moved it over to its own folder which was a pretty brilliant use of the bait and switch. It would also appear that once it moved it was able to get another wave of links and shares:
I can’t tell which scrolling library SearchFanatics used at a quick glance (yes, I beautified the code Kris), but you could use Scrolloroma to accomplish the same effect.
FPDenim on FreePeople
Devin Concannon is a good friend of mine. He and I worked at Razorfish together a few years ago and we’d often spitball link bait ideas back and forth that we’d want to implement on the big clients we worked with. Unfortunately, back then we didn’t quite have the power to make those happen, but now the inmates are running the asylum. As an idea the super successful FP Denim project is the result of one of those off-the-cuff idea sessions. Devin and his team worked tirelessly to turn social media into content for their product pages, but the ultimate outcome was a ton of PR coverage and more engagement from their community. FP Denim is an exciting example of how user-generated content can transform an e-commerce site into a hub.
How many people were involved in the process of the project, from research to design and development?
This project was particularly exciting because out of the gate it was only a few people that initially conceptualized this campaign but by the time it launched, practically everyone on our team had touched it. Our senior marketing manager initially found and reached out to Olapic, the vendor we leveraged to create the social image sharing functionality, and I’d say establishing that partnership was what got the ball rolling. Their team was very eager to work with a larger player in the ecommerce space and we were excited to work with a young, hungry startup. So after we hammered out the details, that’s when our marketing team got their hands on it and we built out the “#MyFPDenim” plan.
Really the most challenging part of executing a campaign of this nature is getting all of the key stakeholders from different teams aligned and marching to the beat of the same drum. We’ve had some success using Basecamp for projects like this, where everyone from design to SEO to PR to QA has some type of role to play and deadlines to hit. But ultimately it’s outlining your campaign, designating responsibilities & setting deadlines, and making sure everyone does their job on time. I will say that having a good project manager or at the least, project management protocols, tends to make everyone’s life easier when you’re working on something across multiple teams.
How many hours were spent in the conception, and development phases of the project?
From a conception standpoint, a lot of time went into identifying the goals and marketing efforts behind the FP Denim campaign. Ultimately I’d say the more challenging aspect was syncing up communications and expectations between our team at Free People, Olapic, and our web development agency. Between adding Olapic widgets to our category & product detail pages and making sure the campaign landing page was styled according to our brand aesthetic, there was a lot of back and forth before we pushed this live.
Again, I think ultimately the devil is in the details. Your plan should designate a point of contact to serve as a liaison between any external stakeholders for a project like this. You should also outline the supplementary stakeholders, what they’re accountable for, and have all your updates coming from that one point of contact. It eliminates some of the confusion that comes from having too many cooks in the kitchen.
How long ago did you start planning the design and development part of the project?
FP Denim was a bit of an aberration since it involved working with a third party so I feel like we started talking about this in the spring of 2012 while anticipating a July 2012 launch. This was without a doubt a very cool project that everyone here was excited to work on. In fact, the initial seed for this idea might have been planted during a chat with my esteemed friend Mike King. I feel like that was when we first started discussing the idea of “wouldn’t it be cool if customers could upload images of themselves in Free People clothes straight from the social web?” We have a very active community of independent fashion bloggers and a huge social following, all snapping photos of themselves in our clothing. So the question was, “how do we leverage this audience?”
It really wasn’t until our marketing manager discovered Olapic that this entered the realm of possibility. Plenty of ecommerce sites allow people to upload images, but uploading straight from Instagram, Twitter, and Facebook via hashtag and positioning Free People where sharing was happening was the ultimate goal. Ultimately, I’d say that creating realistic timelines for projects that are outside your team’s comfort zone is critical to success. Things tend to get lost in the sauce when everyone is rushing trying to meet unrealistic deadlines.
What return has it seen?
So far, the results have been fantastic. Name a KPI and I’ll tell you how we exceeded expectations. Over 1000 customer images submitted. Record denim sales in Q3. Tons of backlinks from fashion bloggers. Coverage from Inc, Techcrunch, Mashable, and Business Insider. Finally, and most importantly, we learned that our customers really responded to the idea of seeing other customers styling our products. So much so that along with lots of other new features, we’ve built the ability to upload images directly to product pages onto our platform. We’re calling it FP Me. It’s our first foray into adding a “social layer” to our site and we’re really just scratching the surface of what will be a very engaging customer loyalty program. We just launched last week and we’re already seeing a ton of engagement from our customers. And from an SEO perspective, think about all the things we can do with that user generated content! We’ve already got a million more ideas in the queue.
The 346 links from 49 linking root domains are nothing to laugh at, but the more remarkable portion of this content initiative is how well it worked from a brand building perspective. Devin, an SEO, took an idea and leveraged it in the social channel for to do more than just build links, but prove out an idea that would grow into something much bigger than SEO.
It’s not fair to use Moz’s new FreshWeb as an indicator of the entire campaign since FP Denim launched in the summer, but the continued mentions are an indicator that it’s still going strong. At the end of the day, though, the business value has been more than proven. I’d like to give a standing ovation for the FreePeople Team and Olapic for building a fantastic product.
AirBNB Annual
Undoubtedly, you’ve seen AirBNB’s annual report. I’ve honestly never seen an annual report from a company as compelling as this vertical scrolling masterpiece. I spoke with AirBNB’s Head of SEO, Dennis Goedegebuure, about AirBNB’s incredible data viz. While Dennis may not have been the driver of this initiative he was certainly very involved in making sure it was done right. Check out the Twitter Cards and Open Graph tags, the beautifully evergreen URL and It was his tweets that brought it to my attention. Dennis was kind of enough to share some insight into what it takes to get creative done in a large organization. Let’s see what we can learn from him.
How many people were involved in the process of the project, from research to design and development?
Because the annual was produced both online and offline, we assembled a diverse team of people from across different departments. Over a dozen people worked on the project in a cross-functional capacity.
How many hours were spent in the data analysis, data viz conception, and development phases of the project?
We can’t really estimate how many hours it took, but it was a project that we worked on continuously starting in early December.
How did your team decide upon the graphic representation of your data and did you draw inspiration from another example or data viz piece?
Inspiration external blog,
For data viz:
- https://weloveinfographics.info/
- https://infosthetics.com/
- https://feltron.com/
- https://feltron.tumblr.com/
Generally for design
- https://www.septemberindustry.co.uk/
- https://designspiration.net/
- https://www.awwwards.com/
What are the steps in the process your team uses when analyzing data to represent visually and interactively?
First and foremost, we work on the story. Our task: how can we tell the story of 2012 — not just from a company perspective, but from the perspective of our entire community? We wanted to create a report that would celebrate the guests and hosts around the world that really make Airbnb what it is. We start with that story, and then we figure out how to best use data visualization to make that story come to life.
What type of ROI have you guys seen on it so far?
We’ve received tremendous response, especially from our community of guests and hosts around the world.
Understandably Dennis wasn’t able to give too many specifics, but from the looks of the social shares and the chatter from the Moz’s new Fresh Web index, it looks like it was certainly worth it.
Note: The AirBNB piece was published using secure HTTP (HTTPS) and therefore this data pull from OSE is not completely indicative of the success the project actually had since OSE does not crawl secure pages.
It looks like they’ve used Require.js to only load the JS resources as needed and that explains why the experience is so fast. They’ve also leveraged Sizzle.js, Underscore.js and LazyLoad.js to make the magic happen.
How to Communicate with Creatives
Aside from the fact that Creatives never want to listen to Strategists, a huge hurdle in getting awesome creative done is that Strategists don’t communicate their ideas as well as we may think. Out of necessity I’ve designed many sites, posters, album covers, etc. over the years, and while some of them were even good I certainly would not call myself a designed. However I’ve definitely endured my fair share of “I just want a simple clean design.” Even worse our Creative Director Robb Dorr has endured me, so I sat down with him to discuss the best ways to communicate with a Creative person to get remarkable creative done.
Robb is responsible for the lion’s share of the great creative seen on the iAcquire site. He’s worked with me on my high-end presentations like the MozCon deck and the Reinclusion Afterlife deck. For the last few months Robb’s been a one man army bringing my strategy to life on the new iAcquire website that is launching soon. Throughout most of these projects I’ve played it pretty fast and loose on the direction that I’ve given him, choosing to work iteratively and letting him take creative license to drive it home. For Robb and I this works very well, but for other Creatives this is often the source of a lot of frustration and Robb had a lot to say to avoid that frustration.
I wanted to ask you how to best communicate the ideas to creative people. I know it’s a common issue where people often say “Yeah, just make me a clean site.” What’s the best way to explain and idea to a Creative?
I think the best way is to try to explain the core concept behind what you’re trying to get across. When I first started at iAcquire I didn’t really understand SEO or what they did so a lot of my early stuff I did for them didn’t really hit the points they were trying to make. What’s on-page SEO? What’s off-page SEO? They wanted me to illustrate that stuff. I didn’t really understand it. So there was a lot of back and forth to get it fine-tuned, but now that I understand the core concept they can say “make an icon for this” or “make the graphics for that.” Once you understand the core concept you can then just apply a style to it.
I think that’s the most important thing for any designer is understanding the basics and the core concepts of what you’re trying to convey.
If you can give examples of what you’re looking for, send those over. We’re visual people generally. We need to see things. We need to see Examples of what you’re talking about. Simple and clean has very many variations. There’s simple and clean and stark, simple and clean professional; there’s different levels of it. Visual examples are always better and as much information as you can provide as far as content goes, the better.
Saying “We want to make a slide about SEO,” ok well I don’t know exactly what you want on it. If you say “this is the title we’re thinking, this is roughly how much content we’re going to have.” Even if it’s not the exact content that you want, sending over some of that content helps a lot. Because then that helps with placing and the negative spaces that we need to fill and we can account for everything.
Be as prepared as you can as you come into it. If you’re not prepared and you don’t have everything accounted for then a lot of times there’s back and forth and the designer doesn’t have a really good idea of where you’re going with things and they can’t design effectively.
Let’s say you don’t have much content yet and you have a general idea of the look and feel, but you don’t have examples, but all I can do is describe it to you. What kind of adjectives should I use to explain it to you? Obviously “a clean design” doesn’t say much, what does say much to you?
If you can give a general idea of who’s going to be viewing it, the feeling you want people to have when they are looking it. For example, I want them to feel welcomed or I want this to be a very intense presentation, visually busy, etc. Whatever feelings you want the design to convey are better than it just being “clean and simple.”
Can you give me an example of someone who communicated with you well?
Before
After
JP (iAcquire’s VP of Revenue) would send me drawn slides of the sales presentation and they looked terrible (love you JP!), but I got the idea of what he was trying to do. That helped immensely because he had concepts that I really didn’t grasp on the sales end of things, but once he drew them out it gave me a much better idea of what we’re trying to do.
We changed words 3 or 4 times until the final product, but at least they were there and we had space for them. That was huge.
And I just want to say, JP has gotten exponentially better at drawing as a result!
So give as much of an idea for you to work with as possible and it’s not really about explaining it in words, it’s more showing you the idea and letting you take it from there and also giving you the context to help you understand what the whole thing is about?
Yeah, exactly. As designers we should be able to imitate any style that you throw at us. If you’re like, we like this style, that’s our job to observe and pick out the visual pieces and put that together in the context of what you need. Obviously, we’re not going to copy it word-for-word or look-for-look, but you get the general feel out of that stuff. As a designer you should be able to do that.
If you can say “hey, I like this and we want to tweak it a little bit or have you put your own spin on it” that helps because we at least have some direction.
To that point we’ve started putting together a Data Viz Brief for the AZ Creative team that includes the target audience, story, copy, visual mockup and lock and feel examples. Do you think that’s enough for Creatives to work with or is too much?
I’d have to take a look at it, but it sounds like it would be enough because it leaves me to do the job of a designer which is putting all of that together in a visual sense.
I just want to make sure that’s not over stepping the Strategy/Creative boundaries. It’s basically a wireframe for the infographic that says where data points should go.
Right. That’s an essential step. I believe the design process should start from a sketch on paper, from there I wireframe things out in Balsamiq or Hot Gloo and get it approved. I make sure everything is in the right place and all the features are there. Then I go in and do the design.
That’s where the designer comes in. You guys have done the sketching and the wireframe and you send it off to the designer. Their job is now to not have to think about it. They can essentially say “here’s data, I’m putting it in, all I need to do is style it and give it a good solid concept.”
Big shout out to Robb, he is certainly a joy to work with and I couldn’t have done the beautiful work I’ve done in the last year without him!
Meet the Data Visualization Brief
Even before Robb and I had this conversation, my team had been experiencing these frustrations with a few of our own data viz projects internally so we built a new deliverable called the Data Viz Brief. It’s awesome to see that we were on the right track based on Robb’s assessment. Our Data Viz Brief includes:
- Target Audience
- Story
- Copy
- Visual Mockup
- Look and Feel Examples
The deliverable was born out of necessity in order to eliminate the back and forth between the Strategy team in NYC and the Creative team in Arizona and the ultimate output as a marked improvement over the ad hoc process we’d originally followed.
Download the Data Viz Brief we put together from our Valentine’s Day infographic.
Data and Creative Resources
Realistically, Creatives cost money and take time, that is not always what you have a surplus of.
Justin Briggs gave a great talk at SearchFest (and wrote a post about it) a couple weeks back underscoring how simple it is to build interactive data viz projects. His general point was, more or less, if you can copy and paste, you can make an interactive infographic. I agree completely. That is not to say that I expect that every SEO learn how to code, that’s a battle that was lost far before my time in SEO.
However if you’re an SEO and you want to be one next year, now is a good time to take control of your content marketing problem.
There are plenty of ways to tell a story with data without knowing how to code, but if you want free reign to create whatever you can imagine and not want to wait in a Development or Creative queue, I suggest you get familiar with the following resources:
Where you can get data:
Visualizations you can do without code:
What you should learn if you want to code and design:
Tools you can use once you can code:
- Bootstrap
- Gumby Framework
- D3.js
- NVD3.js
- High Charts
- Flot Charts
- Scrolloroma
- Data Viz Libraries
- CraftMap
- Google Maps API
- Google Chart Tools
- Timeline.js
- Tween.js
- Scripty2.js
- Lettering.js
Go Forth and Make Awesome Content
Content Strategy is a must, but given the culture of SEO, I don’t know what the likelihood is of getting people to do more strategic planning. That said, we all know the diminishing returns of guest posting as a means to build links, is it not time for us to do something about it? Content Marketing for SEO is typically a world full of isolated incidents, there so many easy resources to leverage, make a better splash.
Thanks to Dennis, Kris, Devin and Dave for their contributions and transparency.
I’d love to hear from you. What are you ready to do to improve your content marketing?
13 Comments
Mike,
This was amazing. As a strategist, it’s nice to see very successful campaigns and the way these brands went about creating them. I was a huge fan of the truckapocalypse bit. I’m also a fan of free people as I follow them on Instagram.
Creativity is key to many of these tactics. It’s refreshing to see how much work goes into reaching the end goal. We’re all going through it!
All I gotta say is thank God for graphic designers.
Thanks for the research you conducted for this piece.
Thanks June. Glad you found it worthwhile!
I love seeing behind the scenes stuff like this. Kudos, great piece.
Bravo. Thank you for this.
My head hurt just thinking about the time and effort that went into producing this piece.
I really like the area on communicating with creative. I find myself struggling with conveying my ideas and it helps to know that THEY also need to understand both the product and the goals.
Thanks again.
As usual, great ideas and resources Mike. Thanks for letting me share!
Thanks for being down to share, my man. Very hype to see what happens with FPme
Re: Truckpocalypse: I tried most of those (relevant) libraries but couldn’t really get what I wanted out of them easily. I wound up rolling my own thing.
Since then I’ve also encountered TweenLite and the GreenSock Animation Platform, and I really like it. I guess they’re a name in Flash development but they’ve put out a Javascript version of their library. It wouldn’t be a discredit to your list there 🙂
Yeah I thought so! Other Kris is convinced you used Scrollorama2 or something. It looked custom to me. Very well done.
Mike, this piece is really, really good. I really appreciate the premise: that we can’t keep referring to work created by large, creative agencies. And very inspiring you have found some ambitious but realistic examples.
Holy shit. What a great post. It doesn’t just analyse great content, it’s a fantastic example of it. I love posts that put in a ton of work to really dig into the topic and provide examples, links, insights, tools, experts…
All I can say is THANKS for turning me on to so many things in one post — and sending me back to the desk with a bug up my arse (in a good way) (if that’s possible).
Awesome post as usual.
Cheers
Awesome post, it’s pleasure to see people using their creativity and brain to create remarkable campaigns.
A fantastic post, I love the behind the scenes look at the conception and development of ideas and great content.
Leave a Comment