Design Q&A: Ted Irvine of The Verge, Polygon & SB Nation

First off, congrats on your recent World’s Best recognition from the Society of News Design. I noticed that the judges specifically complimented your use of web type on the SB Nation site. When in the redesign process did you turn your focus to the type?

Type was the first thing we thought of. We knew that it was going to be a responsive site, and we learned quickly on the first responsive site we worked on that once you scale down to mobile, type is kind of the only thing that brings the brand message across.

So we started the whole process with type boards, and I set the team a constraint. They could lay them out in a beautiful fashion, but I didn’t want any graphical elements, because I felt we needed type that could stand up on its own.

Described by Society of News Design as “sporty-elegant”, SB Nation was praised this year for its cinematic photography and beautifully deployed type

We started off with 10 type boards, and the design team whittled that down to five boards and then down to three. We decided that putting all 10 out to a larger group of stakeholders wasn’t an efficient way to do it. Then we based our visual directions on those three type boards.

We looked at a ton of print for inspiration – much more than the web. We bought books and magazines, cut out the pages that we liked, and put them on the wall to live with them a while and think on it.

What were your hoping to achieve through the typography?

There were a few things. We wanted to come up with a rather sophisticated system that used type to show the importance of the content, depending on what the news event was or the size of the story. And we wanted to be really bold with the typography; we didn’t want it to have that typical sports vibe – like Sports Illustrated or ESPN.

Late-stage designs for SB Nation, experimenting with Ziggurat, Sentinel and Knockout for a strong statement (top) and Crete Rounded, Montserrat and Linden Hill Regular for a more refined approach (bottom).

We decided to use H&FJ’s Ziggurat in the headlines for the biggest and most important stories. Then we use Sentinel in the headlines for every story besides that and Mercury for the body.

In SB Nation, headlines can be anything from super serious to really tongue-in-cheek and funny. And when Ziggurat is there, even though it’s this blocky, powerful font, when something funny is written in it, it feels funny. And if something serious is written in it, it still feels serious. It’s a bit of a chameleon.

There was some internal debate about whether the type was too unconventional, and we even considered going with a safer option and saving Ziggurat for our next site launch, but I was like “No, if we think it’s good enough for the next one, we need to use it here.”

That defined typographic style is quite a contrast to the approach you’ve ended up using on Polygon, isn’t it?

We launched Polygon with Gotham because it’s iconic and clean. It’s funny – even though it’s a gaming site, I wouldn’t say it’s playful. It’s quite credible, and Gotham plays really well with that kind of tone. For me, it’s very even keeled. You could put a headline about North Korea threatening us with nuclear war, and it would still feel mellow in Gotham!

Since the launch, though, we now use fonts way outside what we normally would. We’ll use whatever we think is appropriate for an editorial feature – from free Google Web Fonts to something from H&FJ – whatever will evoke or complement that content. And we’ve actually started doing the same on SB Nation and The Verge as well. It’s a direction that none of us anticipated at the time, but I’d say it’s really upped our game over the past six months in terms of our ability to blend type and make good type choices.

Does that mean your team has to be a lot more involved in the daily publishing?

At the minute we’re experimenting with adding design resources and embedding them into the editorial process – in order to give the sites a higher quality feel. And I’m curious to see how that works over time.

The Polygon design team in their Washington D.C. offices

So right now each site has a dedicated features designer. For The Verge, we have two people. And we have tiers of features – from high touch to low touch. For the low-touch features we have these things in our platform, Chorus, called snippets that let the editors piece together a beautiful feature on their own. Then on the high touch ones, our designers will play around with parallax, add a fixed background, or change the typography if they want. I think we average about one or two high-touch features per week for each site.

Although both sites have received a lot of love from the design community, not all SB Nation fans were delighted with the relaunch. How’d you guys deal with that?

There was some consternation among our most vocal users and bloggers, so our director and product team quickly engaged with them in the comment threads to figure out where the major pain points were and come up with solutions that would serve our users better and show them that, not only are we listening, but we are in this together with them.

For example, when we slightly changed the tone of yellow used in our unread comments, people noticed and the amount of feedback we got on that was unbelievable. So we tweaked that.

The SB Nation redesign at relaunch with an experimental multi-rail design (left) and the current layout (right).

We’d also had this idea of getting away from a traditional right rail, so the page on the redesign flowed literally like a river. We bounced traditional right rail content back and forth from left to right to left and so on. We thought we’d end right rail blindness, but what we ended up doing was making the site less scannable for the users.

We did a bunch explorations to avoid going back to right rail, but in the end we decided to just embrace it and make it super useful for our readers.

We understand why some of our more passionate users reacted so strongly to the redesign. As users of websites ourselves, when sites you love change you think “‘What the shit did they just do?!” We’re continuing to evolve it, but it was a good learning experience for all of us.

During the SB Nation and Polygon projects, you ended up refining your design approaches. How did what you learned during that time end up shaping your current workflow?

Polygon was a much easier process because the group of stakeholders was small. You had Polygon’s editor-in-chief Chris Grant, and few of his editors, our CEO, product manager, and COO, those were the decision makers. Having Chris there everyday to give feedback was huge and allowed us to work much faster. We involved him our first type boards, got a vibe on what he liked, and he was like another member of the design team. All of the exploratory work for SB Nation took seven weeks, whereas for Polygon it took only four – and we were probably even more thorough on Polygon. Once we figured out what we wanted to do, we started validating things in code much quicker, and we didn’t do that as fast as we should have on SB Nation.

Move forward to now, and we’re in the process of designing our Vox Media site. For it, we’ve moved away from static mood boards, and Photoshop has become more of a sketching tool for us. Now we do some work in Photoshop, but then quickly turn those comps into responsive mood boards, and the time we save is amazing. On our Vox redesign, we’ve been able to quickly show five different design directions and how they react in a responsive universe.

So bit by bit you’ve traded in the big ta-dah moment for iteration.

We’ve definitely moved away from that model. The downside was time. For the big reveal, you’d spend all of this time getting ready for the meeting, worrying about what the presentation would look like, and then having a meeting about the meeting, which then took away from the time you needed to spend actually doing the work that needed to get done.

The Vox design team reviewing a prototype

Plus, with big reveals so much of your work ends up wasted. Responsive mood boards, on the other hand, set us up with a rough CSS framework that we can apply to prototypes. The second a design is picked, we already have a framework in place and can immediately dump it on to wireframes and prototypes. It’s been a fascinating shift for us. It’s allowed us to increase the fidelity of what we’re doing and shorten the time it takes to get that fidelity on to a coded page.

Has this affected your tools of choice or how you hand over work?

We run multidisciplinary teams made up of designers and developers working together, so there’s not a handover. There’s a pretty complete partnership happening between design and development. To do this, we added a front-end designer into the team much earlier than we had done before. The other area this helps with is interaction design. Interactions are as key to your brand voice as type and color.

But we have found that we need to be agnostic as to the tool with which someone designs in, and tailor the process to the people we have working on a project. So for example, we used InDesign a ton on Polygon and we found that it worked well, but only if you have people who are really good at InDesign. Our lead designer on our Vox redesign is much more comfortable in Photoshop, and letting him use that probably cuts the design time in half compared to if he was forced to use InDesign.

Where’s the cut off? How do you judge when it’s time to start coding?

Dan Mall and I were talking about this idea of ‘just enough’ design recently. My philosophy is that you need a shit-lot of design to get to ‘just enough’ design. Even on Polygon, where we started prototyping earlier, we did a ton of traditional design exploration reviews, and we did a fair amount of work in Photoshop first. For Vox, we’ve done an equal amount of exploratory design work, we’ve just presented it in code rather than static.

With any project there are two challenges: the design (the layout, hierarchy and responsive piece of it) and what this brand is going to be online (the mood and personality elements). I view a lot of the interaction, type and visual work as being about bringing that brand online. And the challenge is how to you bring the brand and design together effectively. To me, you need to do that traditional design work. You need to literally be a designer – a true craftsman. You need to instill in your designs all of the aspirational qualities of the brand you are bringing to life. You are not simply making a website, you are creating a two-way experience that can be amazing. And if you’re a designer in Photoshop, be a designer in Photoshop. If you can design beautifully in the browser, design in the browser. If you’re going to sit there and draw in crayon, right on! Draw in crayon. I don’t care. But it needs to be as beautiful as that brand needs it to be and, on the flipside, it needs to work really well.

I think the sweet voodoo we have going on right now is that we’re able to present the soul of these brands, but we’re able to do it in this responsive framework. And I think everyone’s getting better at it. As responsive goes from being an infant to a child to a teenager, I think we’ll see fewer sites that look like wireframes and more sites that look visually rich.

What’s next for you and Vox Media?

I’m working with the team that is reexamining what advertising is on our sites. No one’s really cracked mobile advertising. For the most part it’s annoying as hell, like that stupid banner at the bottom of your phone that won’t go away. In addition to looking at mobile, we’ve been exploring new options and designing some custom ads. They’re almost the equivalent of a full page ad in a print publication, but the digital version of that, and they’re responsive.

Traditional digital ads meet ad standards but no longer perform well, so Vox Media has been experimenting with bespoke executions that make the ads as beautiful as the content, like this one for EA Sports.

We want these units to be a premium ad experience that is on par with our content and the design of our sites. We see these units as an opportunity to tell brand stories on a large canvas, but a canvas that you can simply scroll by – just like turning a magazine page.

Why do you think digital advertising is still so rotten?

I think the shift from print to digital has broken advertisers’ brains a little bit. Back in the day it was easy. You knew what the distribution was. Now there are a million places and ways you can do this, and digital advertising has had a real challenge trying to quantify the value, and cost, of something that has no fixed size.

Then there are the IAB standards. For these super high touch ads we’re creating, they are not IAB standard, which is good and bad. Agencies like IAB standards because they know what they have to make. They can make one ad and give it to us, ESPN, and so on across the board. We’re saying that’s fine. If you want IAB creative, go for it. But it doesn’t perform particularly well and it’s not the best way to get your brand voice out to the people you want to see it. That’s why we’re exploring new ad product designs.

Tell me a little about the children’s book you just self-published, titled Under the Sea With Me.

I’d done a tone of scuba diving and seen a bunch of really cool fish. I always wanted to paint them, but I never found a really good reason to do it. Then my daughter gave me the idea of painting them and turning them into a kids’ book. I gave myself a five week period to do the 15 paintings, do all the writing, lay everything out in InDesign and self-publish. It was a lot of fun, and having a project with so concise a focus (compared to the information density that I normally deal with in my work at Vox) was a nice change.

Ted used the Merry and Happy Cloud typefaces from You Work for Them to give the type a whimsical, hand-drawn feel with enough legibility that children would be able to read the book on their own

I was surprised to see it’s only available in print, and not digitally. Why that route?

Just the whole way that kids read. The iPad is a great experience for something that’s interactive, but for a traditional kids’ book, especially with call and response, there’s just something magical about being able to turn the page with them.

Also, the tools for getting a printed piece done and published are really simple. Trying to convert it for Amazon and the iPad, on the other hand, has been the biggest pain in the ass – and that’s just trying for a straight one-to-one conversion without adding interactivity.  I did two e-versions, and I hated both of them, so I’ve shelved them.

I’ve tried iBooks Author, and it’s probably the worst piece of software I’ve ever used. They have a version where you can do it in Pages, but even Pages doesn’t work that well. I’ve followed all the steps for doing it for Amazon, but when you upload it, images start breaking across pages and things fall apart. There are InDesign plug-ins, and I’m sure they work fine for traditional books, but for a picture-driven experience like a children’s book it’s just not there.

I was kind of surprised how challenging it’s been, especially as I work in electronic media and am pretty good at working with software. But I was laughing, going ‘I have no idea how to achieve this!’ The publishing technology is not cooperating.  So to do it right, I’ll probably have to do an app experience, which is good cause it’ll be a much richer experience. But adding animation and motion, making it dynamic, that’s a whole new level of commitment, and I’m probably not going to have the time to do that for a while.

If you want more details on SB Nation’s redesign, how the Polygon design evolved, and other behind-the-scenes peeks at Vox’s projects and processes, check out their blog. It’s full of great show and tells.