Episode Transcript

Ethan:

Hi, this is a Responsive Web Design podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week… Well folks, I gotta be square with you: we could not be more excited to have Erik Pelletier and Tito Bottitta here to speak with us about the MIT Technology Review. Erik, Tito, thank you so much for joining us.

Erik:

Pleasure to be here.

Tito:

Yeah, great to be here.

Karen:

But before we get started, I’d like to say a few words about our sponsor, GatherContent. I am so excited to have them as a sponsor, because I just love GatherContent as a product. Pulling off a responsive redesign means wrangling lots of content and stakeholders. The editorial and migration process can be one of the most difficult parts of going responsive. GatherContent makes collaboration and approval processes a snap, with simple workflows and structured templates. It’s much better than the mess of Word documents, Excel files, and missing emails you rely on today. What’s even better is the API that takes your work out of GatherContent and into a prototype or your CMS. Managing the editorial processes in a responsive redesign is difficult enough, so make your team’s life easier, with GatherContent. Go to gathercontent.com and find out how this content collaboration tool can help you plan, organize, and produce your web content.

Ethan:

So, Erik, Tito, maybe you both could just take a moment and introduce yourselves to our listeners and maybe tell us a little bit about the redesign of the MIT Technology Review.

Erik:

Great. Tito, you want to go first?

Tito:

Sure. Yeah, so I’m Tito, I am a partner at Upstatement and creative director there as well. So we’re a web design firm here in Boston, we work with a lot of publishers and non-profits and really anybody with a story to tell, and we were really excited when Erik reached out to us to talk about doing the Technology Review because we’re huge fans and several people here at Upstatement have actually been, like, lifelong subscribers, and as lifelong subscribers, they’re still only like a small part of the history of the publication, which is like more than a hundred years old and has just been ahead of the curve on technology and design for so long that we’re just ecstatic about the idea of working together.

Erik:

And just for the record, we verified that some of the Upstatement cast are actually subscribers.

Tito:

[laughs]

Erik:

My name is Erik Pelletier. I’m currently the chief digital officer and vice president of product development here at MIT Technology Review, and I’m primarily tasked with helping the organization better understand our customers, their needs and behaviors, and various market or industry dynamics, and then lead some teams here in improving the products and services that we create so we’re able to better serve them and drive business results. And as Tito was sort of alluding to the heritage of the organization, we are an independently-operated media company that is owned by MIT, and our editorial mission is really focused on helping people understand a world shaped by technology in the most meaningful ways. And for the better part of my time here, which is pretty brief, only about a year and a half, one of the things that we looked at obviously is the way that we’re engaging our consumers where they are, be it on the web, or using mobile devices, or tablets, or things of that nature. And our current experience is woefully behind in delivering the best-in-class editorial that the organization produces, and that’s sort of the impetus for this project, and having an agency background myself, I was familiar with Tito and his team and thought that their expertise would be a great compliment to some of the skills that we have here in-house. So, we were happy to be able to engage them and benefit from their experience in this very important project.

For us, given where we are and where we’re going, it just seemed to be a no-brainer to embrace the idea of being responsive as opposed to being mobile-first.

Ethan:

Erik, something you said about “meeting your users wherever you are,” I really like that phrase, and I’d just be curious to hear a little bit more about what drove the decision to redesign responsively. And more specifically, like in the early days of the project, did you have to field any questions or concerns from your stakeholders internally about what that was actually going to mean for the design or for your content?

Erik:

Well, I think there’s probably a couple different ways to come at that question. I think from our standpoint, I think even from the moment when I first got here and having initial conversations with our editor-in-chief and publisher Jason Pontin, it was actually really kind of clear, from his perspective, feeling that there was a need to really be responsive.

Without just agreeing and embracing that, we did a pretty good amount of work prior to even engaging Upstatement or beginning to think about anything from a design standpoint, and that really involved sort of taking a look at the business and where we stand and where we want to be, and then meeting individually with all the different stakeholders throughout the organization, not just within editorial, which is the largest body within the company.

And then also looking out to the outside and actually having one-on-one conversations with both existing users or subscribers, and then also meeting with people that might be somewhat familiar with us or avid readers of other like publications, and really trying to get a qualitative perspective, not from like a “What do you think about the Technology Review?” but really understanding what’s important to them and their reading or content consumption experience. And then backing that up or doing a deep dive in the actual analytics, so we’re sort of getting the opportunity to see does what people say match what our current readers or users are actually doing?

Coming out of that, really sort of just, for us, given where we are and where we’re going, it just seemed to be a no-brainer to embrace the idea of being responsive as opposed to being mobile-first, which would be a real radical departure I think for us from an editorial standpoint, given the depth and breadth of our content or coverage. And then also having a pretty good understanding of when and where and how people read us.

All of those things really had to come together on this site, not just from a responsive standpoint but from a standpoint of putting together a design that would work for your readers and work for your business.

Tito:

Yeah, and I feel like, Erik, the work that you guys did before we came on board can’t really be overstated. I mean I think you and the team really paved the path to success by doing all the customer research, by having all those internal conversations. By the time we walked in the door, I think everybody was ready to go and had a real shared understanding about how you wanted to move forward on some of the big ticket items, and you facilitated the right conversations between us, and like you were saying, not just the editorial group, but the art directors and the ad team and the people who were thinking about subscriptions and all of those things really had to come together on this site, not just from a responsive standpoint but from a standpoint of putting together a design that would work for your readers and work for your business.

Erik:

Yeah, I think that you guys did a great job of really embracing that and leveraging it throughout the process. When we look at responsive now having gone through this project or really being focused on evaluating what do we need to do to better serve our audience. It’s really I think the most standard and best approach that we could have gone with. Even looking back at it, it’s almost a no-brainer.

Karen:

I like to joke that I’ve dragged a lot of magazines kicking and screaming onto the internet…

Erik:

[laughs] Those must be some pretty good jokes.

One of the great aspects of the design is that we’ve been able to give a nice, simple presentation that delivers a story beautifully, regardless of whatever the device at hand is.

Karen:

[laughs] One of the things that’s really interesting to me as you’re shifting an editorial process that is geared toward a monthly or even every couple of months schedule for print to a regularly updated, daily updated, hourly updated schedule for the web, I’m really interested in how different teams conceive of what each platform is best for. Like, are there things that are better for print? Are there things that are better for desktop? Are there things that are better for mobile? How did you talk about the needs of a mobile reader versus a desktop reader versus a print reader as part of this redesign?

Erik:

That’s a really good question, because I think that one of the great by-products of this project or initiative is that it really, for the first time, I get the sense that it was encouraging that type of dialogue not just within various project stakeholders but within editorial itself.

So now, currently, the way that it has typically been approached is there’s specific content that has been created specifically for the web and then there are stories that are specifically developed or created for the magazine, and the presentation has always been radically different, or they really had to stretch to try and bring a story that was published in print into various templates, for lack of a better word, that were available for them to publish on site.

Through this project, we’ve gotten to really establish ways of thinking that, you know, there are people that are going to access certain types of content when they’re on the go or in those in-between moments—in between meetings, in between home and work, and standing in line at the coffeeshop—and then there are other moments where it’s sort of like lean back and put your feet up and relax, and you’re more likely to engage maybe the print publication or have your laptop or a tablet nearby to get into a piece of longform. So just by virtue of doing this project, we’ve been able to start to have those conversations and open up our thinking, and one of the great aspects of the design is that we’ve been able to give a nice, simple presentation that delivers a story beautifully, regardless of whatever the device at hand is.

Because print was sort of driving the car a little bit, some of the ways that the website presented that information, it wasn’t always clear to the user that that’s what they could get.

Tito:

Yeah, and I think one of my favorite things to do and I think something that our firm is really invested in is content and the presentation of content. And Karen, you’re kind of asking about the different ways that a publication sort of presents itself in a print context versus a digital context, and that was something that we got to sit down with the editorial group and with Erik’s group and really think through here. The old website I think was on a evolution, it was like on a path toward how they saw themselves digitally, but it was still maybe a little bit closer to what they were doing in print. And so we were trying to do some things with them to say this publication comes out six times a year, so how does a user experience the website versus the magazine? We were seeing big traffic spikes around the time that the magazine would come out, but we felt like there was really an opportunity to try and sustain that and have people who came to the site every day.

In talking to the editorial team, their mission is really all about providing an authoritative filter to the flood of information about technology every day, but I don’t think… because print was sort of driving the car a little bit, some of the ways that the website presented that information, it wasn’t always clear to the user that that’s what they could get. So that was one of the big problems that we were trying to solve on the site.

Responsive design is usually one of like the first and shortest conversations that happens with a client.

Ethan:

I’d love to hear a little bit more about how the scope for this responsive redesign was actually defined. Tito, for example, I know that since you and I worked together on The Boston Globe all of, what, five years ago now, Upstatement has been involved with some fairly large-scale responsive redesigns. I mean, how do you actually try to establish a structure and shape for some of these projects? Has that changed the way you communicate about responsive design to your clients, changing deliverables and communication early on in the project? Maybe tell me a little bit more about that.

Tito:

I feel like responsive design is usually one of like the first and shortest conversations that happens with a client. It’s usually happening right away, and I think about the way that Erik came to us and we started talking about responsive, and he was sort of like, “Yeah, that’s table stakes, that’s definitely what we’re doing.” I think we’re hearing that a lot more from the clients who we’re working with.

In terms of the scope of things, I think we’re doing a lot just to understand the mission and the audience and try and really hone the content for that group really regardless of device, which I think is part of what responsive is about. I think even more so, Ethan, than when we were working together on The Globe, like the gap between design and development has maybe narrowed even more. We’re often prototyping right alongside, making some of the bigger aesthetic design decisions in Sketch or InDesign or whatever we feel like using on the day. I think the idea of not so much designing in the browser but deciding in the browser, that it’s like a point in our process of design decision-making, and a really important one.

Locking in on what it’s like to consume and find things to read was one really clear thing that helped guide us in terms of where we were going to spend our time and effort.

Erik:

I think from a scoping perspective, even before we sat down to engage them, we had already begun doing a lot of this research on our own and we felt like that was going to be a great way to sort of vet and figure out not only who would be a good partner for us, but also to constrain or focus the effort. So, when we immediately started sitting down, we didn’t get into any back and forth in terms of, you know, should we do responsive, or something adaptive, or mobile-first, or any of those types of discussions. We sort of just kind of got into what’s going to deliver the most impact for our users and for the business. And for us, we had very clear goals.

From a business standpoint, we knew that we needed to be better in the way that we’re presenting our best-in-class stories or content, so that really put a point on let’s develop a great reading experience regardless of the device at hand. If you count the home page, which is a primary vehicle for the discovery of stories even when people come in directly on a particular article, and look at the number of article views that we get, ninety percent of our page views come from home page, topic, and a story. So, locking in on what it’s like to consume and find things to read was one really clear thing that helped guide us in terms of where we were going to spend our time and effort.

Ultimately we feel delivering a better reading experience also creates a better environment that potential advertising partners want to be in.

And then too, as a byproduct of that, that would naturally lead to subscription and other types of consumer revenues, but another way that we generate money is through advertising, and creating a better environment for our users and being mindful of the impact of advertising and some of the business requirements was really critical, and ultimately we feel delivering a better reading experience also creates a better environment that potential advertising partners want to be in. And for us, as we’ve sort of been working through this project, other things have emerged. Ad blocking has moved to the forefront; from an advertiser’s perspective, viewability is really key. These were all things that were, from the very beginning, very strong considerations as we approached the design and the scope, and it really helped us focus our efforts around how people are actually reading rather than just, like, representing all the various aspects of the business, which is largely what the site today does.

Tito:

Yeah, Erik, I think that’s a much better answer than I gave in response to scoping. One thing I would say on top of that, to your point that you’re seeing where the traffic is, the traffic is on the articles, those are far and away the most important templates and those were one of the things that we nailed down the earliest, and we had a pretty strict priority list of what we were working against in terms of what experiences Upstatement was going to design versus the things that you guys were going to take on in-house, understanding that we were going to set the tone stylistically and create some components and some visual grammar that you guys would be able to pick up. And so, we were really focused on those key experiences and that was a big part of how we scoped the work and how we decided what to work on. So, I think that’s well said, Erik.

We’ve maintained Drupal as a place where people store or manage content, we’ve created a visual editor that sort of sits on top of that, and have tied the new design into that.

Karen:

It wouldn’t be me if I didn’t follow up and ask a little bit about your content management system and the tools and processes for your editors and your journalists. Did that change at all as part of this redesign? Did the fundamental editorial objects that you’re creating change, and did that change what happened on the back end?

Erik:

Yeah, that’s actually a really great question, because that’s I think one of the parts of this project or portfolio of projects that was largely invisible to many people that would ultimately engage with the site once it launches.

In parallel to some of the design work that we were doing, we really took a look at some of the tools that we were using to manage content and sort of got a pretty good handle on some of the frustrations of the editorial staff that primarily use those tools to publish. And for the current site, it’s sort of both managed and run within Drupal, and that was part of a transition that was made during the last redesign in I believe 2012, where they redesigned the site, moved from a custom CMS into a Drupal platform. I was very conscious of that investment and all the time and effort that was put into that and the familiarity that had been developed by all the producers and people that work with it, and we wanted to keep that in place yet move to a more accessible or standards-based approach to development.

We’re managing the integrity of the design going forward, providing nice constraints, and also making it a lot easier for more people without some hardcore Drupal knowledge to be able to input content.

We’ve maintained Drupal as a place where people store or manage content, we’ve created a visual editor that sort of sits on top of that, and have tied the new design into that. So now we have a custom-built application that allows editors or content producers to sort of drag and drop and realize all the power and flexibility of the design yet maintain the integrity of it, so there’s no need for anyone to have HTML or CSS knowledge to get in to customize or manipulate some things, so we’ve really put a lot of effort and time against that from a development standpoint, and really sort of rebuilt the entire underlying architecture or infrastructure that supports the site. It was a lot of work that went into that, and I expect that that’s going to pay a lot of dividends. We’re managing the integrity of the design going forward, providing nice constraints, and also making it a lot easier for more people without some hardcore Drupal knowledge to be able to input content or create great presentations.

The editor that you guys are looking at when you’re building stories is showing you the desktop and the mobile layout side-by-side, so you can really visualize what’s happening.

Tito:

Yeah, and I would also point out, Erik, that the software that your team has built for the editors to build stories is really exceptional and it has this great feature that I love, where when you’re designing a story, and we built all these components for photo grids and pull quotes and all these different presentation things that you can do inside a story, and usually when you’re working on that, even in a great editor like Medium’s Editor, you’re seeing it in one context, you’re just seeing, “Okay, how does this look on desktop?” But when you start to pinch your screen in and see it smaller, you realize that “Oh, that pull quote that seemed really far away from the photo is now right on top of it and it really doesn’t look good.”

The editor that you guys are looking at when you’re building stories is showing you the desktop and the mobile layout side-by-side, so you can really visualize what’s happening and build a really beautiful, compelling story that helps give people all these different cues and different layers of reading, and I just think it’s a really smart interface.

Erik:

Yeah, I’m glad you brought that up, because I overlooked that. I think that’s one of the things, as we’ve rolled it out and started to provide the editorial staff with some training on it, it gets some “ooh’s” and “ahh’s.” But more importantly, I think it really demonstrates or reinforces some of the conversations that we’ve had throughout this project, where it begins to help them make a mind-shift towards not just how does this look in a desktop presentation, but also be mindful, like here’s what the experience is like on a small screen. And they can do that practically in real time, so it really simplifies things a great deal and reinforces the need to be cognizant of people accessing the stories on a small screen.

Tito:

Yeah, it really forces a mobile-first mindset by putting the visual right there, you can’t avoid it, and I think that’s awesome.

Ethan:

Well Tito, I’d actually be curious, how was that actually mirrored on the design side for you from a process standpoint? How do you work with either MIT Technology Review or your other clients to help them better understand, to sort of see the wide screen and the small screen side-by-side? Are you using different applications to talk about the design nowadays? Do you do more prototyping? Tell me a little bit about that.

We’re usually working really closely to try and shape that and understand what the content is going to look like and how we might organize it before we decide how we’re going to present it.

Tito:

Prototyping is probably one of the keys, is just being able to help people see the design as quickly as possible in different contexts.

But some of the things that we do too, like when we’re doing content hierarchies, which are sort of like our version of wireframes, which are more around saying, “Okay, what needs to be on this page, and what’s most important, and how does it maybe relate to some other things on the site?” We do those as basically just mobile wireframes, not maybe the more traditional thing that you might expect from like an Omnigraffle or something like that. It’s a really simple kind of like stacked box approach that talks just about the content and says, “This is most important, this is second-most important, this is third-most important.” And I think it really helps people start thinking in a mobile context from the very early stages, because content is one of the first things we’re talking about with the client and one of the first things we’re trying to organize, because we can’t design anything until we know what we’re designing against. We’re usually working really closely to try and shape that and understand what the content is going to look like and how we might organize it before we decide how we’re going to present it.

We’re now radically improving that first-touch experience, so we’re increasing the likelihood that they may enjoy what they’ve read and they come back.

Karen:

So I’m really curious how you think about measuring the success of a responsive redesign, and do you look at your analytics or do you look at your metrics in different ways now because the site is responsive?

Erik:

Well, I think we’re at the beginning of the shift. So for us, I think we’d set some pretty clear goals and measures at the beginning of the project and we’re just about getting to a point where we can start to look at the effectiveness. But ultimately for us, we believe that delivering a better experience, from first touch for those people that may not know about us but they’ve discovered a story on Twitter or on Facebook or someone’s shared a link and they come in… We’re now radically improving that first-touch experience, so we’re increasing the likelihood that they may enjoy what they’ve read and they come back and then ultimately, further downstream, we’d love to see those people convert and become subscribers or paying customers.

Obviously revenue is one key here, and that has both a dimension of new subscribers and then also how does a new and improved site experience that is much more fluid and beautiful across devices, how does that help the retention? So, those are some revenue-related metrics.

In general, we’d look at the level of engagement right now—we have two ways of looking at that: one is the page depth and how many stories people are reading in a particular visit, and then what is the number of people that are coming back multiple times per month, presumably because they are more engaged and enjoying what they’re reading and having a good experience around that. Those are really I think the key things that we’re looking at right now and expecting to see an increase.

And then just anecdotally for us, our traffic is really sort of two-thirds/one-third desktop versus mobile, and does the improved design and responsive nature of the experience, how is that impacting the mobile number? And that’s what we’re going to be watching pretty closely, to sort of quantify the impact of this project or initiative.

The involvement of the entire organization and facilitating that communication is really one of the biggest things, especially when working with an outside firm.

Ethan:

Well since you’re studying this wonderful, flexible, beautiful site that you’ve produced, I’d be curious if either of you have any lessons that you’ve learned from this redesign that you’d like to share with our listeners. If somebody is listening to our podcast today and they’re about to start on a new responsive redesign, what’s one or two things they could actually do going forward?

Tito:

Yeah, for Upstatement I think one of the big lessons is when we’re partnering with another organization to do the redesign, having the table set properly is just, can’t really be overstated. I think the work that Erik and his team did to understand the audience and to talk to all the editors and kind of have everybody on board and on the same page moving into the project is just a huge help. And I would say that that was especially true in this project from the developer standpoint, I think Erik was really good about involving his dev team from day one. So, we were talking with them at the same time that we were talking to the editors and the advertisers and everybody, and they were sharing their ideas about where they wanted to go and they were seeing the design and thinking, “Oh okay, how are we going to solve this on the back end and from the content management experience?” And even though those were some things that Upstatement wasn’t designing, we’re really interested in content management and have done it for other places, and so we were sort of sharing some ideas there, which I think helped them, and they were sharing ideas back to us and giving feedback that went back into the design. So, I think just the involvement of the entire organization and facilitating that communication is really one of the biggest things, especially when working with an outside firm.

Giving a little bit more consideration to not just what it takes to deliver a responsive design project, but then also identifying what impact it has on the way that you’re going to operate and function.

Erik:

Yeah, I would underscore that as well. I’d say not just when you’re working with an external partner, but just in general for everyone in the business to be connected, provide input, have visibility along the way, because inevitably you’re going to go through a lot of decisions that are going to require input from a number of different people. For us, having laid that groundwork and sort of clearly define the roles, it enabled us to move pretty quickly through some of these things, and people felt like they were more sort of on board and consulted throughout rather than getting to a point and having to make a big decision without the visibility of some of the inputs or clear understanding of the roles along the way. So, can’t understate that or underscore that enough, particularly when it’s something that is really connected to all parts of your organization and ultimately performance or revenue generation. So, there’s that aspect.

I think one of the things that perhaps, if I were to begin this again and start from the beginning, I think one of the things that we’ve realized as we’ve sort of gone through and gotten into the final stages of QA, there are certain aspects of going responsive that have an impact on some of our internal processes. Now, when we make further refinements and have to test them, we need to refine our internal processes and formalize some of that a bit more as we’re now considering not just a desktop presentation but tablet and mobile and the range of devices that people are using today to engage with us, and then ultimately what’s going to be coming next. So I think giving a little bit more consideration to not just what it takes to deliver a responsive design project, but then also identifying what impact it has on the way that you’re going to operate and function not just from a team or a group standpoint, but identify what some of those impacts are to the broader organization and how you might communicate around them would be another suggestion that I would have.

Karen:

Well Erik, Tito, as a devoted observer of the publishing space, nothing excites me more than seeing a really beautiful responsive redesign for a much beloved publication. So, I want to thank you both for taking the time to come on the show today. I really love your work and look forward to seeing more of it in the future.

Erik:

Thanks for having us.

Tito:

Thanks so much. Yeah, great to be here.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from 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 episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.