Q: Hi, David. You were the man running point on this massive redesign for Slate. Editor David Plotz published a general introduction to our new look for readers, but I wanted to grill you a bit further about the nitty-gritty of what we changed, why, and how your team pulled it off. Why was Slate due for a redesign?
A: The last full-scale redesign was back in ’08—an eon in Internet time. Cobwebs have built up over the years. We’ve layered changes upon changes in response to short-term demands that come in from all over the organization, and many of the pages had gotten cluttered. We wanted to take a broader view and focus the site on a few key editorial and business priorities.
The home page in particular wasn’t supporting Slate’s rapidly growing metabolism—we’re publishing three times as many stories per day as we did a few years ago, and that will continue to grow. The old homepage wasn’t able to showcase all these different stories, to surface the best content and the most popular content over the course of a day. Short Weigel posts, videos, long investigative pieces, and everything in between were getting the same basic visual treatment, flowing more and more quickly down the page and out of view.
The whole company felt we needed to take a step back and think carefully about what really mattered to us and to create a design that better reflected our goals.
Q: How did Slate’s product team prepare for the redesign?
A: A few ways. First, we put together a core, cross-disciplinary team with representatives from the editorial side (you and John Swansburg), our design director (Vivian Selbo), our VP of technology (Dan Check), and the product team (Chris Schieffer and myself), consulting occasionally with others throughout the organization. We started meeting regularly to identify key challenges we wanted the redesign to address, like driving more video views and increasing Facebook and Twitter shares. We defined the metrics we’d use to evaluate the success of our efforts: how much time do people spend on the site, how often do they visit, how often do they share our content. There weren’t any huge surprises in this list, but it helped to have all of it down in writing so we could stay focused on the needles we wanted to move.
We also spent many, many hours analyzing our peer sites, broadly defined—everyone from BuzzFeed and Upworthy to the New York Times and the Atlantic. We talked to other news sites that had recently done their own redesigns, including Mashable and Time magazine. As much as possible, in a really detailed and methodical and quantitative way, we looked at how others were solving the same problems we were wrestling with. We counted above-the-fold links and looked at article font sizes. We considered the breakdown between automatically generated and editorially curated content, and generally kept an eye out for innovative or interesting features that could work for Slate. We made a couple of fundamental decisions at this stage, like going with a responsive (mobile-optimized, that is) approach and abandoning a home page image carousel.
We digested all of this information together and used it to inform an RFP (request for proposal) and conversations with potential design firms.
Q: Why did Slate choose to work with Hard Candy Shell as a design partner?
A: First, of course, we really liked a lot of the designs they had done on an aesthetic level. They emphasize a clean, simple reading experience in all their work, which is something we aspired to in our redesign. They had a ton of experience with clients in the media space, including the New Republic, Gawker, and the N.Y. Post, and yet they seemed to produce remarkably different designs that were unique and appropriate to each outlet. And they’d built responsive designs in the past—designs that worked equally well on handsets, tablets, and desktops—which was a top priority for us but somewhat rare in the media business.
Q: How did you use data to inform the redesign process?
A: We used performance data to inform most of the biggest decisions we made. We started by looking closely at how people were using the existing site. Later, we did several rounds of testing to understand the impact of some of the potential changes that were being considered. For example, we served a small fraction of visitors an alternate version of the right rail on article pages, one that consisted entirely of large images linking to other Slate articles. Here’s an example.
The large-image variant didn’t do very well, so we tossed it out, instead settling on a variant with a smaller image on the left and the article title on the right, as you’ll now find on the right-hand side of most articles and blog posts—including this one.
And lastly, for the final month before launch, we launched a beta of the redesigned site for a randomly selected 1 percent of visitors. We were able to see how the new site compared with the old site on the key performance metrics we’d identified as important at the start. Overall the impact has been remarkably positive; we’ve seen 7.5 percent more pages per visit relative to the old site, and 16 percent more pages per unique visitor over the course of the beta period. This also allowed us to get comfortable managing the new homepage and to make some final course corrections based on the feedback we got from our test group.
Q: How did the home page promotion approach change, and why?
A: We went from a relatively simple layout with just a couple of content promotion options to having 18 different layouts at our fingertips. Chad Lorenz, our home page editor, now has a lot more control over what the homepage looks like. He can sculpt it to capture the kind of news day we’re having, whether that means featuring a blaring headline, a poignant image, or a powerful quotation. We wanted the page to feel fresh and unique every time readers came back.
Q: The right rail on article pages looks very different in the new design. What is the thinking there?
We call this our “smart right rail.” Readers can only see a small piece of what’s happening beneath the surface, but we’re really proud of what we’ve built here—it’s the end result of a ton of great work from our development team.
The old right-hand column included up to 13 different modules, each with distinct logic and layouts. We knew we needed an approach that was easier to manage and more appealing to readers. The new right-hand column is a single stream of content, so it’s visually much simpler and less intimidating. But it’s also much “smarter” in that there are several different algorithms at work balancing the different content types being displayed. One of these is provided by Parse.ly, a startup that we’re big fans of. They serve personalized recommendations to each user based on what he or she has read in the past.
The data we’ve gathered during the past month, while a randomly selected 1 percent of visitors have been seeing the redesigned site, suggest that the new right rail is incredibly effective at helping people find more stuff to read on Slate. It’s also helping to drive attention to sponsored content and to content from partner sites like Social Reader and Newser.
Q: How about the new logo treatment? Why is it smaller and tucked over on the right?
Yeah, that’s pretty unusual, right? People tend to look at the top left-hand side of the page first. In part, we wanted to make a statement: Our lead story is the very first thing you see—not the logo, not the navigation bar. We believe that our content is great, that it’s the most important thing on the page, so we’ll show that to you first.
But this is Slate after all, so there may also have been a dash of contrarianism behind this move.
Q: Tell us a little bit about the fonts Slate is using.
Generally speaking, we were looking for fonts that were distinctive but highly readable. Our headlines are in Titling Gothic. Our subheadlines use Brandon Grotesque. Body copy is in Apres, and ApresRE for smaller devices. We worked closely with Hard Candy Shell to choose these fonts, and we’re licensing them from Font Bureau. Font Bureau even did some customization for us—they provided us with wider em- and en-dashes for our home page headline font, for example, since our headlines are full of em-dashes.
Q: What are some of the other interesting features you’re rolling out with this redesign?
A few features are still being built, but to point to a couple of the most interesting ones:
On blog posts and article pages (like this one!), when you highlight text, a pop-up allows you to share the highlighted text on Facebook and Twitter. This follows from our belief that Slate’s writing includes such compelling sentences and turns of phrase that readers will often want to point to specific language when they share our content rather than simply sharing a headline and link. Somewhat related, on articles, we can now deploy beautiful pull quotes. In addition to adding a visual flourish to the page, they let us drive home the thesis of the piece, or the most eloquent part of the writing.
Soon after launch, the list of most recent stories that’s been moved to the top right hand of the homepage will include a new statistic: “minutes to read.” With the old site, people complained quite reasonably about not knowing what they would find behind each link—would they find themselves on a two-sentence blog post? A 12-page exposition? This will give readers some advance notice about what they’re getting themselves into.
Q: Does the new Slate have a specialized treatment for long-form journalism?
We do have a beautiful new template that we’ll soon be deploying for our long-form pieces. This new template is optimized to make text a pleasure to read and to incorporate big, bold images. It provides easy ways to navigate through lengthy pieces of content and enables the display of supplementary material alongside the main body of the piece.
Q: So who actually built this redesigned site?
A: We’ve got a fantastic group of developers, led by Dan Check, who worked their butts off over the course of the last few months to get this out the door. Dan handled the changes to commenting, login, and registration. Jon Lechliter took the static design we got from Hard Candy Shell and integrated it with our content management system. Doug Harris, Erin Nichols, and James Dasinger managed the beta testing process and ensured the site would stay up after we launched. Erin and Chase Felker built our new smart right rail. Jeremy Freedman built our nifty, modular new homepage. And Brandon Long kept us all organized, fielded bug reports, and led testing.
And last but certainly not least, Chris Schieffer, the team’s too-young-to-be-so-savvy veteran, played the role of free safety, defining key features and plugging holes in the workplan (and my knowledge!)—all while readying for fatherhood.
Q: What’s next?
As ever, Slate’s website is a work in progress. There are a few elements of the redesign that we didn’t quite get to before the launch, and we’re planning to add those to the site and to fix the inevitable bugs that arise in the days and weeks ahead. We expect readers will have lots of useful feedback, so thanks in advance for your help with making Slate as great as it can be!
