Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week… I’m just literally speechless. I can’t even tell you how excited I am to have Hayley Nelson from Wired magazine here. Hayley, thank you so much for joining us.

Hayley:

Sure! Happy to be here.

Karen:

So, Wired magazine. You just launched a snazzy lookin’ new responsive design. Could you start out with introducing yourself and telling us a little bit about what you do at Wired?

Hayley:

I’m in charge of product development. At Wired, what that means is I’m really sort of sitting at the intersection of edit and technology, and advertising and marketing. So, really just trying to define our strategy and our approach to growth and then implementing a road map and the tactics to get us there. I’ve been here for about two years, and I was basically the first product person that Wired had brought on. So, I did a bit of setup with defining certain roles and skill sets that I felt we needed to have here, and then once the team was ramped up we got busy on tackling the website. That really started with a big-sized back-end project and then what you see before you today, which is the front-end result. That was the last two years.

We were less worried about responsive on the edit and design side—we were just more excited about it—but there were more unknowns on the ad side.

Karen:

Wow, that is quite a couple of years for you. Tell me a little bit about the decision to go responsive. Ethan and I have talked to a number of companies, publishers in particular, that say the choice to go responsive was kind of a no-brainer for them. Was that a given for you, or were there some difficult discussions or challenges to overcome?

Hayley:

I think it was pretty much a given because it seemed like that was the direction that most publishers were going and the writing was on the wall that it was the way to go. We were really inspired by the work that The New York Times was doing with their article pages. At the time, they had just tackled their article page and we were encouraged by that and liked some of the things that we saw there, and it feels like a lot of other sites were in the works. The scary part of it was that it was uncharted territory, especially as it related to advertising and marketing. We were less worried about responsive on the edit and design side—we were just more excited about it—but there were more unknowns on the ad side.

But it was pretty unanimous that that was the way to approach it. One main reason was it was incredibly inefficient to have two different solutions, one for mobile and one for desktop, and to have to do a lot of modifications and tweaks when we had a special presentation that we had to differently for phone and desktop. So, we all felt good that we were moving toward a much more efficient process and that we could use those people in other great ways.

With the design that we came up with, we heard consistently from users that they loved it and preferred it most on the phone.

Ethan:

The words mobile and desktop come up somewhat frequently in the scope of a responsive project. How did Wired think about the needs of the mobile reader versus the desktop reader? Did that come into play when you were starting to think about this responsive redesign?

Hayley:

Yeah, absolutely. We felt that we needed to be thinking about mobile first from the get go because it’s our largest growing use case. We did a lot of testing prototypes on mobile first, and that was actually really interesting because with the design that we came up with, we heard consistently from users that they loved it and preferred it most on the phone. So, it was a great flip flop in terms of where we put our attention. With mobile, there was definitely more of a social feed referring people to it, so we wanted to think about what that experience was like when you land after clicking on a link from Twitter or Facebook. We definitely thought about the need to scroll and to have everything very clearly organized, so we had to make a lot of hard choices about “Well, what is that ultimate stack that you provide on mobile?” and it forced us to make hard decisions.

With desktop, yes, the experience is slightly different. We actually have an audience that does still come to us primarily on desktop and we know there’s a lot of people that read Wired at the office because it’s more of an accepted legitimate to have up on your computer. [Laughs] I think there are some different use cases. Clearly a lot of the work that we put into thinking about the imagery and the photo display is really optimized on desktop. We wanted to think about that—how do you delight the user on desktop with those large beautiful images and photo galleries and those rich content experiences, but then also really service the utility of the phone?

I think the three rounds of usability testing that we did really helped because we constantly got feedback that cemented the direction that we were headed in.

Karen:

How did you make some of those tough choices about what to prioritize when you were thinking holistically across mobile and desktop and every size in-between? We talked to somebody in one of our previous interviews that said it was less about it being mobile first and more like it was everything first. I’m always interested in how do you actually have those conversations with your stakeholders, the designers, and the editors involved in this process? How do you get everybody to agree on what you have on the screen and what the priorities should be given that you have so many different form factors?

Hayley:

I don’t think it was that difficult. We have a certain amount of news stories each day and we have to present them to the reader in a way that they can discover them, so it’s a fairly clear mandate. We have to do a number of things. Present what’s fresh. If the reader does not like what’s being presented, we need to give them an off-ramp or a recirculation tool, give them another choice. Then we’ve got to mix in the ads and the marketing messages in a smart way, and our other recirculation devices that drive traffic and revenue for us. It’s sort of a “Here’s what we’ve got and here’s where else you can go, and let’s make it easy for you to share those things,” and that’s sort of the basics. I don’t think it was too difficult to get to that, and I think the three rounds of usability testing that we did really helped because we constantly got feedback that cemented the direction that we were headed in, so that was great.

How do we make sure ads load in a smart way and that a user discovers them throughout their path, but that they’re not sort of “ghetto-ized.”

Ethan:

One thing I’ve been dying to ask you about is the responsive advertising problem. This is a challenge on every responsive site, and we’ve talked to a number of publishers that are still trying to come up with a really great solution for thinking about ads in a more cross-device context. How dies Wired start approaching advertising in a responsive design?

Hayley:

Our first task was actually not even responsiveness but ad viewability. Viewability has become a real trend and requirement these days from a lot of agencies and marketers. That was sort of top of mind, was how do we make sure ads load in a smart way and that a user discovers them throughout their path, but that they’re not sort of “ghetto-ized.” That was something I think we did really successfully, especially with the article page experience, which is obviously where we get the majority of our traffic. It was really about devising new ways to intersperse the ads throughout the text. We developed our own formula for doing that and it’s pretty unique I think, just in terms of the right pacing feeling for when you see an ad and then getting that “credit” for that ad having been viewed. That was a huge task at the top of the list.

Second to that came “What are the big, beautiful ad units we can develop that will work and be packaged across all of the screens?” “Let’s think of places on our canvas where we can put something big an elegant and de-clutter,” so to not have as many, and that was one of the fundamental things that we started with. We didn’t want as many, we just wanted it to be more beautiful. And we wanted them to be much more integrated. We have this underlying philosophy that ads and edit and consumer marketing messages all share the same space. It’s sort of a surprise tactic, where anything may pop up in a certain spot and the user just travels through the flow and experiences it.

So, that’s how we started. In terms of getting to really responsive units, we have a great in-house team that does a lot of handholding with advertisers to help them develop the assets that they need to serve across all of the devices. I don’t think we’re completely there yet, we’re very much at the beginning of that journey together with our ad clients.

Any time we wanted to change something on the front-end, you had to do it in seventeen places. So, it was just extremely inefficient.

Karen:

You mentioned that as part of your two years with Wired that one of your previous projects was a back-end replatforming. Can you talk about changes that you might have made to your content management or your publishing system to prepare for this responsive redesign?

Hayley:

When I first got here, Wired, for whatever reason—it was the way they had chosen to expand areas of coverage in the time leading up to that—was running on seventeen different instances of WordPress, so it was a little bit of a Huck Finn life raft duct taped together. It meant that any time we wanted to change something on the front-end, you had to do it in seventeen places. So, it was just extremely inefficient. We took a big chunk of time and said “Okay, we’re going to migrate all of this into one great instance” and that allowed us to really rewrite the code and be in a really good place with our back-end and our data all in one WordPress installation. From there, we were ready to layer on this new front-end.

We decided to just simplify and roll them up into the top six top level categories that you see today—business, design, entertainment, gear, science, and security.

Karen:

Did you made any changes to the substance of the content? Did you make editorial changes to support this responsive redesign? I’ve talked to some publishers that say that they used the responsive redesign to really rethink the core of what they’re publishing—the article formats or new things that they want to have—and I talk to other publishers that say “Nope, we didn’t touch editorial at all. We just focused on the front-end design.”

Hayley:

Yeah, we made a lot of changes. One major thing was we had a lot of subcategories of coverage, and they had very clever names but they weren’t really resonating with readers, they didn’t really understand what all of what the sub-brands stood for. We decided to just simplify and roll them up into the top six top level categories that you see today—business, design, entertainment, gear, science, and security. We thought that these were the main chapters in the book. We cover a lot of different areas and so we just wanted to be clear when you got here that “these are the verticals you can dive into and there’s a lot within each one,” but that you don’t have to be concerned with all of the nomenclature. That was a big change.

We have two big choices. One is it can be in auto mode, which is just stories flowing in in reverse chronological order, or it can be fully curated.

We also changed the way that we’re signposting stories on our homepage and section fronts. We used to use clever, catchy kickers and we changed that to default to an author name, so we’re just really displaying the author name, the headline, and when it was published. Or the ability for editors to go in there and give it a proper signpost, like “New in Design,” or “Latest in Business.” Those were things that we heard users asking for. They were saying “Why is this story here? Why was this chosen?” So, we knew we wanted to do a better job of signposting why we hadn’t made those choices for them.

A lot of the navigation we rethought, a lot of the way that we display the stories is different. We have really designed all of the section fronts and the homepage to have a lot of flexibility and options. The entire way that we’re programming the site is completely different. We have two big choices. One is it can be in auto mode, which is just stories flowing in in reverse chronological order, or it can be fully curated—editors can go in and stick stories in certain places and then the rest of the stories can flow through like a river, or they can curate the entire display. Just lots of layers of flexibility there. It’s the same with the article pages. We’ve created so many different types of templates so that the display can be very different on the fly. The editors don’t need to call in the dev team for special layouts or placements, they’ve got a lot of options at their fingertips. We really just added a lot of choice to the way that the editors can present the information on a daily basis.

That was one of the big changes that we made, was really always prototyping and working from prototypes, looking at prototypes, being comfortable with looking at work in progress.

Ethan:

As you’ve been restructuring and redesigning the site, and changing the way that the programming works, how has that impacted the way that your team internally works together and collaborates? Do they find that designers and developers work more closely together, or has the process really not changed all that much?

Hayley:

It did change a lot. A lot of us were new; we had brought on some new tech talent and we had some new design talent. So, we were fairly fresh in working together, starting from eighteen months ago. We developed several new ways to approach it. At the beginning, one was this twice a week kind of huddle with key editors, designers, developers, all looking at work in progress. That was one of the big changes that we made, was really always prototyping and working from prototypes, looking at prototypes, being comfortable with looking at work in progress even if it was terribly buggy, and just all being around the table and sharing thoughts together. That was really important.

One other thing that we did that was kind of neat was the dev team has their daily stand-up and we included some of our key stakeholders from edit and advertising and design in those stand-ups because, really, the whole project at that point was redesign. So, they really got to see some of our process and the speed at which we work and tackle things, and they got a real feel for it, and we got in much better sync from that. We tried a lot of things and I think it was a great process of getting to know each other a lot more closely.

Ethan:

It’s interesting to hear you talk about these tighter iteration loops. Did the tools your designers used to actually create the designs change over time? Are you still creating mockups in Photoshop or in Illustrator, or is there more prototyping happening in HTML and CSS?

Hayley:

I think it was a combination. We have some really talented designers that have deep, deep backgrounds in print but also online, and so for them some designs were better translated in actually a keynote that they could use to illustrate the interaction that they wanted with motion. Then some of it was taking one of our developers and embedding them on the design desk so that they could work super closely and we could review things in HTML. So, it’s been a combination.

It’s been a little bit hard to show things that aren’t completely finished because usually when you’re dealing with print they are.

Karen:

What about the process of reviewing the work with the rest of the organization? Did it change the way that you had conversations with the editorial team or with other stakeholders? What did you show them as work in progress?

Hayley:

There wasn’t a huge process in place for sharing work across the entire organization. One thing that we did was, again, introduce this concept of work in progress. I think it’s been a little bit hard to show things that aren’t completely finished because usually when you’re dealing with print they are, or when you’re designing one beautiful article for the website, it is in a good place before the rest of the organization sees it. We had a few checkpoints with the larger organization where we showed work in progress and that was great. I think that’s still sort of an evolving process for us.

We felt really good about the performance we were able to get. That’s always going to be something we’ll look to optimize. But we do feel pretty good about where it is now.

Ethan:

One of these things that I’ve talked to a lot of organizations about is this idea of performance, that we can measure how quickly we can get our content and our interfaces to our end users, and that’s great. I know that the responsive redesign is stunning, but when I posted it on Twitter there was some interesting feedback about how quickly it loaded over mobile connections. I’m wondering if that’s an area of focus for the team at Wired, or if there were going to be steps to address that in future iterations.

Hayley:

It was huge. That was almost our number one goal—it was a top priority that we be fast because we felt that our site had been so slow in the past and that we were really making users work for it. All of that back-end revamp we did, that was one leap forward and then the new front-end—the team worked on a lot of code refactoring to make it really tight and fast. We also made some changes with our CDN. There were just so many steps in approaching the speed and performance question, and it was awesome because our editor-in-chief was extremely focused on that. It was way outside of just the tech domain—everyone was focused on it. So, we felt really good about the performance we were able to get. That’s always going to be something we’ll look to optimize. But we do feel pretty good about where it is now, so it’s not on our immediate list. We’re feeling like we’ve achieved that goal.

I mentioned ad viewability and the creation of new ad inventory—that was a major priority and something that we did a very good job of. I think we doubled our ad inventory at least for mobile and tablet platforms.

Karen:

What kind of metrics, tools, or evaluation schemes do you have in place to know if this responsive redesign is performing better than its predecessor?

Hayley:

For us, success was definitely that performance lift, that speed and real usability factor. The other is really just user engagement. Are they spending a lot of time with us? Are they turning a lot of pages in a month? Are they really getting deeply engaged with the content? So, we’re really hoping to see that needle move towards deeper engagement. I mentioned ad viewability and the creation of new ad inventory—that was a major priority and something that we did a very good job of. I think we doubled our ad inventory at least for mobile and tablet platforms.

Lastly, all of the workflow efficiencies that we created with our new tools on the back-end and just by reducing a number of platforms we were maintaining with this one codebase, this one look and feel… The whole design philosophy and vocabulary that is the defining architecture of the site really simplifies things because things are either in the framework or they’re not, so it kind of made all of the choices a lot clearer. I think it was all of those things—they efficiencies internally and then, of course, what we’re hearing from users about just how it feels to use it and “are you able to get engaged with it?”

The time that it took to build the raw functionality and to add all of that finesse—I would say don’t skimp on that.

Ethan:

That’s fantastic Hayley. The last question I’d like to ask you is you’ve come out of the end of this two-year process of replatforming your site, redesigning it responsively. What advice do you have for organizations that are starting to do the same thing today? What have you learned that you’d like to share with our listeners?

Hayley:

I would just advise people not to skip any parts of the process. We really did this the right way, which was starting with in-depth stakeholder interviews where we asked people across the organization “What do you want this site to be? What should it be able to do? How should it feel? What should our position be in the market?” Asking people what they want to be when they grow up—that was really, really important to get that input. And to do the competitive research, to look at sites and say “This is what I like over here,” and “I like this over here.” Then to go through an exploratory discovery period if you can, if you’re not under incredible time pressure. We initially had worked with Paravel, who I know you guys have interviewed before, Trent Walton and team, to do a few responsive explorations and they really taught us a lot about different choices and options on the tech side. The three months that we worked with them were really experimental, where we were trying different things and seeing what felt good.

Then when we transitioned the project to our team, we allowed ourselves to have several months to really nail a lot of the fine details. That goes back to a lot of the choices that we made about the design and that philosophy I mentioned. Our creative director and our editor-in-chief are amazing designers and are really inspired by the material design principles that Google has laid out. So, taking the time to refine all of the animations, and interactions, and the color choices, the fonts of course are very particular, the icons… All of that, it was just such a craft. It was really a true pleasure to watch these guys work, developing such precise calculations on all of that. So, the time that it took to build the raw functionality and to add all of that finesse—I would say don’t skimp on that. It was time that I think was well spent and is reflected in what we’re able to offer today.

Karen:

Hayley, this has been fascinating. I was really excited to see the responsive beta of Wired, and I was excited to see it when it launched, and I’m excited to see where you guys go next with it. I want to say thank you for taking the time to talk with us today.

Hayley:

Thanks guys, it’s been a pleasure.

Ethan:

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

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. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

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 for listening, and we’ll be back next week.