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 are bouncing out of our chairs with joy. We are here today with Jessica Huseman and Rob Weychert, who are going to talk about The Chosen from ProPublica. Welcome, thank you!

Jessica:

Thank you.

Rob:

Thanks for having us.

Karen:

But first! Some exciting news from our sponsor, Gather Content. On Thursday March 23rd between 4pm and 6pm GMT (UK time) or 11am to 1pm ET, they’re offering their amazing masterclass called Content strategy and delivery for website projects. 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. Managing the editorial processes in a responsive redesign is difficult enough, so make your team’s life easier, by learning from the experts in this masterclass from GatherContent. Go to https://gathercontent.com/masterclass to learn more and sign up. Thanks, Gather Content!

So, I would love it if both of you would introduce yourselves, tell us a little bit about your role at ProPublica, and perhaps just give us a little bit of background on what “The Chosen” is.

Jessica:

I’m Jessica, I’m a senior reporting fellow at ProPublica, and I cover lots of things there but one of them is the Trump administration—and this was not my idea, this was Rob’s idea, so I will let him talk about that. But I was brought in to do the text of the cards and keep them up to date. But Rob was sort of the brains behind the machine here.

Rob:

Hi, I’m Rob Weychert, I’m the editorial experience designer at ProPublica, and I’ve been there for about a year and I’m relatively new to journalism, so I’m kind of learning every day. But basically what I handle at ProPublica is art directing and working on production of stories day to day, and also working on the site design itself, which we’re slowly overhauling and bringing further into the twenty-first century.

Karen:

So, give me a little bit of the background on how you came up with what you colloquially refer to as these “cabinet cards.” When you were conceiving of this, was there any doubt or debate that this would be responsive?

Rob:

No question that it would be responsive, just because everything that we do at ProPublica has that in mind. But in terms of the concept, basically after the election—which, you know, I think we all remember was a fairly contentious election—it was pretty clear that a lot of what Trump was going to be doing was going to garner a lot more scrutiny than presidents had in the past, partly because of his own inexperience and also because it was clear that a lot of the people he was going to be bringing into the government were also inexperienced or otherwise at odds with the goals of the departments that they were going to be appointed to. So, we figured a lot of people who otherwise wouldn’t be paying very close attention to this stuff would this time really want to know what was going on. So, we wanted to basically provide a quick overview of all the appointees and have sort of a crash course for each one, with info relevant to their new position, and then link to deeper reporting with a focus on accountability journalism. Then as new appointees or nominees were added, we could update in real time, and then as confirmations recently have really started to pick up, we’re updating those in real time as well.

Ethan:

Rob, something you mentioned before about ProPublica and everything they think about digitally is responsive in some way… When you were planning the designing and execution of these cabinet cards, how did you think about what the mobile experience was going to be for this feature, or the desktop experience? We talk to some publishers who struggle with information density and layout and thinking about the small screen versus the widescreen. Did you find you had to compromise on the scope of this thing when you were focusing on the needs of the mobile user?

Rob:

Not really, actually. I think the mobile experience really kind of drove the design of this thing more than anything else. When you talk about information density, one of the things that is unique to this project is it’s supposed to be a quick overview for somebody who doesn’t have a ton of time to really get in the weeds with who all of these people are that we’re covering. So as I mentioned, each card is sort of a crash course, but in aggregate it gets to be kind of long. All told, it’s maybe around 3,000 words. There are about eighty words per card, there’s about thirty-five to thirty-seven cards at this point. So, individually each card is pretty short, but all together it can seem like a little bit of a slog if you just want to kind of get in and get some quick information. So, the card metaphor came about basically to sort of obscure the fact that there was a lot of text, and let you kind of dip into the parts that were most interesting to you. It’s funny, actually on mobile, what’s nice about it is the whole trading card metaphor, when you’re holding your phone and looking at the page, it’s sort of like holding an actual trading card in your hand. So yeah, I think the mobile experience really kind of drove the concept more than anything else.

Karen:

I’m very curious, as you’re working in a fast-moving environment, how did you plan and scope the amount of work that something like this would take? How much time did you give yourselves to turn something like this around, and how much of it was designing and prototyping and getting everything written? How do you know how long that’s going to take you?

Rob:

Well, from my side—and then I’m actually curious to hear a little bit more from Jessica about this one because we haven’t spoken much about our individual strategies, but we’ve managed to work really well together on this, I think. So, I’m curious to know a little bit more about how she goes about it. But from my side, it came together fairly quickly, and more quickly than I probably would have liked just because I tend to get a little too precious about things. So, I’m actually thankful for the fact that things move pretty quickly in the journalism world, and it kind of forces me to push stuff out before maybe I’m totally comfortable with it, which is good, it gets me away from my perfectionist impulses. But planning this one was tricky because it wasn’t entirely clear at the outset what the scope was going to be. Was it just going to be the top-level cabinet people, of people in cabinet-level positions and other top positions? Were we going to do undersecretaries? How deep was this thing going to go? So, it was a little tricky to plan in that regard.

Jessica:

This was a little bit of an interesting editorial task because you would think that eighty-word snippets about these people—and our goal for the editorial side of this was not necessarily to summarize everything that they’ve ever done but to highlight the best reporting on each person so that you could dig as deeply as you wanted to on each individual cabinet member. Explanatory blog posts and quick news pieces that might be relevant to their background are really not something that ProPublica does, so the goal of this was to aggregate reporting from across news organizations into one little snippet of a card. They’re only eighty words long, but they take a really long time. The amount of research and reporting that went into each eighty-word card… I mean, for the more complicated ones, it was upwards of three hours, reading and making sure that I was saying things clearly in a very short amount of time and making sure that I’d fully read all of the pieces I was linking to so that ProPublica could vouch for them. So that, at the beginning, became a little bit of a slog. There were like four solid days where I was writing nothing but cabinet cards. But this administration, I guess perhaps not shockingly if you’ve followed the pace of it generally, seemed to nominate the cabinet members at a pretty slow pace, so my time was budgeted out for me completely unintentionally in a lot of ways. So, that was kind of a blessing in disguise.

But I agree with Rob, there was a lot of discussion there in the beginning about how in depth we wanted to go. Did we just want to do cabinet positions? Did we want to do positions that were cabinet and cabinet-level? Or did we want to do all of his top advisors? I think that with the structure of Trump’s White House, given the oversized role that people like Steve Bannon and Steve Miller and Jared Kushner are playing in the day-to-day, I’m glad we did as many cards as we ended up going with because I think that they’re really helpful. But it was a lot there at the beginning and then it kind of tapered off as it went.

Ethan:

Rob, I want to follow up on something you mentioned earlier about actually getting started with the design of this. Specifically, I’d like to hear a little more about your design process. How did you actually start figuring out what the cabinet cards were going to look like? How did you start fleshing out the UI?

Rob:

Well, the strategy was based on once we decided we were going to go with the trading card metaphor, the idea was a sort of tiered interaction. So, there’s sort of three levels of interaction when somebody is looking at this. The first is a quick scan, and on the front of the cards you get a quick look at, okay, we see everyone’s faces, their names, their titles, their departments, and the status of their confirmation. When we see all of them in aggregate, we get a little bit of an indication of the cabinet’s overall diversity, which is interesting as well. Then once you decide you want to learn more about somebody, you flip the card and you read, and on the back of the card you learn more about the appointee and their relevance, or lack thereof, to the job. Then finally the third level of interaction is basically acting, and from there you can either follow links to learn more about this person or you can share their current card on social media or wherever else.

So with that interaction process in mind—it was actually an interesting project because it was sort of an integrated web and print project, because these cards are emulating actual printed trading cards, but they’re meant to live on the web. So, I needed to design them like I would a print trading card but in a way that would work for the web. So, that meant that they needed to scale proportionally, which the web doesn’t always do so great, and I also wanted to keep the text selectable and everything else—I couldn’t just make them images, or whatever. What I wound up doing was basically just using the same kind of semantic markup I ordinarily would, and from there, using absolute positioning percentages—and this was the real trick, was viewport units, which I hadn’t really used much before. The viewport units ordinarily would be used for display texts for big headlines and that sort of things; using them for body text doesn’t often make a lot of sense, but in this case it did because it allowed me to keep the text size relative to the size of the card itself. So, it would behave like a printed card even as it was having to adapt or respond to any different kind of screen size that it might appear on.

Ethan:

That’s really awesome, Rob. Would you say that your process was a little bit more focused on prototyping than it has been in the past for this feature? Or did you still use some traditional applications and tools to make this happen?

Rob:

I would say, for overall layout, I used the same processes I would otherwise. And actually, that used a semantic grid generator that I built in Sass, which hopefully we’re going to open-source soon, which I’m really proud of, and was built over the last year at ProPublica and that we’re using for a lot of our projects going forward. But yeah, for the cards themselves, it was definitely a sort of prototyping as-you-go kind of thing. It was just sort of massaging the prototype until it was ready to publish, which, again, was going to be sooner than I wanted it to be. But ultimately I think it worked out well.

Karen:

Jessica, let me follow up a little bit more on the editorial and content direction for these cards. When you’re thinking about producing a standalone piece like The Chosen, how do you think about how it is going to connect with the rest of ProPublica? And even when you’re thinking about the content management system that might support this, is this something that is genuinely standalone, or are you thinking of it as something that is supposed to intersect and connect back to everything in the rest of the site?

Jessica:

Yeah, I think that ProPublica is this really unique editorial outlet in the journalism world. We very rarely do breaking news, we very rarely do short pieces, and so in a lot of respects this was really unique. But I think that the way that this fits into ProPublica’s overall editorial structure is that it gives you broader context for the smaller things that are happening. So, you can look at this, as Rob said earlier, and see the diversity in his cabinet immediately; you can look at this and see how few of his cabinet members have been confirmed so far pretty instantaneously.

This fit in, in a lot of ways, with a lot of things that ProPublica had done before that hadn’t been so design intensive. We’ve done lawsuit trackers during the election, of all of the election lawsuits that were going on, so that you could get a view of how the election was playing out in that capacity throughout the election. We’ve done voter ID tracking devices throughout the last year. So, I think this kind of fits in and allows ProPublica to do breaking news in a way that gives our readership broader context, which is really important to ProPublica.

These cards are pretty time intensive, and we updated them as soon as something huge happened with one of the cabinet members. I think one of the things that became a little challenging at the beginning when we were thinking about these cards was that there were quite a few people that Donald Trump had plucked out of the private sector. I’m thinking of Andrew Puzder and then a couple of others who had done quite a lot in the private space but did not have a hugely public-facing life. So, it was kind of difficult to find really excellent reporting on them or their companies because they just weren’t very public people. As soon as we did find out things about them as the confirmation process kind of moved along and news was being written about them, we could update them, and then ProPublica did some really interesting reporting about these people as well.

I think that’s where ProPublica really shines, is that on the day that these people were announced, ProPublica wasn’t going to come out with this breaking news feature explaining who they were and giving their background. But after they had a couple of weeks to file records requests and make connections to other issues, they were able to write really in-depth pieces on things that people wouldn’t have thought about initially when they considered these cabinet picks, and so we were able to integrate the reporting that we were already doing back into the cards. That’s where this really fits in in terms of ProPublica’s reporting style. But I’m glad we’re doing things like this that are more responsive, especially in the way that Rob designed them. The initial reception of them was really fantastic I think, and I think that’s really thanks to how interactive they were and how much information you were able to get in such a short amount of time by reading them.

Ethan:

Rob, I’d be curious to know, as you were designing and building this feature, did you have to focus on device testing at all? And if so, how did you manage that?

Rob:

With something like this that came together fairly quickly, there wasn’t a lot of specific targeted device testing. So, basically the strategy to make sure that it would work as well as it could on as wide a variety of devices as possible was basically using a lot of techniques that I already knew would work well in that regard, and then for the newer stuff it was consulting caniuse.com and otherwise just sort of holding my breath. Like, honestly, after this thing published, I was absolutely certain that I was going to get a deluge of messages of people telling me that it broke on their device, or that it didn’t work, or they couldn’t read it, or whatever else. We had virtually no problems with that whatsoever, which was really encouraging and it let me sort of take a deep breath. But yeah, there wasn’t any specific targeted device testing beyond the stuff that was immediately available to us, and we don’t have a device lab or anything.

Karen:

This has been fantastic, I’ve really appreciated both of your perspectives on bringing something like this to life. I’d be interested to hear from both of you, what advice do you have for other people that might be embarking on a similar challenge in their own organization? Maybe other news organizations, or even just other companies that are looking to build a standalone feature in a short amount of time—what advice would you offer people?

Rob:

Number one, have a good editor to work with. That’s pretty elementary and we’re really lucky in that regard. Eric Umansky, who is the editor on this project, has really been the one who was most responsible for it ultimately seeing the light of day and being successful.

Jessica:

Why don’t you talk about the photo selection? I think that might go interestingly here. And that initial criticism we got where people were like, “These photos are biased!” [laughs]

Rob:

Sure. Yeah, I think that’s interesting to talk about. It’s maybe not for this specific question, but if you’ll indulge me, that was an interesting bit of the process. Once we knew we were taking this approach and we needed to find photos of all of these people, a lot of them were really easy to find, these are high profile folks, and then some of them were people that nobody had ever heard of and it was kind of tricky to dig up photos. So you’ll notice that there’s a little bit of an inconsistency with regard to—a lot of them are photos of them sort of “in the wild,” speaking, or something like that, and then some of them are more just like actual professional portraits, that sort of thing. But in any event, we wanted to choose photos that didn’t betray any kind of viewpoint, or opinion, or bias, just, “Here’s a photo of this person doing what they do.” I thought we had done a pretty good job of that, and I still do, but we did actually hear from a couple of people who felt that we were going out of our way to make these people look bad. So, it was sort of an interesting lesson in subjectivity is something that you cannot escape, and regardless of how hard you try to make something a certain way, people are going to see what they want to see.

Jessica:

Yeah, I think the advice I would give is also a little bit about bias. I think it’s surprising how much opinion you can pack into eighty words, and the original round of cards that I had written, I think there were like eight in the original go-around—my editor made me rewrite all of them. [laughs] Because when I initially conceived of this, I thought the best reporting on these people is just definitionally is going to be negative reporting because there are very few news reports that I would consider to be really good and worth reading if they’re just kind of like, “Look at how amazing this person is! They’re so great and they’ll be wonderful!” It might have a lot of background detail, but it’s not going to be particularly hard-hitting or informative in terms of what you should know about this person who might be one of the most powerful people in the country. So, I originally wrote the first eight cards and they were essentially all negative, and my editor was like, “This is not right. You need to balance these out a little bit more.” So, I had to kind of weigh the good against the bad and pick interesting facts to balance the bad ones just so that people weren’t immediately turned off and then just chose not to read the rest of the cards because they perceived that we were biased against the cabinet—which wasn’t my original intention, but I think was definitely how it read. So, I would advise people who are writing things that are this short but this information dense to be aware of that.

Rob:

I’ll say one other thing too about a standalone project like this. Just because it’s an individual thing, it also deals with breaking news, and so it’s something we knew we would have to be updating with some regularity. So, it was hard to tell exactly how to be ready for that. That’s one bit of advice I would give, is to sort of be ready for it to be a mess, at least at the outset, and then give yourself opportunities to make it better as you go. For example, we did not anticipate, somehow, that people immediately would want printable or printed versions of these cards, and that was all anybody would talk about basically as soon as we put this thing out, like, “Oh, can I get a printed version of this? Can I trade it with my friends?” or whatever. We just hadn’t even thought of that. So, we fairly quickly made a downloadable PDF printable version that you could download, and that has sort of gummed up the production process going forward, because now it’s like any time there’s an update, I need to update the web version but I also need to update the print version, so we’ve had to come up with processes to make that as efficient as we can, and it’s still not ever going to be as efficient as I want it to be.

So, definitely something to keep in mind when working on something like this is that you’re going to have to make some time to maintain it in the future, and maybe more time than you want to. This has become a little bit of a labor of love for me, just because our design and production team is so small and I’m often pulled in a number of different directions on any given day. So, a lot times I’ll have to sort of work on this on my own time, which I’m happy to do, but it’s that kind of sacrifice that’s often necessary for a project like this.

Ethan:

Well, that labor seems to have paid off beautifully. Rob, Jessica, this has been a wonderful, wonderful chat. I can’t thank you both enough for coming on the show. Karen and I are both ProPublica fan people, I would think it’s safe to say, and we love the design of this feature. Can’t wait to see what you do next. So, thank you.

Jessica:

Thank you.

Rob:

Thanks so much for having us.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process.

If your company wants to go responsive but you need help getting started, Ethan and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is 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 for listening, and we’ll be back next week.