Lots of data on a little screen

Ever since David Eads, Joe Germuska and I launched the Chicago Tribune crime site more than a year ago, we’ve wanted to revisit it. Things that we thought we’d be able to return to shortly after launch ended up sitting unaddressed for months. New pages got shoehorned into a design that was never meant to accommodate them. Finally, at the end of last year, my colleagues (notably Andy Boyle and Mr. Eads) and I got a chance to take a crack at revising the massive app. I’m pretty happy with how it ended up, and I thought it would be helpful to share some of the things I learned along the way.

Responsive design

I designed the site originally before I’d heard of this concept of “mobile-first design,” and, boy, did it show. On community area pages, the order of information was weird, the map just disappeared, and the performance was terrible.

Click to see the original responsive site in its full “glory.”

Mobile-first design has been derided as a method that over-simplifies for desktop, forcing one small bit of information at a time upon a user who has screen real estate to spare. It’s true that a columnar, white-space-driven adapts easily to mobile. Sometimes, that’s just the ticket. But for a site like this, dense with numbers, graphs and data, that is not a viable layout. So we dropped the multi-column layout from the community area page in favor of a more focused experience.

The prior site’s multi-column layout resulted in an odd informational hierarchy, with demographic information and community area stories superseding nearly everything else.

A community area page on the original site. Click for the full page. (Pardon the repeating headers — sticky navbar doesn't play nice with AwesomeScreenshot.)

For the new site, there was a lot of careful planning about what needed to be placed high on the page at every breakpoint. I laid out columns-within-columns to allow those sections to break cleanly. For instance, each crime trends section is a column that contains three columns: a time-of-day-graph, a type table and a location table. On phones, these collapse nicely, one on top of another, in a logical order.

The new, more streamlined version drops the sidebar. (Click to see the full page.)

Graphs

Responsive graphs are hard. These still need a bit of work (the interaction is a bit tough on phones and tablets), but moving to D3 and Backbone.js from jqplot helped immensely. David came up with a brilliant solution for the historical chart: display only as many prior years of data as there is screen real estate for. This ensures that the chart is legible even on small screens.

Navigation

The crime site expanded after launch to include pages about shootings and homicides in the city as a whole. We hadn’t designed the site to be very flexible, anticipating that we would only have community area-level pages. As a result, the shootings and homicides pages ended up looking a bit disjointed. Accessing them from the rest of the site was difficult. They felt orphaned.

The new site was designed to be flexible. Indeed, part of the redesign’s goal was to incorporate a large amount of data about crime in Chicagoland suburbs. It was clear that good navigation could solve the orphaned-page issue and allow for future expansion of the site.

So all I have to do is find a way to logically display more than 350 links? I thought to myself. No problem! Oh, and a search bar? And branding?

Two days later, I’d found a style that allowed me to display all 77 community areas easily. The city-wide pages are nestled in the same dropdown. The suburban pages required a little more work. I did misguidedly try to figure out how to display all 250+ cities in the dropdown (try making THAT mobile-friendly), but ended up displaying just the top 20% most populous towns with a link to the full list. The search box got its own dropdown — not ideal, but when faced with needing to make space for the Trib’s logo, it seemed like the best way to save space.

Color

Our project manager, Kaitlen, originated the term “crime confetti,” because the community area map sported so many colorful dots. The colors on the site have always been a bit disproportionately bright and cheery for their subject matter, so Alex Bordens and I sat down to try to come up with better colors. After about a day of experimentation, we realized that the original site’s colors, funky though they are, solved a hard problem: They worked for colorblind users, didn’t imply a hierarchy and didn’t conflict when in proximity to each other. Coming up with three other colors that worked just as well in each of these situations proved a Really Difficult Problem, so we eventually tweaked them a bit and called it good.

All in all, the site functions so much better on devices now than it did, and it’s cleaner and more user-friendly across the board. Stay tuned as we use our new-found flexible design to add more analysis to the site!