The Guts: Chicago Magazine’s redesigned website

Chicago Magazine recently redesigned their website and digital designer and developer Luke Seemann was nice enough to get into the guts of how it all went down. One of the things that attracted me to finding out more about this huge project was his letter to readers introducing the redesign. It was one of my favorite letters to readers I’ve seen, and there’s a lot we can learn about how to communicate design to those outside the industry. Seemann started with Chicago Magazine in February 2012 after 12 years at the Chicago Tribune and 2 years at the San Jose Mercury News. Follow him on Twitter.

chicago1640x480

Rachel Schallom: One of the points of the redesign was to “more closely integrate the print magazine with its digital properties.” Why do you think this is important?

Luke Seemann: Over the years, our print and digital presentations had drifted from one another, for various reasons. Strip away the logo, and you’d hardly guess we were the same institution. That’s not what we want. We want readers to perceive the same values — great writing and editing, classy and sophisticated design, and an informed passion for Chicago — whether they’re experiencing us in print, on the Web, in e-mail, within an app or at one of our events. My goal is to provide a good experience online so that readers know they can expect a similar experience when they’re at the bookstore deciding which magazine to buy.

I should note that this goes well beyond typography — it’s color palette, white space, pacing, and overall tone. And it’s not necessarily about creating an exact match. In choosing typefaces, for example, my guidance to our designers was to not get hung up on matching the print edition exactly. It had to be clear that Web and print were siblings, but not necessarily identical twins. With those marching orders, we came very close to using Brandon as our primary sans-serif, as it did a fair job of evoking our tone and values. Only in the final few weeks did we end up joining print in switching to Hoefler & Frere-Jones’ Verlag. (Coincidentally, Slate rolled out a Brandon-heavy redesign just a few weeks before ours. I kind of feel we dodged a bullet there.)

chicagob640x480

RS: I was very impressed with your letter to readers introducing the redesign. What were the main things you wanted to communicate?

LS: Thanks!

For at least a month before our launch I had been bracing myself for our readers’ reactions. Before Chicago, I had been a newspaper designer for 14 years, so I’ve been through my share of redesigns. Nearly each one was a significant step forward for the newspaper, but still readers would be very vocal and even hostile with their displeasure. It always reminded me of Paul Ford’s “Why Wasn’t I Consulted” syndrome. With the various newspaper redesigns, I don’t think readers were necessarily upset that we’d changed a typeface. They were upset that we’d changed a typeface without consulting them.

So I guess I wanted to preempt as much of that hostility as I could. I’m a delicate flower, after all. I wanted to communicate to our readers some of the thought that went into our decisions, to assure them that, yes,  thought had indeed been put in, and that the changes were made with their best interests in mind. (And that’s not just a P.R. line. I genuinely want the best experience for our readers, even at the expense of other goals. Readers are our seed corn. Besides, I’m a reader myself. I want a good experience, too.)

chicagoc640x480

RS: You did an excellent job explaining common design techniques (ex: responsive design) in more conversational language. Was this difficult?

LS: I’m glad you think so. I try to write in the voice that I would want to read. I don’t like to read press releases, and I don’t like to read technical manuals. But I like to read letters, so I wrote this in the voice I’d use if I were writing to a friend: conversational and explanatory, neither technical nor boring, and no B.S.

I’m sure fellow Web developers rolled their eyes at the scare quotes I put around “responsive,” but the fact is, 95% of our audience has no idea what responsive design is. They do, however, know about pinching and zooming and how terrible it is.

chicagod640x480

RS: Have you received any feedback from readers on the redesign?

LS: One or two people hated on our new logo, but otherwise readers were extremely generous with us. That was … weird.

I won’t pretend it was all because of my welcome message. Our Web site was in a dark, dark place before the redesign. A lot of the positive reaction no doubt stems from the unsatisfactory experience we were providing before. (Nor will I pretend that we’ve arrived on the perfect design. We still have a lot we can improve on.)

One other bonus is that advertisers have noticed, too. An ad rep this week told me that a potential client would like us to build them a microsite — and pay us accordingly — because they think our new site is nicer than their own. That’s the kind of anecdote that makes me — and my bosses — very happy.

chicagoe640x480

RS: Let’s talk about your new format for big stories that strips out the right rail. You call them “super stories.” What makes them super? What were your main priorities in executing this new style?

LS: If you look at any media page, the components can be filed into two broad categories: 1. Things the reader wants — headline, story, photos; 2. Things we want the reader to want — ads, subscription offers, navigation,  links to “related” stories, social-media entreaties.

Now, that second category is very noble, and the things therein pay a great number of bills. But 99% of the time it’s not what a reader is on a page to do. They’re on a page because they clicked on Headline X. They clicked on Headline X because — and only because — they want to read about Headline X. My thinking is, Let’s every now and then get out the way and let the reader be. Let’s strip away as much of the crap from the page as we can and leave her alone with the story. Radical, huh?

It’s a frustration of mine with online newspaper design. Most newspaper sites are practically unusable because they’re larded down with all sorts of refers and photo galleries and “You might also like …” garbage. I’m not even talking about ads. These are self-inflicted wounds.

Note that this isn’t just personal preference. I’ve looked at our data, and by and large people don’t click on the refers. If they want to explore your site and see what else you have to offer — or subscribe or sign up for your newsletters — they’ll figure it out. They’re smart. We needn’t beat them over the head.

I theorize that the best way to get readers to spend more time on your site — and in turn engage in the things that pay the bills — is to give them an awesome experience in the first place, and I’m glad that the various stakeholders here are willing to give us the freedom to experiment with this crazy theory.

Enter the super article. (Please!) A couple of times a month, we’ll give a story the “super” treatment. Bigger photos, better charts, a bit of a bespoke design — and room to breathe. I expect this will typically be our cover story and whatever longer investigative story we have. So far I’ve applied this to our “Best Steak Houses” round-up and our profile of Sun-Times owner Michael Ferro, but we’re just scratching the surface. I’m really excited about the opportunities this format will give us.

The elephant in the room, of course, is “Snow Fall.” Ever since that came out, editors around the world have been asking their Web staffs to Snow Fall all the things.  And that’s great. But let’s take a minute to think about what made “Snow Fall” revolutionary. Number 1 was the amazing design and interaction: the 3-D modeling, the videos, the groovy parallax. But Number 2 is the fact that except for a few ads, there is exactly nothing on “Snow Fall” that is not “Snow Fall.” It’s just a great story, unsullied. It’s a shame we’ve come to the point where that’s remarkable.

Now, I have neither the chops nor the resources to execute on No. 1, at least not on a Times-ean level. But I can sure as heck hit the delete key enough times to execute No. 2.

chicagof640x480

RS: It seems that function was one of the main goals of the redesign. Did you have to help people focus on how it works just as much as how it looks?

LS: Not really. I think my colleagues got it, and the team we had helping us had a good eye for function.

I’ll point out one example: Our global navigation has dropdown menus. Not unusual. But Derek Moore of Simplify, Advance snuck in 30 pixels of invisible padding around each dropdown. Normally with dropdowns, the menu disappears if the cursor slips but a single pixel off the menu. Not so with ours. It’s outstanding — and nobody will ever, ever notice it or how much it improves their experience.

chicagoh640x480

RS: What was your experience with bringing in people (Nick Disabato and the folks at Simplify, Advance) to work on this project?

LS: After a few false starts, we started the redesign process for reals about a year ago, and frankly we were lost. We didn’t know where to begin. Do we change CMS? If so, to what? Do we hire an agency? Do we do it ourselves? How much do we spend? We had a good idea where we wanted to go, but we lacked the experience to get there.So we needed a consultant — but I didn’t want just any consultant.

I’d been following Nick Disabato on Twitter and knew he had the perspective we needed but also the demeanor that I would want to work with. He spent a few weeks interviewing all our stakeholders and auditing our content structure, and then he presented a slate of findings and recommendations. We didn’t necessarily go with every recommendation, but the process was instrumental in helping us define our problems and the desired outcomes. (And his interview notes were fascinating, too. I learned a lot about my colleagues and their hopes and dreams.)

Nick left us with a list of design shops, from solo freelancers to national concerns. This was helpful. Chicago has a ton of great Web designers, so it was great to have it narrowed down to a few that met Nick’s standards and that Nick knew had the publication experience we needed. Designing for a publication, after all, is much different from designing for the neighborhood boutique.

After interviewing the various firms, which itself was a helpful process, we landed on Simplify, Advance. It went through its own discovery process, followed by a long series of iterations and feedback sessions until we zeroed in on the final designs. Then it was about two months of me integrating the prototypes into our CMS in a way that accommodated not only the existing 13,000 pages of our site but also, knock on wood, the next 13,000 to come.

I mentioned in my message that we’re “locally sourced,” and I’ll reiterate how important that was. I’m glad that with both Nick and Simplify, Advance we stayed local, and we stayed as small and nimble as possible. I feel local vendors — people whom you’ve met face-to-face and shared a white board with — are going to be more invested in you and your product, and that’s especially important when your product is as tied to your locality as a city magazine.

As always, if you have a great project to share or what to know how something was built, email me at rschallom@gmail.com. That’s what The Guts series is for!