Designing For Unpredictable Content

Elisa Capitanio at UXDX Community: Dublin. Video: https://www.youtube.com/watch?v=EOQM8w8mvYw

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

What Storyful does

[00:00:09] Hello everybody. My name is Elisa Capitanio, and I'm the lead product designer for Storyful. I'm going to talk about designing for unpredictable content, and to give you the context of exactly what that means, I have to explain a little bit about Storyful. Storyful was founded in 2010 by Mark Little, who is an Irish journalist and broadcaster. He saw news unfolding on social media way faster than traditional news sources, and saw an opportunity to bridge the content that was coming from social media and news providers, in a way for them to find context and truth and separate fact from fiction.

[00:01:00] We are a social media intelligence and news agency. We use unparalleled access to data, proprietary technology and sophisticated analysis. What does all this mean? Our journalists and analysts investigate different sorts of conversations across digital platforms, from mainstream platforms to fringe networks, just to make sense of what's going on in social media.

The Notre-Dame fire as an example

[00:01:32] I'm going to give you an example of exactly what our team does. I guess everybody here is familiar with what happened, unfortunately, at Notre-Dame Cathedral a couple of weeks ago. I'm going to show you, if it works, a video that was live streamed. And the exit is obviously covering... move it up. Yeah, exactly. The exit is covering the time, so just stop. Okay. So you can see here a man is walking on one of the towers, and that's it. There are other instances throughout the live streaming where other people are walking around on the cathedral.

[00:02:51] What you probably don't know is that a low-quality video, the one on the left-hand side, was posted on Twitter, and it was shared widely across the platform, claiming that a suspicious person could be seen walking around Notre-Dame Cathedral. The video was recorded from live coverage in very poor quality and posted on a Twitter account on the 15th of April, the day of the fire, with the caption "No workers on site. Who is this?" [?] A bunch of speculation went on on the day, and all sorts of accounts went on to claim that the unidentified person seen in the video was not clergy-looking enough, not a firefighter, and definitely not wearing a hi-vis jacket.

[00:04:01] The Twitter video was shared across multiple platforms: mainstream platforms like Facebook and YouTube, but also fringe platforms like 8chan, 4chan and Gab. The users were really quick to claim that the fire was caused by arson, and that the person in the video was either a yellow vest or a Muslim. Very weird. Other people questioned that the person could be someone else; it definitely didn't look like a firefighter or a Catholic priest.

[00:04:40] These are a bunch of screenshots we took from the different tools we have that analyze different fringe networks. The content is really, really bad, so I'm not going to read through them, but these are just a few screenshots of some of the platforms we analyzed, and this was happening live, while the main stream was going on.

[00:05:11] In the meantime, in Australia, some politicians offered their help and support in the wake of the devastating fire, but far-right groups used the opportunity to spread anti-Islam sentiment and conspiracy theories on social media. The low-quality clip was shared on a bunch of different Facebook pages and then also on other, more dodgy websites. I'm not going to go through all of them, because they look awful, but they are basically saying that the fire was caused by arson, and one of the comments says "definitely 100% Muslims" and it's all their fault. Obviously Storyful doesn't associate in any sort of way, nor do I, with this sort of content. It's just really unfortunate that we have to analyze it.

[00:06:17] One of the most funny is the one on the right-hand side: "Notre-Dame fire is a reminder to all of us of the danger of climate change." This is obviously fake. It's actually a fake account with the name of Alexandria Ocasio-Cortez, who is a US representative for the state of New York. So as you can see, it's really a bunch of different conspiracy theories.

Beyond the mainstream platforms

[00:06:47] All of this is to show you the volume and spread, from France to Australia, of these conversations, and to give you an example of the importance of going beyond the mainstream platforms such as Facebook and Twitter, where there really lies one vast landscape of social networks with varying privacy, access, user behavior and content creation. There are billions of conversations and opinions that are shared every day on these platforms, and as we saw in the case of Notre-Dame, the conversations on fringe networks tend to influence mainstream platforms when the volumes are really high.

[00:07:33] We use this reference of the iceberg a lot in Storyful. We don't really like it, but we still use it, because it's an easy way for people to understand how very little we understand about social media on a daily basis. Storyful's tools are created to analyze all the content that goes on in fringe networks and in the dark web. All the tools we have are very interesting, and they give us the opportunity to discover a lot of content, but they definitely come with a bunch of challenges.

Content we have no control over

[00:08:27] This translates into the work we do with the fact that all our content is completely unpredictable. It comes from very ugly social networks, or it comes in embeds, and we have absolutely no control over it. As designers you're often told about the mythological land where the text aligns perfectly and the pictures are all exactly the same size. We definitely don't live there.

[00:09:00] I'm going to talk about embeds. I just wanted to have a nice picture once in a while: cute puppies. Embeds are one of the most important parts of the work we do in Storyful. The volume of the conversations, and where they spread from, means that our tools have to analyze loads of different platforms at the same time. This is an example of one of the tools we have. It creates visualizations in cards. Especially on the right-hand side, you can see those are fringe platforms where we pull the API and visualize them in our platform cards, to resemble usual embeds a little bit more. This is done to make the life of our journalists and analysts at least a bit easier.

[00:09:56] Embeds are very difficult to have in text, or when you have a story. They're very unpredictable. You can never foresee how long they are going to be. They might vary in terms of the presence of text, or just an image. An image could be very, very, very vertical, as you can see from the picture of the puppies, or otherwise it could be landscape [?]. But the problem is that embeds are not forever. They are pulling in content that might be there for a while, and then it's just gone. So while we do give our internal users the opportunity to review them, if the content is gone and the content is present on a story that is public, that is client-facing, we have to have a backup. So they have to be screenshotted.

Sensitive content

[00:11:17] Another problem that comes with working with embeds is sensitive content. This is a screenshot for Twitter videos. If the uploader ticks on upload that the content is sensitive, then you have to click, and then you can see the video at your own risk. Our main tool that is client-facing is Newswire, and because we embed content that comes from other social media, we don't know if something is going to have a layer on top. We have absolutely no control over it, and we can't touch the embed.

[00:12:14] So the only way around it for us was to add a card, a sort of warning, in the page. I'm not going to show you the actual video, because, as you can see from the title, it's not pretty. What we usually do is have the video as the first item in the page, so it would be the first thing you see. But in this specific case, when our journalists flag something as graphic or sensitive content, the item goes immediately down in the page, and we have this warning in the page. We wanted to add a pop-up, a modal, in the page, but we have other actions, so we thought having something very visible as soon as you open the page could really help our users.

Location data on the map

[00:13:15] The last point is about content across teams. A while back we launched a map feature for our client-facing tool. During the yellow vest protests in France, we really wanted to show how the protest was moving across the country. As soon as we launched the feature, unfortunately, we noticed that we had a problem, because all the stories we had in a specific collection had exactly the same location. We had no control over it, because each source that was coming from different social media was tagged as Paris. So we had a cluster of 50 stories, all of them in exactly the same location. It would be like if you were on Airbnb trying to book a room in New York, for example, and all the results were on the Empire State Building. Definitely not very helpful.

[00:14:18] So we discussed this problem with our news team, and they went in and manually updated the location of each one of these stories to be relevant to exactly where it happened. We have the content anyway, because we have another field in the stories that is for the exact location. So instead of pulling the location of the uploader, we're now pulling the one that we input manually, and this is what you can see now. If you zoom in closer, the little blue clusters show the exact position of each story.

Designing for the worst case

[00:15:01] So for us at Storyful, we have had to learn to design with content in mind, because content for us is just super unpredictable. There is no arguing about the importance of aesthetics, and no one can undermine the work of designers, but we had to start looking at design in the context of content for the whole process to be more awesome. It was important for us to grasp the idea that design is a tool used to present valuable content to our users, but user experience and content have the same goal, and they could never be as strong apart as they are combined. As designers we really tend to design for an ideal world, but at Storyful we've learned that we have to design for the worst-case scenario. I know it sounds a bit depressing sometimes, but the earlier we identify these kinds of challenges, the sooner we can find the solutions for them. I know it's very specific to Storyful.

Q&A

[00:16:53] Elisa: It's definitely very different at Microsoft. It's a massive company, and there are so many rules. Even if you think about how Xbox looks in terms of communication, it's different from the communication that happens for Surface. They are completely different products, and internally they are treated very differently. To be honest, when I started at Storyful, I couldn't really understand what we were doing, what we were analyzing. It's a completely different sort of communication.

[00:17:34] At Microsoft we were analyzing products; we were making sure that the product was able to sell. I was working for the online store, so that was definitely our goal. At Storyful you have to have an understanding of what the volume of these social media conversations really is. You have to understand where they come from to understand different sorts of events. There is a very interesting TED talk that was given very recently about the amount of responsibility that Facebook has had during the Brexit vote, whatever you think about it. Understanding volumes of conversations online is really an eye-opener in terms of what is going on in the world and why. So going from product to analyzing stories online is definitely very interesting and challenging. Thank you.