Seattle Times mayoral guide, V2

Screen Shot 2013-11-18 at 8.06.07 PM

I’m a little late in writing about this one, but it’s worth posting about the second iteration of our mayoral guide that we launched for the general election. (You may remember V1, which we launched for the primary).

Version 2 featured candidates Ed Murray and Mike McGinn side-by-side, with the ability to easily compare their backgrounds and issue stances. We brought the two candidates in to be photographed specifically for this guide, which was the first time we’ve ever done a photoshoot for a news app!

The bar charts pull in data about campaign financing, breaking down the totals by inside Seattle vs. outside. We also have a neighborhood breakdown view (created in Tableau), which shows you the amounts against a map.

Screen Shot 2013-11-18 at 8.19.33 PM

The individual profile pages show you biographical information at a glance, stances on issues, a biography (complete with childhood photos), campaign finance data and financial disclosures.

Screen Shot 2013-11-18 at 8.20.36 PM

The app was built in django, off our elections app that we previously wrote about. It works off a custom template for the race page, then reuses many of the blocks from the primary guide for the profile pages. This year’s general election results fed into the same app, using the same templates and mostly the same scraper from the primary. Yay for resusability.

The goal of the app was to help readers understand the nuances in the views of two seemingly similar candidates. Both tend to align on a surface level on many issues, but have different paths for getting the end result. Big shoutout to Emily Heffter for doing the bulk of the reporting (and inputting the data into the django admin!), John Lok for the photos and Dean Kramer (who recently left The Seattle Times :’( for the development. As usual, I did the project management and design.

Map & UGC: Puget Sound rent map

Rent is a touchy subject in any community, so it’s no surprise that when we created a way for readers to share their rent stories, they responded en masse.

Screen Shot 2013-09-21 at 11.34.18 PM

How it works

Dots on the map represent major neighborhoods within Seattle and other major areas outside of Seattle. Readers can click a point to get more information about it, submit a rent story for that neighborhood and read others’ stories for that neighborhood. We’re using the Mapbox and tabletop.js  to display the map and submissions from our readers, which are inputted via a Google form. This is our last map that will use tabletop and Google spreadsheets to store data. The next one is using a django form and spitting out data as json.

Why the big dots to represent neighborhoods?

Not sure whether I need to explain myself on this one, but since it was the source of much discussion in our newsroom when deciding how to represent neighborhoods, the thought process is worth noting. We used big dots to represent geographic locations for a few reasons.

  1. Rather than using shapefiles: Neighborhood boundaries in Seattle are very ambiguous, and there aren’t any official definitions of what is where. Rather than nitpicking about where one boundary started and other ended, we used big dots to ambiguously represent the neighborhoods so readers could self-identify. Eventually (soon!), yes, we’re going to have to just settle on some boundaries and create neighborhood shapefiles for our city.
  2. Rather than letting smaller dots represent each individual submission: This would require asking readers to input an address, then map that address to a longitude/latitude. Because of privacy concerns and time limitations, we opted not to do this.

First time doing full-screen maps

You may remember our reader state parks map, which we were able to build off of for this project. It was a clunky experience (and not responsive) because we were forced to embed it into our CMS on a fixed-width flatpage. Though doing full-screen maps is certainly nothing new, it’s a first for us and will likely be an issue other smaller newsrooms have to deal with.

Here’s are the points I made to our UX team in sales and marketing when I made the case for why we should be able to do this:

  • Google, Bing, MapQuest, etc. have already set a precedent, meaning it won’t be “unexpected behavior” that surprises our users.
  • If we want our maps to be responsive (yes, of course we do), an iframe on a flatpage won’t do the trick and makes for weird scrolling within scrolling panes.

And speaking of mobile, here’s how it all looks on a phone:

Screen Shot 2013-09-21 at 11.36.03 PM
Screen Shot 2013-09-21 at 11.36.18 PM

Huge shoutout to Alexa Vaughn, Dean Kramer and Gene Balk for their work on this.

News app: Seattle Times mayoral guide

It was a busy summer this year for Seattle Times news apps, with a fall lineup that’s looking even busier. While I have a second to breathe this weekend, I’m catching up on writing posts about some of our notable summer projects.

The mayoral guide is at the top of that list. It’s one of the first projects we launched this summer, and also marked the first time we’d ever worked directly with a reporter, the talented Emily Heffter, on information gathering that was specific to a news app and completely independent of any kind of print product.


The goals

In a super-congested primary mayoral race, we wanted to give readers:

  • A way to easily, digestibly learn about each candidate on the ballot
  • A visual way to compare where each of the candidates stands on each of the major issues facing the city of Seattle
  • A home for primary coverage leading up to the election

How we did it

What resulted was a django app built off our legislative guide and the prior year’s election guide. We built off the politician model to add candidate, people and issue models, setting the groundwork for what could be an extensive database of all candidates, campaign financing, vote totals, endorsements, etc. for Washington state.


We now have (though forgive the ugliness of them right now) a view for all election years, each election within the year, each race within the election, each candidate in the race, and both a race detail and candidate detail. See the potential now? API is next!

One of my favorite pieces of the app is the “issues” section, which visually breaks down where each candidate stands on an issue by displaying his/her mug in one of three categories that represents the common stances on major ballot issues. The tone of the guide was also a little more straight-talk than other political resources we’ve written, which made it more fun and approachable.

Screen Shot 2013-09-21 at 10.56.38 PM

The entire app is, of course, responsive. It builds off a responsive grid that originally looked a lot like the 1140 grid system, but has since been extremely modified for our needs.  We’re not doing anything fancy other than that. The hardest part of getting this thing out the door was building out the models to be as reusable as possible.

Screen Shot 2013-09-21 at 10.55.21 PM

Stay tuned for the general election version of the guide which launches sometime this week!

Map: Structurally deficient bridges in Washington state

Screen Shot 2013-05-27 at 1.42.29 PMIn an act of rapid turnaround, deadline-driven development, Dean, Cheryl and I bring you a map of all structurally deficient bridge in Washington state.

Seattle Times remote breaking news headquarters in Katrina's living room.

Seattle Times remote breaking news headquarters in Katrina’s living room. (Photo by Dean)

Thursday night the I-5 bridge over the Skagit River collapsed and fell into the water. Yes, this is a big deal because I-5 is the main corridor through the state. Two cars fell in but everyone survived. This news broke while Dean and I were enjoying a lovely dinner at Ben and Katrina‘s house after work, so naturally we turned her dining room into a breaking news headquarters: I maintained the social feeds while Katrina worked with homepage producers to build out the package and Dean started working immediately on the map (I jumped in after our social media producer go to the office).

We worked all night on the map, spending most of our time attempting to get PDF data into a spreadsheet before we got a better data set from our data editor. We started with a Google Fusion table and quickly moved over to Mapbox (thankfully, we knew what we were doing after building our state parks map).

We used basically the same technology I described in my state parks post. We launched the map on Friday morning then  updated a second-iteration version Saturday that has filters to see: bridges built more than 50 years ago, bridges with low sufficiency ratings, facture-critical bridges and high-trafficked fracture-critical bridges.

This one of our first heavily deadline-driven news apps projects and probably the best job we’ve done of really telling a story through our apps. We’re getting good at dumping a bunch of stuff into a well-packaged space (maps, political guides), and are trying to get better at truly finding the stories within those data dumps. Hats off to Cheryl and Dean!

Map launch: Seattle Times readers photograph, review best Washington state parks

Screen Shot 2013-05-17 at 8.43.52 PM

best_parks_kelly_sheaThis week the news apps team launched a fun little user-generated content project: a map with reader reviews of the best, worst, most kid-friendly state parks, and the best places to camp. We put out a reader callout using a Google form to celebrate the 100th Anniversary of Washington state parks and received more than 300 responses. We didn’t previously have a plan for what we’d do with those responses, but thanks to all the answers being in Google Spreadsheets and tabletop.js, we were easily (ok, not that easy, but still) able to plot the points on a map.

How it works: You click a point. Point pulls up reviews, photos and number of “best camping” votes for that park. You can filter by category. Relatively simple, but it helped us start to define what our standards are for mapping, and create a few reusable templates so we can do projects like this more quickly in the future.

Here are some of the awesome resources we used to pull this off:

  • Google forms to solicit answers
  • Google spreadsheets to store the responses (had to significantly restructure the responses and do a lot of manual splits because our form was poorly structured in the beginning. Thanks to our awesome intern Daimon for fact-checking the shit out of every lat/long point :) )
  • Tabletop.js + Flatware
  • Handlebars.js
  • Mapbox
  • Google spreadsheet script from Mapbox to handle geocoding
  • Cloudmade
  • A flickr scraper thing that I stole from John Keefe

Special thanks to: 

  • Developer Dean Kramer for ninja skillz
  • Digital news production intern Daimon Eklund for fact checking, geocoding, QA testing, and generally good feedback and ideas and catching all our flubs.
  • Data editor Cheryl Phillips for helping me merge, split, tear apart and reassemble the original mess of spreadsheets from our Google forms.
  • Art director Whitney Stensrud for her eagle eye for UX and colors and fonts.
  • News artist Kelly Shea for all the lovely graphics and cute icons.
  • Travel editor Brian Cantwell for editing all the content.
  • Features producer Holly Henke for managing all the promotion across the website, teases in print, and social media promotion. And for putting together the original forms and doing a reader callout, even though we weren’t quite sure yet that we’d do anything with it.
  • Engagement guy Bob Payne for feedback and keeping the ball rolling.

Yes, we are highly collaborative here at The Seattle Times, even on small projects. :) Now, time for some summer outdoors adventures!

New mini-project launch: Custom ‘list’ post type


I know the idea of doing “Top 10″ posts feels a little cliche and cheap, with front pages of Cosmo magazine first coming to mind. But let’s face it — people read lists. It gives them something easy to consume at a glance. It gives them a point of reference for navigating a story: I know when I’m half way done, or I know I can easily skip through a section if I’m not interested.

So this is why we’ve launched the first phase of a bigger project around lists at The Seattle Times. Our lists can be seen as highly curated collections from our experts, on topics ranging from how to winterize your home, to best outdoors adventures, to eating healthy, to takeaways after a Seahawks game. We write a ton of lists for the paper and in our blogs, but they’re not easy to read. Continue reading

New project launch: Seattle Times Legislative Guide


I’m happy to announce the launch of the latest project from the Seattle Times news applications team: a guide to all Washington state lawmakers, including sponsored bill information, campaign contributions, bios, contact information and committees.

The guide is an evolution of our first-ever news app, The Seattle Times election guide that we launched in August. It uses information collected through reporting, from the Washington state legislature and Follow the Money.

Of course, it’s responsively designed, so it works fluidly across all devices. The front page lists key lawmakers and education leaders as a jumping in point for readers. Optionally they can enter a home address to see a list of lawmakers who represent them.

This is just the first iteration (second, if you count the original election guide) which we’ll continue to build out over the coming months to include a more comprehensive way of exploring bills, contributions, financial documents and more.

This app is running on the Django framework and hosted on Heroku. Congressional and legislative districts are calculated using a Washington-specific version of Django Boundary Service. Our boundary service is hosted on an Amazon EC2 instance, with static files served using Amazon S3. We’re using a custom Django template tag to pull in RSS feeds from WordPress, Tilemill for our map design, OpenStreetMap for the base and Leaflet for the browser interaction.

Huge shout out to data editor Cheryl Phillips and developer Dean Kramer for bustin’ their asses with me!

New project launch: Balance the Washington state budget


Washington state lawmakers have a big problem: The next two-year state budget faces a shortfall of up to $1.3 billion. And on top of that, the state Supreme Court has said Washington isn’t meeting its obligation to fully fund basic education. Meeting that mandate could cost an additional $500 million to $1.7 billion over the next two years, depending on whom you ask.

To help readers understand this problem and explore real options on the table for finding funding, The Seattle Times news applications team launched an interactive this week that lets our readers try their hand at balancing the state budget and increasing education funding at the same time.

Continue reading

New role for me: Seattle Times’ first news applications editor

Dorky photo taken by Hannah Birch. Thanks, Hannah.

I’m honored and thrilled to announce that today is my first day in a new role at The Seattle Times: the company’s first news applications editor!

It’s no secret that this is the direction I was headed. Though I’ve been working for about a year and a half at The Times as a homepage producer, my free time and energy has been spent working on special, app-like projects. In the spring, we started a beta tools and apps team, then this summer we really kicked it into high gear with Kevin Schaul working as a news apps developer  —  proving that we need people to work on this stuff full time if we want to create quality products.

Now I get to spend every day doing what I love and what I hope will move the company in the right direction. As news apps editor, I’ll mostly be serving roles of a project manager and creative lead.  I’ll be working directly with (and learning from) designers, data enterprise editor Cheryl Phillips, news artists, engineers and the rest of the newsroom to build some awesome stuff. And keep your eyes peeled — we’ll hopefully be hiring throughout the next year to expand the team.

Here’s the announcement sent out by Eric Ulken:

Colleagues: You’ve seen her fingerprints on The Today File, our acclaimed Election Guide, our word cloud app, the local Olympian medal tracker and many other digital projects. And if you’ve been fortunate enough to work with Lauren Rabaino, you know that she has vision and creativity that match a can-do spirit and the practical ability to build cool stuff.

I’m pleased to announce that, starting today, Lauren will be focusing her talents full-time on creating compelling digital news experiences as The Seattle Times’ first news applications* editor.

In this capacity, she’ll work within the newsroom and with counterparts in design and IT to help conceive and build tools for presenting news and information in innovative ways that our increasingly sophisticated digital users are coming to expect — all with an eye toward growing audience and engagement.

Our audience isn’t standing still, so neither can we — and I’m confident Lauren won’t let us.

Please join me in congratulating her on her new role.


*What’s a news application? News applications are digital tools and platforms built for the purpose of presenting news and information or building engagement and conversation around the news. Together with the core content management system, they form framework within which information is delivered across our digital channels.

If you have any words of wisdom for me, I’d love to hear.  Charting new territory!

Thanks to everyone who helped me get here.  xoxo