Episode Transcript

Ethan:

Oh 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 we are very excited to start this podcast off with one of my favorite people in the world: Miranda Mulligan. Who is recently of the new Northwestern University Knight Lab. But I knew her back when we worked on the Boston Globe redesign together. So anyway, Miranda, welcome. It’s great to have you here.

Miranda:

Thank you so much for having me. And let me just echo that I am so excited to do this with you guys, and I’m very excited about these workshops that you guys are doing, and so thank you so much for having me. I think this is going to be a blast.

Karen:

When we decided to do these podcasts, we were both like, “And Miranda should be the very first one!”

Ethan:

You were part of the origin story, man.

Karen:

So, before we dive into talking about The Boston Globe, can we talk for a minute about our sponsor, Campaign Monitor? Because if you need an email newsletter you should totally check them out.

Ethan:

The reason I’m excited about this is, they do have this new email builder called Canvas that they’ve been talking up quite a bit.

Karen:

What I think is cool about it, is that rather than being based on templates, it actually is based on styles. And so that means that your content can drive the design, rather than being shoved into boxes.

Ethan:

I know for me, at least, designing email newsletters is not one of my favorite tasks. The folks at Campaign Monitor have been putting out these amazing resources for years. They’ve just got a ton of expertise in this field. It’s just amazing to really look to the experts for taking care of some of this stuff.

So Miranda, tell us a little bit about what you’re up to these days.

Miranda:

Okay. These days I’ve been running a lab at Northwestern University called Knight Lab. And it’s a joint project between the engineering school at Northwestern and the Medill School of Journalism and Integrated Marketing and Communications, which is a mouthful. But basically it means that the lab that I’m running is co-owned by two different schools, and we have student fellowships that we offer to the students where they can just come and figure out how to learn how to make the web and how to make media-driven ideas of apps and software and stuff like that. And our student fellows they just come in and they figure out a way to just be amazing.

And at the same time, we also make some pretty simple Javascript, library-driven applications for helping journalists and storytellers tell interactive stories on the web. We have a timeline setting tool that’s very popular called Timeline.JS. We have a brand new, about six months old, bit of software that I would say is probably in about a beta stage right now called Story Map, which helps storytellers tell narratives over cartography or over gigapixel images, and we have a version of it that allows you to do that over video. We’re planning on helping create an authoring tool so that you can tell these types of stories over panoramic photos and stuff like that. So really excited about that. And then we have another tool called SoundCite, which sits on Soundcloud, and basically helps you embed an audio player inline and in text, so you can listen and read at the same time. We have another student who’s working on a before-and-after photo slider. So we’ve got lots of little tools like that that, you don’t really have to know any code, but it’ll help you create an interactive experience that you can then grab some embed code and then put it into your website. But if you happen to know some code, they’re open source and you can grab a copy of it and edit it as you see fit. And it’s been a lot of fun. And I’ve been doing this for a little less than two years now, and it’s been kind of fun watching this project evolve.

Prior to that, I was working at the Boston Globe and that’s when you and I, Ethan, got to work on the responsive project for the Boston Globe. So that’s what I’ve been doing for the past couple of years.

Ethan:

That is awesome. It’s great. You say you’ve been working at the Knight Lab for about two years now, but since I’ve known you, you’ve kind of sat at the intersection of communication and technology. Because like you said, we first met when we were doing the responsive redesign of the Boston Globe. I think that’s what we’re here to talk a little bit about. I think it’s four years on, but I still learn things from having worked on that project, and I’d love to hear a little bit more about how you got started with that redesign. What was your role from the early days?

Miranda:

That project was really fascinating and it’s funny to hear you say that you feel like you’re still learning lessons from that project, and I feel the exact same way. Primarily because of the fact that, if we were totally honest, we really didn’t know what we were doing, right? We were kind of doing a little bit of, like okay, we’re taking this idea that was your idea, and that had been kind of tried out on sites that had small—comparably to major media sites, small amounts of content—and we were trying out an idea against, a design idea against a media website that publishes all the time continuously massive amounts of content. And on top of that had a newsroom of content creators of 200–300 people. I can’t remember exactly how many people were in the newsroom at the time we were working on this.

If we step back a minute and think about how this project came to be, just quickly for those who don’t know a little bit of the origin story behind this. Prior to going to The Boston Globe I had been working for Landmark Communications in Norfolk, Virginia, a newspaper called the Virginian-Pilot. I had been a print designer and kind of the only interaction designer that was on the newsroom side for a couple of years prior to that. What that newsroom had was a split brand strategy when it came to their websites. They had a community portal website called hamptonroads.com and then they had a brand extension website of the Virginian-Pilot, which is the print version called pilotonline.com. I’d been kind of going back and forth between these two websites as well as doing print illustrations and information graphics for several years, and working with the photographers as kind of their multimedia presentation editor of sorts.

And so, when I went to the Globe in 2010, I was hired as their Editorial Design Director. When I came in they were pretty far along in getting approval for starting to design a brand new website for The Boston Globe and prior to that, The Boston Globe content that would run in print. For those of you who don’t know too much about how the history of how newspaper websites worked when they went online, they—essentially the online presence, the dot com presence of newspaper content was kind of an afterthought after the primary revenue driver, which was print.

And so, a lot of the schedules for the way that editors assigned stories and the way that the entire editorial cycle—the way that process happened—was very much geared to the way that stories had to be done and ready to go into print. And so, prior to bostonglobe.com, all of the digital versions of Boston Globe print content, which was seen as being the premium content, had been put into a silo on boston.com as a section or a vertical called Today’s Paper. Prior to my going to the Globe there had been a whole bunch of market research done that gave them a business argument to say “Look, you know what? If we create a premium website experience—premium digital experience for the people that love Today’s Paper on boston.com, we can make a business argument that we can sell this.”

All of these decisions had been made prior to my coming, so when I got there they were about a quarter of the way through designing, or maybe as much as almost halfway through designing, an iPad app for Boston Globe that was very much like everybody else’s newspaper iPad apps. They had started to sketch basic designs or ideas of what a website experience would look like for bostonglobe.com. So that was kind of happening concurrently. So, I walked in, probably my second week there, the VP of Digital Products, a guy by the name of Jeff Moriarty, came by my desk and said, “All right. Well, you know, here are the sketches of what they’ve been looking at. What do you think?” And it looked like—it was like a single screen website experience—very strange. They had been kind of designing what looked like this intention of it being an HTML5, like swipey one-screen website experience, that was pretty much a replication of what was going into the iPad app with some small nuances and differences. And Jeff came by and he slapped down Filament Group’s book, Progressive Enhancement, on my desk and said, “Here. You should read this over the weekend. We’re going to meet with these guys next week,” and I was like, “What?”

Ethan:

That’s some homework right there.

I would say the biggest thing that I’ve learned since this entire project is having that upper-level executive vision and buy-in was extremely rare. That we were allowed a space in which we could begin to experiment and try some different things.

Miranda:

I’m not a web developer. That was so far above my head, that I had no idea. Now looking back on it, Jeff didn’t entirely understand what he was asking me to read either. But being the type of person that I am and the fact that I’d give anything a try, I tried to read it. I would say probably ninety percent of it went way over my head. So that next week—I think it was the beginning of October—was the first time that I met you guys and the guys from Filament Group. We were talking about how we should technically go after designing a new website so that we’re designing something that is really forward-thinking and is not just a website that is just like everybody else’s website, or even just using templates that we just change the color and typography for from boston.com but essentially use the same architecture.

One of the things I’m very grateful for now, knowing what I know now and how hard it is to get something done in a business as big as a media company, to have somebody at his level say “I want you to come up with something that is not reacting to what everyone else is doing,” was huge. I would say the biggest thing that I’ve learned since this entire project is having that upper-level executive vision and buy-in was extremely rare. That we were allowed a space in which we could begin to experiment and try some different things and the fact that that opened the door for us to meet you and say “Hey, I have this idea. Do you want to try it?” He allowed us to experiment with it for awhile. We essentially… every part of the process from that point until when we launched ten months later, was socialized around the building as like “Oh, you know, it’s an experiment. At any point we don’t really like this we’ll pull back and choose a different option.” I wouldn’t say that we weren’t one hundred percent committed until we started writing documentation about things the following February or March. So I don’t know if that gives you what you’re looking for but I think that’s a good origin story for how we got there, got to launch.

Karen:

Miranda, you’re one of my favorite people to talk to about the media and publishing industry. I was like, we gotta get a drink sometime and talk about the New York Times Innovation report. Can we do that?

Miranda:

Oh my god! I want to come just spend a week with you and do a massive brain dump.

Ethan:

We got to keep it PG today guys. But yeah, no.

Miranda:

Well see, here’s the thing. The thing about that Innovation Report is like, I’m glad that they shared it with everybody. I am. I’m really glad that they did. The thing about Snowfall and the fact that the entire journalism industry got super excited (I kept that PG for you Ethan) got super excited about them wanting to replicate that story form over and over again. Here’s the thing, what that Snowfall did internally and the release of the Innovation Report is doing internally for the culture of the New York Times is humongous. The people that are not there and having an opinion about it externally is just, kind of… I mean we might as well spin up a news show about it. It’s just a whole bunch of bloviating and having an opinion for the sake of having an opinion. I know I can be a little harsh about things like this but this is huge for the internal culture of the New York Times. It takes a very long time and a lot of internal buy-in to turn a gigantic aircraft carrier. That said it’s very… I had some specific opinions that I don’t necessarily want to record.

Ethan:

That’s fine, we’ll keep you on the record today. But no, that’s awesome. You talked a little bit about changing the culture, it was really interesting to hear that this responsive redesign at the Globe is kind of an experiment, right? After you guys made that switch in February when you started writing documentation, how did that manifest itself when there was an actual commitment to this project? Were people excited about it? Did you have to do more selling internally? What happened?

Miranda:

So here’s the thing, I feel like the adage or idiom “culture eats strategy for breakfast” is so true when it comes to any business at any kind of scale. And so, when you read some bit of article somebody wrote about how agile software development doesn’t work because once you get to any kind of size or scale then it all falls apart, just means like, no, it doesn’t mean that the methodology or the theory behind that is not… or there aren’t pieces of it that you can’t make work for you.

My mother works for the Disney Company and she called me two weeks ago and said, “You guys use scrum meetings, right?” And I said, yes. And she said, “I’m thinking that I want to learn a little bit more about these scrum meetings. Can you and I schedule a phone call to talk about this? I think I need about an hour.”

Ethan:

Wow.

I think that one of the most interesting things that came out of it, and is continuing to come out of it, is this massive shift in culture that’s happening in these big, gigantic companies, these media companies that have deeply ingrained: this is the way that we make money, this is what my job looks like.

Miranda:

My mother called me to ask me to have a meeting about this because she wants to use some techniques in agile software development methodologies as she’s planning a show at the Walt Disney World company, in the costuming that has to go for that show. And we sat on the phone for an hour and I broke down like, here’s the basics of how you run a scrum, and here’s how you run a scrum board, and here are the terms, and here are the ways that I think it might work for you when you’re doing project planning for these three shows you have happening, concurrently.

So, that being the background, I think that one of the most interesting things that came out of it, and is continuing to come out of it, is this massive shift in culture that’s happening in these big, gigantic companies, these media companies that have deeply ingrained: this is the way that we make money, this is what my job looks like. And when you have a company that’s looking for its core address in the world, its dot com or whatever its web address is, is like its primary address in the world, that realization that happens when everybody starts to see that having this kind of website means that everybody’s job on the digital side basically changes. Not just the web designers. Then when you really start to think about it, responsive web design is just technology. It’s just web design. But all the ways that it causes all these other conversations to happen is really fascinating.

And so when I think back to what I had to do to continue to keep people involved and invested in the success and launch of bostonglobe.com, and the reason we were able to do it as quickly as we did. I’m putting aside the fact that it was a brand new website and so it made some of the conversations a lot easier to have. We weren’t redesigning and having to have arguments about whether or not we keep this widget or not. That conversation began when we started to redesign boston.com. For bostonglobe.com, it was a brand new website. We were able to get it launched very quickly for two reasons. One, we used a constant communication loop strategy. I met with you guys a couple times a week as we were working on prototypes and as we were trying to figure out what the designs were going look like for the prototypes. And I met with you guys a couple times a week to talk about how those were moving along and concerns that were coming up. And then I walked around the Globe a lot and I showed and I held brown-bag meetings pretty regularly for people to come in and take a look at the prototypes for bostonglobe.com and ask questions. What does this mean? Why don’t we have this here? Why is that over there? Does that mean that this doesn’t matter anymore? We had a lot of those conversations internally with both the product side as well as the editorial side. And that constant communication that happened—in fact, I was loosely playing a politician with a stump speech—it did keep everybody involved and on the same page. We were able to launch the brand new website in the time-frame that we had allowed because of this technique that we used.

And so I’d say that yes, we started with some basic prototypes. We had a homepage prototype. We had a section front prototype. We had an article page prototype. And then we had to start figuring out what some of the other pages on the site would be like, and what we can think about in terms of templates. Having those four key areas that we prototyped very early on for many uses, and a regular way of sharing and communicating, this is what it’s going look like. And then when people would ask questions, sometimes I hadn’t thought of that yet and it was really helpful for me to bring it back to our core design team and say “Okay, this came up this week. What do you guys think about it? How might we approach this? I was thinking maybe we put this here, and then it could move over here.” Then we would have that discussion. The weekly check-in meetings, the weekly check-ins that I had with everybody; if it was the editorial team, or the product team, or our core design team, I think is part of the reason why we were able to get it done as quickly as we were. And I think was also one of the reasons that, internally, the business started to realize that the culture was going to begin to change, and that we were going to have to change the way that we thought about working together. And the criticisms that the newsroom has had since, largely comes down to them having to become more engaged with how their website works. When they would say things like “But we want to do this with an interactive graphic. How do we do that?” The graphics team, when they were designing their information graphics, all of a sudden they had to start to think about “What is this going to look like on mobile?” which is something that they never had to think about beforehand. I think that they’re starting to get a little better at it, but they’re not, by any means, the best at really thinking about how to do complicated information design on small screens. I think that the cards approach that vox.com and the little swipey charticles that the New York Times has been doing has probably been one of the most smartest and one of the most scalable approaches to complicated data-driven information design on small viewports that I’ve seen so far.

Karen:

Can you talk a little more about how you think that responsive design changed the way that the design team and the newsroom work together? And I ask just because, in so many of the organizations that I talk to, the relationship between the design and development team, and the content team, and how those teams collaborate is often one that breaks down. It seems like, well at a publishing company, they should really have that together, right?

What responsive, taking this approach did, is it made everybody have to talk to each other in a way that caused… it was like kicking a bees’ nest. It exacerbated a lot of what had been a bit of a pressure cooker for a long time.

Miranda:

You would, right? Let’s step back for a minute and think about our history. The people in the newsroom weren’t necessarily going down to the press and sitting there talking about how the press works, the different cogs. At most, maybe the designers and the people who were thinking about the layout, which were considered part of the production staff. It wasn’t until the 80s and 90s that those people were even promoted to being thought of as journalists or storytellers. They were part of production. They were very far down on the line, the waterfall in which we got things done, I guess. What responsive, taking this approach did, is it made everybody have to talk to each other in a way that caused… it was like kicking a bees’ nest. It exacerbated a lot of what had been a bit of a pressure cooker for a long time, in which the newsroom felt like the website and the product people didn’t really care about, or really understand what their needs were. Not to get into too many details about specific conversations that happened, but it was pretty regular that I would have somebody or an editor on the newsroom side say “Well, they don’t really care about the story, they’re thinking in terms of ’How can I turn this into a template?’ and they don’t really understand what we’re doing as storytellers.” Why that typo there matters, and why using this word matters over that word, and why we want to be able to use certain kind of glyphs and accents in our headlines, why we need a little bit of flexibility to say when something gets done.

A lot of that has to do with, it’s still a very print-focused business. We had a lot of support for our presses, we had a lot of people working in the press room. We had people working over there. The teams that were handling digital were a lot smaller, I mean, quite frankly. The shift that’s been happening for the last ten or fifteen years as we start to figure out how to make money and support our businesses on the web versus supporting our business through print—that shift of needing to have bodies on one side or the other and that conversation got very uncomfortable. And then on top of that, journalists like to be people who know things. They don’t like to look stupid. If you think about it, most humans don’t like to look stupid, right? So, having to go and say “I don’t understand what you mean” by something is a real human thing that, for some people that’s easier to say than for others, especially if you’re somebody who’s considered a boss.

This process happened because it was becoming very obvious that taking this design approach was going to change the way that not only the web devs were thinking about writing their code, but also the way that the newsroom was thinking about doing their storytelling. The fact that they didn’t have to think about how they were writing their stories is being segmented into something called—and this is also second class citizen language—a blog somewhere on a website. If any columnist was to have their own piece of content that published web-first, it was still siloed off into what was called a “blog” like structure. Now with bostonglobe.com, it didn’t matter. They could publish stories immediately—that there was an editor and there was a group of content producers that were around that were going to be publishing 24 hours a day. They would have a little bit more support in that area.

The content producers also were really worried all the time about the line length of their headlines. They couldn’t figure out a way to design their homepages so that all the headlines would align perfectly in that kind of layout perspective. And so, there was a lot of little weird conversations that happened around all those areas that it just kept on bubbling up to the top. It was because the way that we had just not really understood a whole lot about each other’s jobs became that kind of uncomfortable tension on a regular basis.

Ethan:

For those of you who may not be familiar with a lot of the guts of the project, Miranda was kind of a champion on The Boston Globe side, and the Globe had hired two Boston-area firms: Upstatement to oversee a lot of the creative and visual direction for the new site, and then Filament Group, who are an interaction design firm to actually realize that design, and I was hired by Filament Group a little later on in the project. But I’d be interested to hear a little bit more, Miranda, from your perspective, about how managing that kind of two-headed design team worked, and some of the nitty-gritty about how you actually communicated some of the progress internally at the Globe. I mean, you mentioned the brown bag lunches, but you know, how did you actually act as that like magical translation layer between the Globe and the designers?

Implementing a responsive design, and any kind of content strategy for that matter, is a business decision. Every single time you hear the term strategy, it’s a business decision.

Miranda:

You know, there’s—and I think the two of you may at some point or another heard me do this before—but a lot of times I really love the show, The West Wing. Not so much for the reason that’s it’s about the West Wing or American government politics, so much as there’s a lot of scenes in which they apply to life for the way that a business functions and stuff like that. And so, I kind of think it might be fun to use this allegory. The story is kind of an allegory of the way things… the culture shift that happened. Harkening back to my reference to “culture eats strategy for breakfast,” the culture of the Globe was that a stakeholder would make a request and file a request via our ticketing system if it was actionable, or would ask to have a meeting to talk about some kind of product request that they wanted to make. And because the editors didn’t really understand how the business decisions were made and how the product team worked, more often than not the requests that they made were just kind of fall flat, which makes me think of this episode in The West Wing.

I think it was like the fourth season in which Mrs. Bartlett, the First Lady, Abbey Bartlett, she learns that if she wanted to have an agenda and if she wanted her agenda taken seriously, she was going to have to begin to understand how the business decisions got made. In the beginning of the episode, there’s this scene in which Josh Lyman, who is one of the core advisors to the President, is sitting in a budgeting meeting with the First Lady’s Chief of Staff, which happens to be her cousin. They’re talking about what the budget’s mission was and how everybody was happy with how much money it was. And the nephew, his name was Max, says, “Mrs. Bartlett was promised like 12 million dollars for immunization education funds at the CDC and you’ve got the full $139 million for vaccines in here. Shouldn’t they be earmarked separately?” And Josh says, “No, no, no, we gave away those $12 million.” And Max, the cousin, or the Chief of Staff is like, “You’re kidding me.” And Josh says, “No, no, no I’m really not.” And Max is like, “But the First Lady, the First Lady, the boss, she asked for this. No one notified me that this was no longer even on the table or even negotiable.” And Josh says, “Well you get a memo daily.” And Max says, “I get 35 of them. You know I can’t really get through all of them.” And Josh says, “Oh well, that’s your problem not mine.” And kind of walks away. And so later on, a little bit later in the episode, the First Lady comes to visit Josh and she says, “You outwitted my Chancellor. You bested my swordsman.” And Josh says, “I haven’t mentioned this in a while ma’am, but I think that you and the President are a perfect couple.” And Abbey’s like, “I really wanted that $12 million.” And then Josh says, “Me too, but at the end of the prize fight you look around at the guy who’s dancing around and that’s the person who won.” And Abbey says, “But why can’t my agenda get anywhere in these negotiations?” And Josh says, “Well why do you think that is?” And Abbey, the First Lady, she says, “Because you’re a political snob who doesn’t think that the First Lady belongs on the starboard side of the building.” And Josh just says, “Wrong.” And First Lady Abbey, she says, “Why am I wrong?” And Josh says, “The President and Leo make their decisions by listening to and participating in vigorous debate. This isn’t school. I work with people who can play.” And Abbey says, “Are you comfortable being this condescending to me?” And Josh says, “Yes, of course I am.” And not understanding why, Josh says, “Because I won. I always won and you came here to ask for my advice. And Max, your nephew, he’s an idiot. And he doesn’t understand the budgeting process, he doesn’t understand the committee structure, and he thinks decisions are made in meetings.”

And I love that scene because that is exactly how business decisions get made at major media companies. People who think that they file a request and that’s the way they get things done, don’t understand how business decisions get made. Implementing a responsive design, and any kind of content strategy for that matter, is a business decision. Every single time you hear the term strategy, it’s a business decision. And the thing that editors and people on the newsroom side don’t really understand is that element of things. And on the business side, they oftentimes don’t include the editors enough in this process.

So one of the things that was interesting about my reporting structure, when I was at the Boston Globe, is I not only managed a team of editorial designers but I also managed a team of product designers, which meant I sat at the intersection of both the newsroom and the product side of things. I reported the VP of product development and I reported to a managing editor in the newsroom, which meant I was constantly this mechanism for these two sides to talk to each other. It was kind of stressful and it was kind of hard, but it was one of the reasons why we were, everybody started to understand how this was going be changing, what were doing and how we were going at things. And as I started to understand how business decisions got made, because I didn’t know this, I started to figure out a way to get myself in the meeting before the meeting, and to get myself in as being one of the advisors to how we were going to approach things strategically. So if I wanted—or the managing editor wanted—to campaign for some certain kind of approach that should allow something for them to have on the editorial side, I could start to socialize that and talk about it very early on so that the first time this idea was introduced was not in the meeting in front of everybody including the publisher. That we had started socializing this idea for awhile prior to that meeting and it made things go a lot smoother, there was no surprises. You don’t really want to be in a position in which we’re arguing about things in front of the publisher, in front of the executive editor. You want to have everybody on the same page prior to that meeting. This was a fascinating process for me to learn. I definitely think that it had big implications for how… when you’re approaching a project that’s going to be as big and have as many implications as a responsive website for your business, this is one of those things that has to happen.

One of the hardest parts is when you get hired externally to come in and figure out how to design it. You’re hired by a media company to come up with these prototypes and to come up with some designs for the company to adopt. If you don’t have somebody internally who really understands what you’re trying to do and can begin to socialize some of those ideas, then when you come and present it to people, you’re just presenting hoping that you are doing a good sell. But any time you’re trying to try something new and try something a little innovative or really pushing a company to try something that in the long run is most likely going to be best for them, if you’re just doing it in a series of meetings in which you lob something over the fence and hope that they bite on it, I mean, that’s fishing. That’s not really selling something and helping them help themselves. Does that answer your question, Karen?

Karen:

Yeah, I could not have said it better. This has been fantastic. Really.

Miranda:

Really?

Karen:

It is always a pleasure to talk to you. I think you have such a ground level view of some of the challenges that so many organizations are facing today and it’s like, you were way ahead of them. You’ve already been there and done that.

Ethan:

Yeah, yeah. And you’re going as Josh Lyman for Halloween apparently, so.

Miranda:

That character is probably one of my favorite characters in all of fiction. I just love that character so much.

Ethan:

No doubt, seriously. Awesome. Well, Miranda, thank you so much for taking some time to talk to us today. It was good to hear your voice again and yeah, just great to chat with you about the Globe one more time.

Karen:

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

Ethan:

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’re also planning to offer these workshops to the public, so please go to responsivewebdesign.com and let us know that you’re interested.

Karen:

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.

Ethan:

Thanks again to our sponsor, Campaign Monitor, and we’ll be back next week.