Episode Transcript

Karen:

Hi, this is a responsive web design podcast where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week we come to you in a spirit of jubilation. We are joined by Kelly Pratt and Kristi-Lynn Jacovino from The Onion. Welcome!

Kristi-Lynn:

Hi!

Kelly:

Thanks!

Ethan:

But before we dive in, I’d like to take a minute to mention our wonderful sponsor, Campaign Monitor. If you need an email newsletter you should absolutely check them out. Campaign Monitor features Canvas, which is their easy to use builder for creating wonderful email newsletters that look great everywhere, even on mobile devices. We’ve actually found here on the podcast that it’s very easy to create an email newsletter in just minutes. They have a great editor with some really decent drag and drop functionality, as well as some flexible, customizable starter designs that allow you to create these lovely looking emails that match your brand and your content. And the nice thing is, you don’t actually need a Campaign Monitor account to check out Canvas or their other offerings. You can actually just go to their website, campaignmonitor.com and start experimenting today. So thanks again, guys.

Karen:

We’re so happy to have you here. Perhaps we could start off with each of you introducing yourselves. Tell us a little bit about what you do at The Onion. Kelly, why don’t you start us off?

Kelly:

Great. I’m Kelly. I’m the product design lead here at The Onion. I’ve been with the company for about two years and I help lead the projects from inception to launch and then we continue to iterate and evolve our products. Since we’re here talking about the A.V. Club redesign, I have to admit that together Kristi-Lynn and I can’t take much responsibility for the final product without mentioning the lead designer on the project, Brett Michael, and their great front end developers, Shawn Cook, and a bunch of people on the back end there. But since the launch on November 18th, 2013, we’ve really worked closely with our prior director of product, Jesse Woghin, and we’re excited to talk about this. We really have a solid understanding of the reasons of why we went through that redesign and the goals as we’ve been adding new features and running various visibility tests to improve the site experience.

Kristi-Lynn:

I’ll go next! I’m Kristi-Lynn. I’m the UX/UI designer here. I’ve been with the company for almost a year and I primarily work on the prototyping and the usability of our sites and how we can improve them, as well as our custom CMS. I’ve been creating responsive websites for several years and I’ve worked as both a front end developer and UX architect doing planning, prototyping, and responsive web development for small to medium-scale sites and now I’m happy to say I do it for The Onion.

Looking at the numbers for the A.V. Club going responsive was the logical next step when you look at the growth of mobile traffic.

Karen:

We’re pretty happy about that too. So, how did you convince people to go responsive? Were there questions, concerns about this approach, this methodology?

Kelly:

For our team, we were pretty lucky because, at the time, The Onion was already fully responsive, so we really had a proof of concept that we could present to our senior team and editorial. Looking at the numbers for the A.V. Club going responsive was the logical next step when you look at the growth of mobile traffic.

We saw a ninety-eight percent growth in mobile traffic. It’s really remarkable when you consider that we weren’t focused on updating the mobile experience at the time.

Our social team was really optimizing their promotions and just the natural growth of mobile that was happening from 2012 to 2013—when combining both of those we saw a ninety-eight percent growth in mobile traffic. It’s really remarkable when you consider that we weren’t focused on updating the mobile experience at the time. For us, we were looking at the numbers and we were seeing an uptick in site visits across all screens but pageviews weren’t growing at that same rate, which made it really evident to us that there was an opportunity for us to optimize our page layouts and increase our recirculation options.

When it comes to publishers, there’s generally no difference between what our users are looking for when they’re either on desktop or mobile, they really just want to read content. It’s about making the best possible reading experience across all platforms.

Ethan:

Karen and I have spoken to a number of organizations now and we find that a lot of people are still struggling with these two words that come up a lot, especially within the context of a responsive design: mobile and desktop. There are some organizations that think that those are user groups that have completely distinct and separate needs, and then there are others that make a pretty compelling case that they frankly need kind of the same information. As you guys were starting to think about the responsive redesign of the A.V. Club, did those words come up? How did you guys specifically think about mobile and desktop users?

Kristi-Lynn:

For some websites, it makes a lot of sense to consider your mobile users and your desktop users as separate entities, because for, say a restaurant, it might make more sense to have your mobile website primarily be your phone number to make a reservation and your menu, it might be more logical in that way.

But I think when it comes to publishers, there’s generally no difference between what our users are looking for when they’re either on desktop or mobile, they really just want to read content. It’s about making the best possible reading experience across all platforms. In our case all of the site’s functionality is essentially the same no matter what device you’re on. It’s really just a matter of making sure whether people can read comfortably and efficiently and that ideally they stay on the site for longer than just the one article they came in on.

We haven’t exactly adopted a real mobile-first approach, but what we do is sort of, in tandem, the mobile/tablet/desktop approach to our design process.

Karen:

In thinking through how you approached a redesign like this, one of the questions that sometimes comes up when we talk to people is, how do you make decisions about what you keep and what you get rid of? How do you change the prioritization of what appears where on different screen sizes or at different breakpoints? Can you talk about how you thought through that in your initial planning?

Kelly:

With our design process, we definitely consider multiple screen sizes when we’re designing the wireframing and prototyping right from the beginning. We haven’t exactly adopted a real mobile-first approach, but what we do is sort of, in tandem, the mobile/tablet/desktop approach to our design process. We found that it’s easier to do mobile first when you’re really starting with a brand new site, like we did with ClickHole.

But when it comes to an existing property, like The Onion or the A.V. Club, we really found that it was best to present the whole system to stakeholders to demonstrate how this current site experience was going to progress. Because when you have all of these different elements and features that they’re so accustomed to, that they see every day and that they use, showing them how that will change across their different devices is really important.

There’s no real reason for us to push to an app to offer the same experience.

Ethan:

How does responsive design fit into the A.V. Club’s larger digital ecosystem? If you guys have other apps, how do you guys think about the role of the responsive design alongside them?

Kristi-Lynn:

We’ve tried mobile apps in the past, I think The Onion is the most recent example, but we have a pretty small product team over here and rather than split our time, we’ve decided to really focus our efforts on our responsive websites in order to make that experience the best it can possibly be across these various devices. For us, that’s what makes the most sense.

When it comes to publishers in general, mobile apps might work for some people but it seems to me that most people are probably consuming their content on, say Facebook, where they’re having this steady feed of content coming to them, and when they’re looking at it on Facebook’s mobile web, it just makes more sense to spend our time on that experience rather than splitting it with a mobile app that’s dedicated.

Kelly:

Especially for us, when you think about it, what else can we offer to a user that they can’t just get from clicking on a link from Twitter? If we can give them everything in that element, there’s no real reason for us to push to an app to offer the same experience.

We basically rolled it out all at once. It was a pretty substantial redesign.

Karen:

What about rolling out this redesign? I’m struck, by talking to lots of different organizations, at how many different approaches there are—some companies just flip the switch on a redesign, other companies have a lengthy beta period where they’re testing, and still others just do a retrofit of the front end and don’t touch anything else on the back end or the editorial workflow. How did you guys roll it out?

Kristi-Lynn:

As far as the front end goes, we basically rolled it out all at once. It was a pretty substantial redesign, so at the time there wasn’t really a way for us to do a lot of testing and we had kind of already done a lot of analysis of our own analytics for what people were actually using and what we needed to change and how that would affect the overall site, and it just seemed to make sense to just roll it out.

We also had new ad units to factor in with the redesign, which basically means that sales has to be on board with the launch date in order to have those new ad products sold and ready to go at the time of the launch, so for us, in terms of the front end, it was one big rollout to get it live when we were ready.

We didn’t go for the responsive ad templates because we don’t do a lot of development in-house and wanted to make sure there wasn’t a barrier for any advertiser who wanted to advertise on our sites.

Karen:

I would love to hear about those new ad products that you were rolling out with.

Kelly:

For us, it was really to match what The Onion was currently using. A lot of our clients that come in will have buys across both sites and we wanted to make it easier for advertisers to use their creative across sites. We didn’t go for the responsive ad templates because we don’t do a lot of development in-house and wanted to make sure there wasn’t a barrier for any advertiser who wanted to advertise on our sites. So, it’s still pretty standard; we have these different breakpoints that will serve a different ad, whether it’s mobile or desktop. But for the most part, we have pretty standard banners and custom skins for larger homepage takeovers.

We’re actually quite lean and so it’s the entire team that really oversees all of our properties, which is one reason why we actually wanted all of our sites to be working off of the same codebase, which was really critical to our success.

Ethan:

How do you guys work internally, especially as you’ve been doing more responsive work? How do you collaborate? Do you find you’re hiring for different roles or do you organize teams differently as you’re rolling out and maintaining more responsive sites?

Kelly:

Thinking about our product team, we’re actually quite lean and so it’s the entire team that really oversees all of our properties, which is one reason why we actually wanted all of our sites to be working off of the same codebase, which was really critical to our success.

Internally, we really strive for transparency on our team to be sure that we’re collectively moving towards the same end goal. That extends beyond our team to the entire organization. We always kick off each project and make sure the key stakeholders are in the room so that we get everyone on the same page from the beginning, and throughout the process we’ve gotten better at regular check-ins and we have weekly recaps stating what we’ve accomplished and where we might be blocked. The reality of being a small team is that when fires come up, we have to put them out. While this may create some delays, what we’ve learned is that the key is really just the communication that’s coming from our team, and I think we’ve done a really great job of that as we’ve grown.

We can create interactive prototypes that we often share with stakeholders and with our development team so that everyone is pretty much on the same page with how the interactions are going to work and where content is going to be, how you’ll use it, what will happen as you scroll, etc.

Ethan:

Following off of that, what kind of applications or tools are your designers using now? Has that changed considerably in the last couple of years? What kind of mockups and prototypes do you find you are creating?

Kristi-Lynn:

Typically we start with paper wireframes and just play with a lot of ideas. In terms of digitizing the wireframes, we have tried many things with that—I think we could probably list off at least ten that we’ve tried since I’ve been here. But more recently we’ve found that UXPin has been working pretty well for our prototyping and wireframing just because with it only being the two of us on the design team, being able to collaborate live was really a key factor in choosing a tool for prototyping. It’s nice that in there we can easily try things, we can see what’s working, we can work off of each other’s work and collaborate live, basically co-designing but on our machines. It’s also great because we can create interactive prototypes that we often share with stakeholders and with our development team so that everyone is pretty much on the same page with how the interactions are going to work and where content is going to be, how you’ll use it, what will happen as you scroll, etc. Any final theming and design stuff is just done in Illustrator usually.

In the case of the A.V. Club redesign, I would say it was actually a change in the editorial process that prompted the redesign. What we really needed to do was just adapt the site to the content.

Karen:

About the content and editorial side—I’ve talked to some publishers that say a big responsive redesign is also an opportunity to change some of the underlying editorial, that they add in new types of features or new types of content. Other publishers say “Nope, the form of the article or the basic structure of our editorial doesn’t change.” How did you approach that? Did you make any changes to what you were actually publishing as a result of going responsive?

Kristi-Lynn:

In the case of the A.V. Club redesign, I would say it was actually a change in the editorial process that prompted the redesign, the reason being their content production schedule had changed in a way that basically doubled the amount of content they were producing. They had also made some changes with social promotion, so we were seeing at the time something like a fifteen percent increase in new visitors over the course of the three months that they had made some changes, but that only resulted in a three percent increase in the page views. So, what we really needed to do was just adapt the site to the content.

The way that we collaborate with the editorial teams has worked out pretty nicely for the product team just because we’re able to get them what they’re looking for and also help them to try to grow even further.

On the flip side, with a site like ClickHole that’s fairly new, what we were finding instead was that since we had our own custom CMS, we’re able to add new content types and new features to it on a whim. It’s great for them because when they come up with an idea for something where they’re like “You know, we’d like to try an article that’s like this,” we can be like “Okay, I think we can do that,” and we have the ability to adapt to whatever they throw at us, which could be totally random sometimes. But I think the way that we collaborate with the editorial teams has worked out pretty nicely for the product team just because we’re able to get them what they’re looking for and also help them to try to grow even further.

The design and build of ClickHole was completely turned around in eleven weeks, proving how this shared codebase allows us to develop these new properties.

Karen:

What about your content management system? What CMS are you using and did you have to make changes to it?

Kelly:

When we decided to redesign the A.V. Club, we also thought that it would be best to actually build out our custom CMS as part of a larger company goal to have all of our Onion Inc. properties on a shared codebase. The benefit of this shared codebase is that it will allow us to adapt and innovate quickly and efficiently, whether this is sharing a new feature, or more recently, proving how we can use our structure to create an entirely new property, such as ClickHole.

The design and build of ClickHole was completely turned around in eleven weeks, proving how this shared codebase allows us to develop these new properties. As Kristi-Lynn was mentioning, this launch also went with new feature types, like quizzes, which are a very complicated back end to figure out. One of our developers, Adam Wentz, sat down and really figured it out, but with that adaptive codebase it was much easier for our team to build it together. With the upcoming redesign of The Onion, we’ll be completing our goal of having all of our properties on this custom CMS.

It’s really an ongoing, evolving process for just testing, reconfiguring, figuring out what’s working, checking the analytics and really working with our users to come up with something that is what they want.

Ethan:

You guys mentioned you launched back in November. Since that time, as you’re working more closely with editorial and you’re actually able to be a little bit more responsive to their needs— no pun intended—have there been any elements of the design that you’ve reworked since launch? If so, what was the reasoning there?

Kristi-Lynn:

Since we rolled out the redesign all at once, there were some elements that we definitely needed to retest and refactor. I think some of the elements are pretty small and most you won’t notice, like when we changed bolded headlines to be unbolded in the feature area. But we’re still in the process of testing the homepage layout and some other larger feature areas, things that probably some of users have seen for a day or two and have been like “What’s this?” But overall, those things are just ongoing.

There were some other smaller features that we wanted to make sure we got into the new site, but we needed more time than we had during the redesign to examine them. For example, our first priority was the user grading widget for the reviews. Originally, the site did have the ability for users to grade, say, a TV show or something like that, but when we were originally planning for that during the redesign, there was just a lot more to it than we thought. It ended up being something that we came up with a solution for post-launch that worked across all screens and we ended up launching that in October. Since we launched it, we’ve already seen 100,000 grades come through it, and I think in the entire time that it existed before that, it was something like a total of 900,000 that came through originally. In just a few months, we’ve already gotten ten percent of what we had previously, so we’re pretty excited about the success of those things and it’s really an ongoing, evolving process for just testing, reconfiguring, figuring out what’s working, checking the analytics and really working with our users to come up with something that is what they want.

It’s sort of a balance of making sure that we’re keeping up with the success of the desktop versions in terms of pageviews and how much interaction we’re getting on our mobile sizes.

Karen:

As you are evaluating the success of this responsive redesign, do you look at different analytics? Does the way that you measure success change? How do you know if it’s working?

Kristi-Lynn:

We’ve continued to see an increase in the amount of mobile traffic across all of our sites. The ClickHole site is obviously the newest one and the most mobile-first approach that we’ve taken, and that site hovers around seventy percent mobile use, so it’s definitely the most mobile of our sites. But even the others are hovering above fifty percent at this point.

So I think for us it’s sort of a balance of making sure that we’re keeping up with the success of the desktop versions in terms of pageviews and how much interaction we’re getting on our mobile sizes. We’re checking those numbers pretty consistently.

I think Kelly can talk a little bit more about the KPIs that we’re tracking or at least the meetings that we have in order to make sure that our product team is on track with our goals as well as the goals of editorial. But that’s primarily how we know it’s working, is if we’re keeping people on the site and if our mobile traffic is basically skyrocketing, I think we’re doing something right.

Obviously all sites aim to get that second or third page view, so we look at how many people are actually using sidebar recirculation.

Kelly:

I can talk a little bit further and expand a little bit about what we do as a product team. We schedule a monthly check-in to really evaluate the analytics of all of our properties. Along with standard page views, and looking at visitor types, and making sure our bounce rates are going down, we’re really curious to track where users are clicking. Obviously all sites aim to get that second or third page view, so we look at how many people are actually using sidebar recirculation. Are they going to the section pages for more content? We really want to understand how they interact with the page. We recently added tags to the bottom of articles as an additional recirculation areas and the analytics that we’ve looked at have really shown that it’s been successful and people are using it, which is great. It’s always a win for us because we want to make sure that we’re not making updates just to make updates, we really aim to measure everything that we’re doing.

It’s really about paying attention to how your content is ordered, what’s important to your users, and really planning out the user experience and the information architecture from the start.

Ethan:

As you guys have launched this really beautiful responsive redesign for the A.V. Club, what have you learned? Do you guys have any advice for other organizations who are starting a responsive redesign today?

Kristi-Lynn:

Make sure you really know why you’re going responsive and keep those reasons in mind throughout the whole process, because it’s easy to lose sight of the primary goals when you’re focused a lot on making it smaller or “just put it in one column.” I think it’s really about paying attention to how your content is ordered, what’s important to your users, and really planning out the user experience and the information architecture from the start. Those are the fundamentals of why something like “mobile first” has become a popular catchphrase—because it’s really about prioritizing and making sure that you know exactly what the people that are going to be using your site are looking for, where they expect to find it, what order makes the most sense for them to see it in, and accommodating for that. So, my best advice for them would be just really know your goals and your users so that you’re not just throwing things at the wall.

Make sure that you test, test, test. We talk about three different screen sizes but there are so many different types of phones and tablets out there and everyone is looking at your site from a different viewport.

Kelly:

The only thing to add to that is make sure that you test, test, test. We talk about three different screen sizes but there are so many different types of phones and tablets out there and everyone is looking at your site from a different viewport. The more you understand how your site flows throughout those breakpoints, the better.

You have to pay attention to everything that’s happening within view and not just “Oh yeah, it’s narrow, so we’re good, we’re done.”

Kristi-Lynn:

Also, it’s not just about making it narrower for instance. A lot of what we have to keep in mind is what the actual viewport is, because when it comes down to “What is the user going to see at one time? How do they know that there’s content below an ad?” it can be really tricky sometimes if you only have 500 or so pixels of height. It’s really easy to forget about that when you’re looking on your computer at a really long scrolling thing of what your mobile site will look like and it’s not really that at all. It ends up being this much smaller version of it with a tiny viewport where you have to pay attention to everything that’s happening within view and not just “Oh yeah, it’s narrow, so we’re good, we’re done.”

Karen:

With that, I will say thank you to both of you. Kelly, Kristi-Lynn, this has been amazing. I am so happy you took some time to talk with us today and I am looking forward to see what you guys do next at The Onion.

Kelly:

Great. Thank you so much for having us!

Kristi-Lynn:

Thank you. Yeah, this was great.

Ethan:

Thanks to everyone for listening to this episode of a responsive web design podcast.

We’re really excited to announce that we’re offering a public workshop on responsive design, taking place April 2-3 in New York City. If you’re interested in attending, visit responsivewebdesign.com and register for a ticket today!

And if your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. If you’re interested in bringing us to your company, please go to responsivewebdesign.com and let us know that you’re interested.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks again to our sponsor, Campaign Monitor. Be sure to visit campaignmonitor.com and check out their email editor, Canvas. Thanks for listening, and we’ll be back next week.