Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Episode #45: Seth Blanchard
140 Plays9 years ago
I’m pleased to be joined by Seth Blanchard this week on the show. Seth is a Senior Developer on the engineering team of the graphics department at the Washington Post. He helps develop new story forms and smooths development process...
The post Episode #45: Seth Blanchard appeared first on PolicyViz.
Recommended
Transcript
Introduction & Sponsor Message
00:00:00
Speaker
This week's episode of the PolicyViz podcast is brought to you by the Summer Executive Institute at the Georgetown University McCourt School of Public Policy. The McCourt Executive Institute offers short courses that are specifically designed to enhance key skills.
00:00:15
Speaker
Small classes and hands-on projects allow you to engage with expert faculty at Georgetown in a format that is convenient for busy professionals. To learn more and to register, please visit mccourt.georgetown.edu slash exec-ed slash shortcourses. Enhance, energize, and expand your professional skills this summer at the McCourt Executive Institute.
Audience Engagement Project during Pope's Visit
00:00:49
Speaker
Welcome back to the Policy Viz Podcast. I'm your host, John Schwabisch. I'm happy to be joined today by Seth Blanchard, a senior editorial developer at The Washington Post. Hey, John. How are you? Good. How are you doing? Good. Thanks for coming on the show. Yeah, really happy to be here. We have a lot of stuff to talk about. Yeah.
00:01:04
Speaker
So we've been looking at it. It's been busy. You've been seriously busy. Seriously busy. Doing a lot of stuff, both front-end graphic stuff, back-end stuff, but we'll probably concentrate on the front-end stuff because you're doing some, I think we have some really interesting things in the area of sort of audience engagement when it comes to the post. Why don't we start talking about this piece you shared, and I'll of course post it on the show's website on the Pope's visit. You want to start by sort of describing the idea of what you're doing here and how you thought about engaging the audience in kind of a different sort of way?
00:01:32
Speaker
Yeah, so when the pope came to visit the United States, we wanted to do an audience engagement piece or a piece where people could contribute their thoughts. And to us, the idea was that this pope has been pushing the Catholic Church in a way that popes previously haven't been in. So we worked with religion reporter to kind of figure out like what maybe are the main issues he talked
UI Challenges with Interactive Sliders
00:01:53
Speaker
about.
00:01:53
Speaker
She identified family poverty and climate change. And so we came up with a quote of his encapsulating those stances from his speeches and the written works he's done. And then we asked people to, on a scale, like just a web slider, to say how much they agreed or just disagreed with the Pope's stance on that issue. And then after they did that, they could answer a form that said essentially,
00:02:19
Speaker
What do you think is the biggest issue facing the church today? You could categorize it any way you want it and then, you know, write some text and if you want to give some information about yourself, your religion and your age, essentially. So this is like the comments portion of any page, but sort of just built and it looks much different, right? So here we have sort of, I guess, little pills, little boxes of the quote with the person's name, religion and age, but it has a different feel to it.
00:02:44
Speaker
Right, it does. It does feel different than comments. We tried to really bring people's responses into focus around the things that we find interesting or different about the pope or that, you know, are contrasting to previous popes and that are important to people in their daily lives like the issues that we brought up are typically hot or button issues and things people can be divided on. Yeah. And yeah, so this is mostly
Iterative Steps to Enhance User Engagement
00:03:08
Speaker
an American audience because he came and saw New York, DC, Philadelphia. Right.
00:03:14
Speaker
After it in the Caribbean so now let's talk about the slider a little bit so we've got these three Sliders yeah, pretty standard sliders so now we're looking at them right now, and they're sort of the darker colors are
00:03:27
Speaker
tend to be towards the ends, but that's not exactly how the thing kind of started, right? Right. Yeah. So the form element we gave the users was a dial that you could just slide up and down just like you would selecting anything in a range from zero to 100% agreement. And it was lighter or wider towards the side of disagreement and darker and brighter towards the side of agreement. We were hoping it would indicate to people
00:03:52
Speaker
You know, pick anywhere you fall on this spectrum of agreement with the Pope. Like, we understand these are issues and he has nuanced takes on them and your response to those might be nuanced. So, we wanted to give you the full range of agreement that you wanted to agree to. When you go to the page now, you're only seeing the results. You're not allowed to enter any brand new data. And what we noticed when we turned it on to start with, giving people the full range
00:04:17
Speaker
Actually encourage them to just choose ranges on each end so they would either fully agree or fully disagree with the Pope even though The UI element allowed them to choose anything and I wanted yeah, right. Okay, so then Was your first thought like
00:04:39
Speaker
We messed something up. You want to always double check that you're getting the data back that you think, that your queries are running like you think. The response to this was really big. We were seeing really good numbers to it, especially for a more localized graphic specific to DC. We launched it the week he came to DC.
00:04:57
Speaker
But yeah, we were wondering if something was wrong and then we decided that we would go back and add tick marks to the slider to show people you can leave it anywhere in the range you want and encourage them to drop it on the tick marks. And as people continue to visit the site and use the sliders to record their answers, you can
00:05:16
Speaker
See where the tick marks are kind of appearing on the bar. So like if you go to the site now You'll see them and you'll see darker bars along the scale Essentially where the ticks were and that's not because people couldn't choose anywhere. They wanted to go. It's because the UI Influenced their decisions by not giving them any guidance in the beginning. We thought we were making it easier
00:05:35
Speaker
when in fact it appears that it was harder for people to use that. And then adding the tick marks sort of, it's like rounding, right? So as you go forward, think about other projects and the sort of general like, as you do these sorts of projects, is this how you iterate on the UI? You're just trying to pick out like, this was too easy. This is too hard. How do we? Yeah. So for social UI,
00:06:00
Speaker
for when we want to get responses from folks, the thing we're trying to do is boil it down to the lowest thing we can get people to engage in. So what is the least thing we can ask of the users, ask of our readers, and get responses back that are meaningful? So we want you to participate. We're interested in what you think.
00:06:20
Speaker
We also know that filling out forms, especially a blank comment box on the web, is intimidating and not that helpful. And a lot of people aren't going to volunteer for that. And so by allowing people to do something anonymous and ideally really fast on your phone, you just touch where you want it to go. It's like one mouse click and drop. We've minimized the friction between the user providing a response to us and getting valuable feedback from our readers.
00:06:49
Speaker
We look at that and then after a project like this is done, we'll talk about what went well, what we could improve for the next time, and then we'll take that and then feed it into the next project.
Mobile vs Desktop UI Design Differences
00:06:59
Speaker
When you're doing projects like this, how are you thinking differently between the desktop experience and a mobile experience?
00:07:06
Speaker
Yeah, so this one translated really easily between them. There is some testing that, you know, obviously some testing will be between the different breakpoints and screen sizes. On the desktop, when you answered it, when you first came to the site, when there were sliders here, the two right questions were grayed out and the left question was highlighted. And then as you answered it,
00:07:28
Speaker
you would go on to the next question and it would highlight the next question and you click to encourage people to move through and answer the full range of questions. On mobile, when you answered, we hit one and showed you the next one. So it was very easy to just click and go, click and go, click and go. And on mobile, we try to make things even smoother than desktop because the places people use them, they usually don't have their full attention as you might at your desk at work.
00:07:53
Speaker
or at home when you're sitting around looking at your computer. When I use my phone, it's waiting in line for something, it's while watching TV and so you really need to make it jump in, jump out, jump in, jump out, really simple.
00:08:10
Speaker
make the interaction easy. And so this lends itself well. Sometimes we have a harder time adapting our projects to one screen size or another, either starting with mobile and then scaling to desktop or starting from desktop and scaling to mobile.
Feminism Project: Engagement Strategies
00:08:25
Speaker
I want to move to another project in a moment, but when you're building these sorts of projects, you are asking the reader to answer some question, put in some information, and then they get to see themselves next to everybody else. Do you think that's an audience engagement strategy that people should be trying more and more? We saw a little bit of it last year, the New York Times, this one on drawing this.
00:08:46
Speaker
Education line when we've seen a few of these sort of popping up But do you think that's where things are headed in terms of audience engagement to me? It feels like a really good approach a lot of times when especially when I see a map Yeah, I immediately go to where I live. I see what it's like where I live Yeah, and so to be able to place yourself in the data allows you to maybe understand a little bit better And so if on this slider you agree to the Pope and you see that everyone else agrees with the Pope That could be of interest to you because maybe people in your social circle don't or people you follow on Twitter or Facebook don't
00:09:16
Speaker
Agree with that and what their public statements are but maybe a large portion of people you interact with do and so it's it's interesting to take yourself and then kind of move from there to the place where the majority is or where you know, maybe a part of the majority of
00:09:32
Speaker
sits and I think it lets readers find themselves in the data and you know we're generally selfish as people and it's easy to like look where am I yeah where am I yeah where am I so we try to do that when we can I like it it when I try the graphics that are like it I'm interested in yeah and then if like my friends do it to our co-workers and it's you can compare yourself.
00:09:55
Speaker
Very cool. Let's talk about this other project we're looking at. This one is on feminism. And again, a sort of different engagement strategy, I think, on this one. So this is Betty Friedan to Beyonce. Of course, I'll post it on the site. But you want to talk a little bit about the strategy you use here to get folks to interact and engage with the piece?
00:10:14
Speaker
Yeah, so this was a package of five stories along with some other stories that we had run on the site all at once. And as we were involved in reporting this, the thing that kept coming up in the reporting meetings was how much of a discussion around this topic there was without as many places to hang your ideas on as there are in other issues. And so the story was actually putting yourself
00:10:39
Speaker
in the discussion as much as like where we are in feminism today. And we wanted to provide the same service to the reader as we had when we were doing the reporting. And so we built a similar sort of thing where you could answer a poll. This one was specific to each article. We wrote a poll question and a response type specific to each article. So as you were reading, they were placed
00:11:00
Speaker
in a place in the article where the article made sense to ask a question about someone like, how do you feel about this issue you've read about a character? Now, how do you feel
Guided Discussions in Comment Sections
00:11:08
Speaker
about the same issue? And then from there, we encourage you to jump into comments. And so you can see poll results. You can see what people have commented on already.
00:11:17
Speaker
And the other thing that we did is we instead of having comments at the bottom as normal on our site, we put it in a side panel that you can slide out over top of the article. It doesn't take you away from the article and allows you to engage in comments without losing your spot. And this again was to remove friction from people participating in our discussion. We wanted to also encourage good comments and good discussion on a topic that typically doesn't engender that.
00:11:44
Speaker
women's issues and feminism online are typically not a nice place to be in comments and so in this case we try to take some steps to encourage people to comment appropriately. I think a lot of that was priming comments with a question so we asked you to follow up on the poll that you just answered with a comment in response to that poll question and that really helped folks answer comments in a way that on a topic that is
00:12:11
Speaker
pretty divisive, was very civil, and we got a lot of interesting responses out of it. So I think these are some of the strategies we used when we built this and designed this. Yeah. I mean, you sort of alluded to it. It's like the comment sections of basically every website it's like.
00:12:26
Speaker
the worst part of humanity, right? So it seems like you are trying to build, not necessarily positive discussion because people can disagree obviously, but more of a constructive area people can discuss. So is there a process in which you are curating, we've seen recently this big Guardian project analyzing the comments of the Guardian newspaper,
00:12:47
Speaker
Are you curating comments and is it more about what you just mentioned sort of guiding people through having this more constructive thing or is it just like
00:12:58
Speaker
You're just kind of throwing stuff at the wall and trying to see what sticks at this point. Well, I think we have seen better responses when we give people a guided discussion to have and when our authors are involved in the commenting process or when we can highlight comments that we say these are good. People mostly comment for the community and for feedback from other people on the internet. And that's a large portion of the reason why people behave so badly is because
00:13:26
Speaker
they might not be that badly as people in real life but they want attention and so they do things to garner attention. So, if we can minimize the attention that they're given as well as highlight the things that we want attention to be placed on, we can look at people's responses from all sides of the issue in a way that we might not be able to do in an article or in a voice that's different than the article. And so, I think by priming that and then by highlighting the parts that
00:13:53
Speaker
Work well the people that respond in a vein along with the article it's helpful and it it does make comments better clearly you still get bad ones and yeah and this was heavily moderated because of the topic matter and so we're able to remove some of that but I think we were very happy with the sort of responses we received.
00:14:14
Speaker
And you tend to do a lot with the evaluating afterwards, so post-processing. I'm sure you're tracking traffic and all that sort of things. But are you doing a lot of looking through the comments and sort of, I mean, I know at least in the projects we talked about earlier, you can see the actual data is actually popping up. Yeah, exactly. But these are sort of more qualitative. So are you trying to, or thinking about doing anything with those sorts of, doing that sort of analysis? Yeah, I mean, we do it, I don't know that it's formal.
00:14:43
Speaker
You know, the folks on the comments team that run this send us responses back. We were watching comments back to see how they were going. We also got like how many comments posted versus how many deleted to see like what percentage. And I think they do this on a lot of stories anyways, but for us because of our new layout and the focus we were trying to encourage in commenters, it was of interest to us. And so we were happy with the numbers and I think it's something we'll keep trying.
00:15:12
Speaker
There's like lots of work going on here and in the open source community around making comments better. We received some feedback from those folks as we built this out. And so it's just interesting to try stuff and see how it works. Yeah, really interesting. The other thing that's interesting for both of these projects is that the experience is much different than your sort of standard insert your comment here. I mean, this has a different feel to it.
00:15:36
Speaker
Yeah, there's a lot more going on. It's designed as part of the article in a way that comments on a lot of other articles can't be because the authors can't take the time to do that. Right. We know that like we have the coding platform. It works well. People are able to have good discussions in it. We have some very lively communities on our
00:15:53
Speaker
on our website in our normal comments. But these are things we want to test out specific to certain stories in ways that we just can't do on a daily basis. And I'm sure we'll see some of these ideas rolled into comments as a whole as we move forward. Right. Interesting.
00:16:10
Speaker
Okay, so let's switch to a more recent project.
Virtual Museum on Obama's Presidency
00:16:13
Speaker
The new story on Obama, a virtual museum of his presidency. This covers a lot of ground. It covers an enormous amount of ground and it will continue throughout the year to cover even more ground. Okay, so this is a living thing. This is a living thing. It will be, I'm not quite sure how many part series. We have another release coming up early summer.
00:16:34
Speaker
late spring for it. But yeah, so it's a review of Obama's presidency in his last, you know, in his last year in office and it will cover different aspects of his presidency. This first room in the museum, if you want to continue moving with the metaphor, is about the first black presidency, the first black president. And so it's laid out with illustrations. There is, as you said, a huge amount of content in here in the same way that there might be in a museum. And so for us, working with my coworker Emily Young on this,
00:17:04
Speaker
It was a big, you know, her design was mostly to try to allow people to get a lot out of it even if they didn't jump in and read the articles. There's a lot of great articles and videos and images that you may have forgotten. It's been eight years, a lot has happened.
00:17:20
Speaker
And so this was a really fun thing to design. It's super visual on top with a lot of really deep smart content if you dive into any of the individual stories. This one we started mobile first. We were able to look, take the concept that Emily had come up with.
00:17:36
Speaker
And then as we were building it, really work hard on making it intuitive, easy on mobile, and then scaling up to desktop. And I really liked how it turned out on this. I think it's the illustrations look really great both places. I personally really like it on my phone a lot, but that's where we started.
00:17:54
Speaker
When I tweeted about it after we released it, I called it Snapchat for President Obama's legacy because it kind of works like Snapchat Discover, but on the web, which was fun to do technically as well. It's cool to swipe through and see pictures, illustrated concepts from his presidency and quotes about him and about big events that happened as and before he was president.
00:18:16
Speaker
So as one of the developers on this, how are you managing all of this content? I mean, you've got, like you said, you've got illustrations, you've got images, you've got videos, you've got interviews, and then you've got the text from the, from the reporter. So how are you like managing all that? That's a good question. So we have a CMS, it powers our paper. We do still print a newspaper. Um, and that is a constraint that a lot of folks don't have to deal with. And so for us, we have this CMS that runs the paper, a lot of these articles.
00:18:44
Speaker
will appear here and they'll also appear in the paper. So we have different ways of wrangling that data and we built a tool for that for us in graphics to allow writers to write articles in the CMS where they're comfortable and for us to work in our development environment in which we're comfortable so we are able to pull down the articles.
00:19:04
Speaker
Insert content where we want whether it's interactive graphics or videos in this case Photos right and and this was we used it first on the black route project
00:19:17
Speaker
looking at Syrian refugees moving from Greece into other parts of Europe. And it was really successful there and it's been used on several other projects since. I wrote about it for our developer blog if you want to get into the technical details of how we consume our APIs and stuff like that. But the real nice thing about it is it provides
00:19:35
Speaker
a syntax that folks are familiar with and that we can place these things essentially using jQuery selectors and that is really helpful for us. It's something we're super familiar with and it doesn't impact our writers as they're writing. They just keep writing and we're like, we want this thing here. It goes there. If they change it, we just move it a little bit. It's really seamless for both parties. This is a little bit trickier because it's not one article. It's
00:19:59
Speaker
13, I think, on the first set. Because why not? If you do one, why not do 13? Right, yeah. And so that made the build out of it a little bit more custom than when we've used it on other projects. Yeah. But it's the same process. And so it's been nice. The editors just kind of give us the URL for the things they're working on. We can arrange them in any order we want. We can associate
00:20:19
Speaker
which illustration we want with them, and then it will generate our site for us, and then we can just work with it. And as they make changes to the articles, we're pulling those in live. There's like no delay between them, at least locally when we're doing development. We found it very beneficial to be able to work on deadline with copy that's changing as it's going, with images that are being updated or changes that's going. And I think it works really well for everyone because it doesn't make
00:20:47
Speaker
editors have to learn to edit HTML to get their text right. And we don't have to take a Word document. Yeah, we don't have to take a Word document and mark it up. We don't have to try to make WordPress do what we want because it usually doesn't want to do what we want to. And we can work in places where we're comfortable and editors can work in places they're comfortable with. It lets us build a really wide variety of projects using a similar approach.
00:21:09
Speaker
So you've got this whole workflow where everybody's still using their regular tools and probably developing new tools on their own. But it all coming sort of back down to the central pipeline. Right, exactly. Interesting. Well, these are great projects. I'm curious to see what you guys will do next, especially on the engagement side. It's a lot of fun. It's very fun. So thanks for coming on the show. It's been really great. Thanks so much for having me.
00:21:31
Speaker
And thanks to everyone for listening. If you have comments or questions, please let me know and please rate the show on your favorite podcast provider so others can learn about it and tune in. So until next time, this has been the Policy Viz Podcast. Thanks so much for listening.
00:21:56
Speaker
This week's episode of the PolicyViz podcast is brought to you by the Summer Executive Institute at the Georgetown University McCourt School of Public Policy. The McCourt Executive Institute offers short courses that are specifically designed to enhance key skills. Small classes and hands-on projects allow you to engage with expert faculty at Georgetown in a format that is convenient for busy professionals.
00:22:19
Speaker
To learn more and to register, please visit mccourt.georgetown.edu slash exec-ed slash shortcourses. Enhance, energize, and expand your professional skills this summer at the McCourt Executive Institute.