You might have noticed that Slate has gotten a new look recently. In this S+ Extra podcast—which is exclusive to Slate Plus members—Chau Tu talks with Slate’s design director Jason Santa Maria and director of technology Greg Lavallee about what it takes to build a brand-spanking-new website. They divulge why it was time for Slate to get a redesign, the obstacles they encountered along the way, and what they’re still looking to improve.

* * *

This transcript has been edited and condensed for clarity.

Chau Tu: Let’s start with the big broad question. Why did Slate need a new website?

Greg Lavallee: I think when I joined Slate in March 2016, one of the first things that folks asked me at the company was what I thought of our website and what I thought of using it. My first reaction was that you want to be nice because you want to get a job, but I also wasn’t going to pull too many punches. I said that I felt like it was a little slow and felt a little outdated, in terms of the technology felt outdated when I was using it. That doesn’t necessarily mean that you need a new website, but as soon as I joined and started talking to some of the developers and the dev team, we quickly reached a consensus that we wanted to start over with something fresh rather than trying to take the current system that ran the website and adapt it to something new or try to speed it up again.

A lot of times if you can start from zero in trying to make something fast, it’s much easier than starting with something that’s already only going 30 miles an hour but because it’s a big lumbering beast, and trying to make it into a cheetah.

Jason Santa Maria: I think from my point of view, not only the stuff that Greg’s saying, but there was this time where I feel like the Slate site was current and modern and it was optimized for a certain type of readership and a certain type of way that people would find the articles, but over the years that had changed, and people were coming in more from social feeds and other places. Our website was optimized for this thing that just wasn’t happening anymore. There was certainly this technical and sort of pitch approach that we weren’t nailing.

Just from a design perspective, it was really dated. It feels like we weren’t portraying this smart, wonderful person that Slate is. We didn’t have the outfit that fit us right anymore, and our haircut was really busted. This is just a really good opportunity to not only look the way that we think we sound and the way that we feel and exemplify some of that smartness that we wanted to.

And also, there has to be some sort of balance between thinking about people’s online habits and how to change them but not too much, right? How do you find that balance of looking at those habits but also kind of look to the future and not be outdated anymore?

Santa Maria: I think we have some advantage here in that our site was somewhat dated and a lot of the other news websites there had risen up to a certain point, so people had become more familiar with certain kinds of interactions, certain ways that articles are laid out and how technology and designs have advanced in news. So, we could lean on a lot of the expectations that I think people had in those spaces but bring ourselves up to that new baseline and see what it meant to Slate visually.

I think it was actually useful to approach this when we did because we had really nowhere to go but up because our site had languished for so long. I feel like all of the things we did were more just like slipping into a better expectation, something that we’ve been wanting to do for ages anyway.

Lavallee: Yeah, and in terms of technology, too. I think that some of the things that site was built on, a Java-based CMS—which is still widely used today and really good—but a bunch of advancements happened in other areas of technology and are always going really quickly. We decided to come in and use NodeJS, which is JavaScript, really, instead of Java, which is a completely different programming language, and we started using some more of these in-memory databases that are much faster.

I think that not just the fact that the technologies had advanced but also that with more and more people using them, it becomes much easier to say, “Oh, we’re going to try this thing because a hundred other people have already built a site that works this way.” And so there’s plenty of documentation on how to do it, and people have already run into a bunch of the problems. I think it actually comes similar to what Jason’s saying about if a bunch of other publishers have also done updated sites and we can have some of those lessons and learn from those lessons, you can apply the same thing to some of the technologies that we’re using in that a lot of the lessons have already been learned. You come in at a bit of an advantage to do it that way.

So, where do you begin with building a new site? Does it being with design first or does it begin with dev first, or is it just all the time working together?

Santa Maria: I think we approach this in a slightly different way than just thinking about the site because we knew that the site was just one of the things that we wanted to have as part of this larger restructuring and larger redesign and “retechnologizing” effort of getting everybody together in the same place at the same time and working in this larger collaborative team. So it would be we’re taking into consideration what the needs of sales and design and dev and all these other teams were all at once rather than just having one team lead the effort and having this sort of top down approach.

We dubbed the project Redux, and the website was one piece of that. In starting off, we tried to get people to not think of this as just us redesigning and relaunching a website but redesigning Slate in the way that we want to work together, and the website will be one thing that comes out of that, but there would be lots of other things that came out of that, too. More redesigning the way that we were actually going to work.

Lavallee: Yeah. I think that where you begin from a software perspective is probably in a prototyping stage and looking at what’s out there. But to Jason’s point, I think that a big part of this project wasn’t just about the site design but also thinking about how we wanna build things and really thinking about our process for how do we deliver something that is quality that we’re proud of. Even if it means we deliver less, we still want to deliver something of quality so that on launch day we don’t just spend the next three months tacking on little bits and trying to make up for things that we lost. I think that’s a big part of how we changed a little bit of the way we work.

Greg, what were some of the big, specific goals that you had for the site with your team?

Lavallee: I think obviously the biggest goal—I wrote a little bit about this, too—was speed. We just wanted the site to be much faster to render for the user. The idea that somebody can start reading an article as quickly as possible—whether on a mobile device or if they’re on desktop or tablet—was really important to us. When we started looking around, that was one of the first things we did. I think we’re still not all the way there yet. I’m definitely not satisfied with the speed we’ve got even though it’s twice as fast as the old site. I think we have plenty of room for improvement. I think that was the number one goal.

The other secondary goal was simplification. The old site, which still exists—if you’re using RSS feeds, you’re still getting them from there. We still publish a few articles there that we haven’t had time to bring over in that quality way that we wanted. The old site was also functioning as it did with our RSS feeds for people’s feed readers. It has a gigantic image service that it uses to do all different crops, so if you upload one image, it makes 16 different sizes of that image for use in different places. I couldn’t even begin to name the number of things that that one website was actually doing all these other things.

A big part of looking around into the new system that we wanted to build was to think what are the parts that we don’t need a website to be doing. Do we need a website to be cropping images? No. Let’s put that somewhere else and do a new service there. And I think that was something that we achieved pretty well. We still have a few things that we could move off into other services, and I think that’s part of the reason that we still have stuff on the old site. We need to figure out what’s our system going to be for RSS so that when RSS feeds break people can still read the website. We want to make sure that we’re separating those concerns as much as we can. So, I think that was a secondary goal just from the tech angle.

And I think the tertiary goal was probably to get us onto a more modern stack. Not necessarily that Java isn’t modern; we still use Java. It’s used for our search functionality because we use a service called Elasticsearch. But to get into a bit more of the space that’s more popular in the web development community and the software development community, not only because that makes it more fun to work on things because you’re working with things that people are already talking about on the Internet right now, it also makes hiring much easier, and I think it also makes our staff just much happier because instead of using outdated things, they’re a little bit closer to the edge of what’s new in technology.

Right. You talked about the speed. What are some of the other site averages? How fast are these other sites moving and how fast is ours now in comparison?

Lavallee: I’m looking at something that the Hearst group put together, which is a performance leaderboard they have. If you look at the top of the list, Atlantic City Lab, SF Gate, and Financial Times have load time averages that are down below seven seconds, things like that. And our previous load time was around 30 seconds on the same board. We should be up there in the next couple days because I’ve emailed them, but I’m hoping make into the top 10 of that. I think we’re definitely getting much higher on that list, and we still know we have a few tricks up our sleeve to push it even higher, which we’re really excited about.

Jason, obviously the new designs on the site are very striking—there’s a lot of color, there’s all sorts of illustrations throughout. What were some of your inspirations about where to start with this?

Santa Maria: We actually worked with an outside branding firm in the initial stages to give us foot in the door on some of the design work to put a little bit of voice around it and define where the edges were. They’re named Gretel, and they’re based in New York. They helped us not only with branding like the logo and other bits like that but establishing a good color palette and the concept for the approach of some of the elements.

On the site you’ll see that certain elements overlap. We have some hand-done pieces and, like you said, a lot of bright color and illustration. The general concept there—and it’s sort of a light one that you would see on the site—is the idea of the editor’s hand, the editor’s involvement in the story making process. We pick up on a couple of cues of what that might look like of things overlapping as you would overlap papers or elements on a desk as you’re doing research and some of the hand done elements are more like someone making notes or marginalia in the side of something. We like the idea of exploding the story making process in that way and picking up on some of the little artifacts that come about from that in visual ways. Illustration has always been a big part of Slate’s art, so we just wanted to double down on that and do even more of it and bring it to more sections of the site, too.

For color, we had a very, very limited palette in the past design library. It was pretty much just maroon, and sometimes we would use this highlighter yellow, and beyond that we really didn’t have anything established. I think the colors came about not only wanting to preserve some of the design equity that we had from the past work of the maroon and broadening that out to a darker maroon, but then bringing in all these other colors so that we would have a lot more options to play with.

Speaking of the little editor’s notes, there’s that little asterisk under the homepage logo that I really like—that’s one of my favorite parts. Can you describe that and also talk about how you came up with that?

Santa Maria: Sure. The asterisk is sort of like pulling back the curtain to reveal a little bit Slate’s voice. We were looking for ways to inject some of that into the design work through words not just through visuals. Some of it will come through in headlines and in the stories that are on the page, but we noticed that around the time we were designing the site some of these other sites were launching. They were throwing taglines in their masthead. It’s a bit of throwback for magazines and the newspapers to wear that right up front.

That just didn’t feel like us to do anything like that, but we loved the idea of having some sort of thing that signaled what our voice was, what Slate was about. Part of that is snark and part of it is a little contrarian, and we thought what better way to do that than to actually have something that isn’t so serious but that is emblematic of us right up front that could rotate, that could change with the news or on the whim of whoever is programming it that day. It could also reference a story because there are some of these wonderful snippets of text, these almost non sequiturs that you could pull out of a story that are funny on their own when they don’t have the context of the rest of the article, and they could have these double meanings. They could have meanings about the story and about the news that you might pick up on if you’re familiar with what’s happening that day. Or you might just connect it to Slate the publication, too. It was a fun little play on words that we could experiment with and have a little bit of fun with all the time. I came about really organically that way.

Do you guys have any of your own favorite parts of the site? Maybe there’s an Easter egg that you guys have hidden in there as creators of this?

Lavallee: All the ones I know of I’m not allowed to talk about because they’re for the dev team. [Laughs.] They make our lives easier, but I can’t tell anybody what they are.

Santa Maria: I actually like the hand-done elements. We don’t use a ton of them on the site. They’re just these little moments throughout. Up top in the masthead there’s a little word that says “notable,” and it’s tags from stuff that’s going on in the day. I just like those little moments where you’re not looking at a rectangle, you’re not looking at a font or something like that, and it just has this nice organic quality to it.

What turned out to be some of the bigger obstacles that you came across as you were building the site?

Lavallee: I think from a tech perspective, the new CMS that we use has this concept of componentization. Everything is a component, so a headline might be a component or in the masthead that asterisk might be a component of the thing. For us, it was really just a different way of thinking about how we were working.

In our old system, which also used components, you could definitely get away with not always using components, and so we tried to stick it, really stick to our guns and try to make sure that we were doing things the right way. And that turned out to be harder. In the end it’s beneficial. It makes updating things really, really easy. It pays off down the road, but the initial up front work is pretty taxing.

And the other one that I’d point out is that we used some new technologies, which Jason can probably talk to you actually better than it can, called CSS Grid, which is a way of laying out webpages that’s basically changing everything about how webpage layout works, and we decided to use that even though it’s not fully available in older versions of Internet Explorer. I think one of our developers, Jess Eldredge, did a tremendous amount of work around understanding how CSS Grid works and getting it to work really, really well all over the site.* I think that was a very big undertaking, and it took us a lot of time. The same sort of thing where it’s totally worth it now.

I asked her the other day if we had to switch the site to read right to left if we were going to do something in a right to left language how easy it would be, and it’s like three lines of code to change it because of the way that some of these newer technologies work. As soon as I asked the question, the next day she showed up and showed a demo of it, and I was like, “OK, that was worth it.” So, who knows. Maybe you’ll be reading Slate right to left sometime soon.

That’ll be interesting. Jason?

Santa Maria: I think this will probably be not a super popular opinion among the designers and developers in that I think one of the hardest things is figuring out how to work together in a sane way, because I really felt if we all got together and we started figuring things out, the other side we would have a website. We would have all the other things. That’s not to say that those things aren’t hard to do, but I felt like that was the known quantity.

We’re designers. We’re developers. We’re product people. We know how to make websites. It was more about how do we do this in a way that is sustainable and that we can iterate on afterwards and involve a lot more people outside of our disciplines too. That was a huge obstacle.

And I think too the one that we didn’t really plan on is time. Time is always difficult for projects like this, but the ridiculousness of the news cycle means that people can just get pulled away because something breaks or something big is happening. We have small teams, so if you’re working on the news you might not have a designer that can also work on a web design or help pair with a developer. It was just a hurdle that we didn’t anticipate to be so extreme, to be so taxing to not only have to make our new home, make all this new stuff but deal with the craziness of what’s happening every day.

Yeah, when did you first start on working on the new site? When was the kickoff starting?

Lavallee: Part of the way we work is I’m not sure we had a kickoff. And that was part of how hard it was.

Santa Maria: Yes. Exactly. I think we probably started in earnest in the fall of 2016, late fall, and after we had established what we were planning to do and that iterating in public and doing a lot of this live rather than making a big monolithic thing and launching it, we were going to try and do a lot of this in front of our readers’ eyes. So, after that we launched an article right at the tail end of 2016 and continued to iterate on it through early parts of 2017. I guess all told, it probably was maybe 16 months or so from then until we relaunched.

Lavallee: That sounds right.

That still seems very fast.

Lavallee: When the dev team started building, I think it was weird because we started approaching it from the writing angle. We thought that writers would need a new system to write in, and so we started building a system where they could write in Google Docs and the import it into something in the summer of 2016. Scuttled that. Ended up going with a different CMS entirely. There’s a bunch of development that gets thrown out. We should do roundup at some point of all the things that we tried and failed at first.

I’m also curious about that, about what you still wish that you could do, in a way?

Lavallee: Oh, there’s tons.

So what is ahead for the future? Greg, it sounds like you obviously are still working on some kinks, and I’m sure design is also working some stuff out as well. What’s ahead for the site?

Lavallee: The one we already mentioned is speed for sure. We have some things we want to do to speed it up. In software engineering there’s something called debt, which is basically that if you want to get something quickly you can do some shortcuts, but eventually the debt that you built up doing those shortcuts will add up to something that ends up taking longer, and it prevents you from doing anything else.

Right now, we have a bunch of debt to take care of, which is the first thing. We also have to finish migrating off of the old site so that we can officially take it out back and do the Office Space scene to it.

Jason Santa Maria: We’re going to continue to explore what this new design language is and see what that means for making each of our sections have their own look and their own voice. And I think also finding more ways to take big swings by collaborating with that and by collaborating with other teams and do bigger things. Maybe it’s around the elections coming up later in the year. Maybe it’s around other packages and things that we want to do, but just not only think about the words that we’re publishing but how we can make bigger things by teaming up together.

I’m sure the feedback has been pretty positive, or that’s what it seems like from our end here. But is there anything that you want to air out and be like, “We’ve been hearing a lot about this, but we can’t do that anymore,” or “We’ve heard a lot about this, and we’re working on it, and it’ll be on the site soon”?

Jason Santa Maria: I’ve seen two things come up so far: Just that search is missing, and also we haven’t enabled author pages yet, so you can’t click on an author or even click on a section as it’s labeled inside of an article and see more from that area.

Lavallee: Yeah, those are definitely the two big features that I would mention. Search was in Jason’s design, so this is 100 percent not his fault. And the dev team was like, “We don’t have time for that right now.” [Laughs.] So, that’s definitely on the short list and is high in reader demand. Authors is something I was actually working on before this meeting. Those are all on the table.

Our commenting community is always pretty vocal about commenting, which we already did some work on. There’ll be some other features that we have to move in there, as well, like live chats that need to move over from the old site.

*Correction, Jan. 25, 2018: This piece originally misspelled Jess Eldredge’s last name.