SBNation storytelling engineer describes how the site goes “beyond text”

Fran Bi is a storytelling engineer for SBNation. His focus is on taking sports features and finding new ways to tell them.

“So, a lot of that is with graphics, whether it’s data visualizations or animations or any type of movement or something else where we can tell the story beyond text. Video is also included in that. That’s what we do on my team,” Bi said.

Visualizing data is easier with free tools like Flourish, according to story engineer Frank Bi.

At a major media outlet like SBNation, which is owned by Vox, Bi says they have developers and designers available to make digital content look good. But he says there are some great tools out there for anyone who wants to make a story more visual.

JSTimeline
“Timelines are a very central storytelling tool. We use it all the time at Vox as well. It just makes it really easy for someone without programmers or designers on their team to input items along a timeline. It’s interactive. It’s a different form of storytelling, so that’s one tool that I would recommend.”

JuxtaposeJS
Bi also likes to use an image slider. “What it does is you can take two photos — most of the time they’d be before and after photos— and you overlay two images on top of each other and you kind of scroll back and forth to see the before and the after,” Bi said. “They do a lot of before and after photos with natural disasters, so what a plot of land looked like before a hurricane hit and what it looks like afterward. At Vox we, specifically on one of our websites, we cover a lot of tech, so when we do a lot of phone reviews, especially phones with cameras, we take an image shot with an older phone and juxtapose it over an image taken with a new phone, you can kind of see the difference there.”

Google MyMaps
“Mapping is obviously a great storytelling method. Google MyMaps is great. It’s essentially Google maps, but you can make as custom as you want. I use it a lot in my personal life and also in journalism and storytelling. You can just throw dots on a map. You can give directions through it — between two points. You can create boundaries, areas with Google MyMaps. Bi also recommends Mapbox.

Soundcite
“It helps you create seamless inline audio. If you have a block of text and you have an audio recording you can click on it and read out that part of text, so It’s just another way of storytelling—playing audio inline.”

Flourish
“Flourish is a neat free visualization app. It’s online-based, and you can make a lot of different data visualizations.” Bi says developers often share templates on the app, which users customize with their own data. “It does charts, graphics and maps. Flourish is a great one.”

Bi loves the tools but says you need to always start with the story you want to tell.

“Something we’ve learned is that a lot of times you see cool things being done, maybe in The New York Times or the Washington Post and you think, ‘I want to replicate that my way in my story.’ So, you go out and you look for the tool that will let you do that and then you try to find the story that will work with it and try to replicate it. But it doesn’t really work well that way. What we’ve found is you really need to come up with the story first and then find the right tool to tell the story in the most interesting way.”