Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week we are so excited, we are doing donuts on the lawn and then peeling out into the driveway. We are here to talk with Lauren Rabaino and Yesenia Perez-Cruz from Curbed. Welcome.

Lauren:

Hello.

Yesenia:

Hi!

Ethan:

But before we get started, I’d like to take a moment to thank our sponsor, Media Temple. They’re an LA-based provider of web and cloud hosting solutions that caters to web developers and designers like you and I, as well as to creative agencies and large enterprises. Now, they’ve been around since 1998, so there’s a pretty good chance you’ve heard of them. I mean, heck, one of my earliest sites was hosted on Media Temple. They offer 24/7, award-winning support, that’s based right here in the U.S., available online or over the phone. And Media Temple has one of the highest customer loyalty rates in the industry. They’re incredibly proud of their focus on the digital design community and offer a whole suite of products that are just tailored to its needs. If this all sounds good to you, you can use the code RESPONSIVE when you sign up, and if you do that, you’ll get 33% off the first three months of shared or Wordpress hosting. That’s available at mediatemple.net. Once again, from Karen and I, we’d like to thank Media Temple for sponsoring the podcast. Thanks so much.

Karen:

We are so thrilled to have you on the show today. Perhaps to get started, you could introduce yourselves, tell us a little bit about your work at Vox Media, and maybe just tell us a little bit about the Curbed redesign. Lauren, you wanna go first?

Lauren:

Sure. So, I’m the director of editorial products at Vox Media, so I am responsible for the teams that build out our storytelling tools, our storytelling experiences. We also train and document all of our tools for our editorial teams, and the biggest piece of it that’s relevant to this conversation is we also launch, relaunch, and redesign, and grow all of our brands. So, specific to the Curbed project, I was project managing, working closely with the platform team and Yesenia’s design team to work through the redesign as it relates to the overall platform overhaul we’re doing, which we’ll probably touch on at some point today. So I’m in charge of all of this for all of Vox Media, Curbed is just one of the many projects we have queued up this year.

Yesenia:

And I’m Yesenia Perez-Cruz. I’m a design director on Vox product and I work on the user experience and design system of all of the sites that are on our platform. So, as Lauren said, we were conducting this overall design framework for all of the sites on Vox Media and Curbed was a piece of that process. So, in addition to working on this design framework, I was also a designer on the Curbed project along with Georgia Cowley, who’s our brand design director, and Courtney Leonard, who’s a brand designer.

Lauren:

And just a little bit more context about the Curbed redesign that you asked about overall: So, Curbed is a website that’s been around for about ten years, and when we approached this project we realized that Curbed needed to evolve with their changing editorial strategy. So, if you’ve ever seen what Curbed used to look like before in terms of its branding and its design language, all of that, it represented a decade-old design for a site that was created to cover real estate. Now Curbed has grown, it’s started to evolve, it’s much bigger than that now; it’s a website that covers the entire life cycle of the home and about loving where you live. So in addition to bringing the technology into 2016, we also needed to evolve to match that new sort of editorial approach and new audience that they’re trying to reach.

Going responsive was never really a decision, we never really had a conversation about would we go responsive with this website or would we not. It’s been the expectation since 2012.

Karen:

So, tell me a little bit about how a redesign, or particularly a responsive redesign, might fit into that particular audience, which I imagine would be relatively mobile.

Lauren:

Yes. So, responsive websites at Vox Media—Curbed is one of our eight websites, and going responsive was never really a decision, we never really had a conversation about would we go responsive with this website or would we not. It’s been the expectation since 2012 when we did our first responsive site, Polygon, that that’s the direction that we would go.

A big piece of the conversation that we had around how does Curbed evolve and how does our platform overall evolve is obviously, yes, what you just said Karen, thinking about what that mobile audience wants, what it needs as an audience that’s on the go primarily on their phones. I think more than sixty percent of Vox Media’s audience across the board is a mobile one, so our big focus is around that.

We’re thinking about performance and how can we get our sites to load very quickly while also displaying some of the things that are core to Curbed’s direction. Curbed is a site about homes, so naturally a big part of that is a ton of photography, and big beautiful photography, and now also moving into illustration. So, it’s trying to optimize the site to balance both the heavily high premium visual aspects with the quick response and load performance time. Yesenia, is there anything else you’d want to add about that?

Yesenia:

I don’t think so. I think that definitely approaching this project from a mobile-first perspective was really essential and it helped us to prioritize what we were including as part of the site.

There are many different platforms out there where we have to express the brand, as Facebook Instant Articles, Google AMP, Apple News, and then our owned and operated premium sites are just one of those many platforms.

Lauren:

The platform piece of it was a mobile-first approach, but interestingly this was the first time that we did a design exercise. Because it’s focused on this new audience and a sort of changing subject matter for the site overall, we were also focused, from the visual and branding side, sort of off-platform first, which goes beyond responsive first, beyond mobile first, and into the extension of the brand overall in the space. Because the way that we think about our sites, our brands—Chorus, which is our CMS, our publishing platform, is just one platform where our media brands exist. There are many different platforms out there where we have to express the brand as Facebook Instant Articles, Google AMP, Apple News, and then our owned and operated premium sites are just one of those many platforms.

So as we approached this, we weren’t only thinking about the design and the information organization in terms of mobile first. That was a big focus of it, but it’s also all of the platforms where our content exists, that was the primary focus and we actually put together the mobile mocks and the website mocks as part of the last phase of this whole design process.

We don’t really make a differentiation between the desktop content and display and the mobile content display. The focus is mobile.

Ethan:

Lauren, I’d love to hear a little bit more about that, and maybe this is going to be a very easy question given what you just said about being a little bit more platform agnostic. We’ve spoken to so many publishers who kind of wrestle with these two terms, mobile and desktop, trying to think about do these different device classes necessitate different design processes, different displays of information, different content? Or are people accessing our sites on basically these two different classes of devices, more or less looking for the same thing? Where did the Curbed redesign sort of fall on that spectrum?

Lauren:

Across the board at Vox, we are not really putting any type of emphasis at all on the desktop experience or the desktop site or the desktop content. Yesenia can speak to the design process we went through for the platform overall, but it was all mobile first. We primarily showed our editors mobile wireframes and mobile mocks without even really delving into what desktop looked like. In terms of how the content is actually stored and created and written, we think about mobile, we think about social platforms which are also heavily mobile, but we don’t really make a differentiation between the desktop content and display and the mobile content display. The focus is mobile.

When it comes to adaptive content and what kind of content might we put and show in different places, our focus actually is tending to be more towards the social distribution points.

Desktop, as a consequence of that, our desktop home page is especially our lowest priority, is where we put the least amount of thought and emphasis and we’re encouraging our teams to also think that way.

And then when it comes to adaptive content and what kind of content might we put and show in different places, our focus actually is tending to be more towards the social distribution points. Rather than specifying maybe a mobile headline and a desktop headline, we’re really focused on what’s the Facebook share language and the Twitter share language and the social promotion images. That’s one piece of it, the primary piece of it, because that’s how most people are interacting with our content, and then mobile is the secondary piece, and then, again, desktop is just a consequence of that and not at all an area of focus.

We began with the article at the smallest breakpoint, which is really the core of the Vox Media site experience.

Ethan:

That’s really great. And since you brought it up, I’d love to hear, Yesenia, a little bit about the design process used for Curbed.com. On the Vox product blog, there was this really wonderful write-up about how you thought about the brand and the design system that needed to be applied to this redesign. Could you tell our listeners a little bit more about that process?

Yesenia:

Yeah, absolutely. So, this Curbed design process was my first design process for Vox Media, and a couple of months before we actually started the Curbed redesign process we began to work on the design framework for Vox Media sites, and this design framework was a mobile-first strategy. We began with the article at the smallest breakpoint, which is really the core of the Vox Media site experience, and we focused on creating an experience that would focus on growing our audience, focus on the content in our articles, but then also maintain and increase our ad revenue goals. So, we went through a couple iterations of working on this design framework and building that out.

When we got to the Curbed design process, it was unique in terms of processes that I’ve worked on in the past. As I think Lauren had mentioned, we focused on designing the Curbed brand in a holistic way, so we were focusing on creating a brand, not designing pages, which is pretty different than previous approaches to Vox Media. So, we started off identifying what all of the different building blocks that this brand needed to have, and that was designs for the brand on social media platforms, the design for the brand on things like Apple News and Instant Articles, and the website was another component of this. But we really focused on looking at a big picture and exploring the brand in a holistic manner. So, we did some initial explorations which were very loose, and some of us did sketches and painting, just trying to start exploring a direction.

And then I think what was pretty unique to this process as well was we met with the Curbed editorial team really frequently, like at least once a week but sometimes even more than that, just to make sure that this was something that we were all creating together. They were as big a part of this redesign process as the Vox product team. So, we went through several rounds of refining our explorations and eventually, after a couple weeks, we had landed on a direction that we felt good about that worked really well with our new logo—the logo redesign was happening at the same time. And once we had a cohesive brand direction, that’s when we moved into the website and the application of the brand to the website.

The website didn’t need to carry all of the weight of communicating the brand. So, the brand was communicated through social media, it was communicated through video, and it existed in many different places.

And I think what was unique at this point was that we already had a site built because we had worked on the design framework up until this point. So once we started working on the website itself—we didn’t do very many comps, we did maybe like pieces of comps; I think we did a comp for the home page at a full width just because we didn’t have anything for that. But we really could just focus on applying some of the brand that we’d already defined for Curbed to this design framework that we’d built out.

What was important about this process was the website didn’t need to carry all of the weight of communicating the brand. So, the brand was communicated through social media, it was communicated through video, and it existed in many different places. So with the website, we could focus on having a clear mobile-first reading experience that was lightweight and loaded quickly, and then we layered on some very deliberate design customizations to work within the brand, but it wasn’t the core of the design process.

Lauren:

And a little bit more context there—because Yesenia referenced a few times the way that we used to do Vox Media sites. So, how that used to work in the past was we would bring on a new brand or we would acquire a new brand or launch a new brand and then we would go through this process of doing solution design from the ground up: reinventing what is the article page look like and how does it work, how does something like a unique content type at Vox, like a Card Stack or a Map Stack, which are basically just structured collections of different types of content either location-based or topic-based… We would do the solution design from the ground up every single time.

What this new framework has empowered us to do is have one holistic approach that’s customizable in some ways but that scales across all of these different websites that have a bunch of different goals and use cases, and then applying the brand layer on top of that.

We’re making decisions about specific pieces of functionality, specific components that have to work for the specific goals of one brand but also have to be able to be abstracted and applied across the board.

Karen:

Let me follow up on some of the conversations that you had with editorial, particularly in light of what you’re saying about having some consistent patterns that you were implementing across the platform. So, how did you have conversations with the Curbed editorial team about their goals, their content structure, and how did that play into the ongoing design process?

Lauren:

The process for this started with an outlining of all of Curbed’s goals. We talked to them a lot from the very start, even months before we even actually started officially on this process, about what their brand vision was and who their audience was, who they’re trying to reach, what their audience can get from them that they can’t get from anyone else, from any of their competitors, and we talked a lot about the types of problems that they solve for their readers. So for Curbed, this was making connections between big societal shifts in the physical, built environment and doing that at both the national and local scale and tying the threads between those two things. They track real time development changes in cities and neighborhoods, they make connections through trendspotting in small ways. And they’re really excited about discovery, helping readers discover things they might not have otherwise seen either changing in their communities or even getting more into the shelter aspect of it for DIY and home renovation, this whole new interiors aspect that they previously never covered.

So we spent a lot of time focused on that brand vision to truly understand where that team was coming from and to start to narrow down, when we got to the actual design phase, concepts that were important, the idea of textures and built space and interiors, exteriors, and community connections, all of these concepts that were easier to translate into an actual, visual language. So in understanding those things, it helped us start to prioritize some of the things that were important to their site because, you’re right, we’re making decisions about specific pieces of functionality, specific components that have to work for the specific goals of one brand but also have to be able to be abstracted and applied across the board to a site that covers food, Eater.com, or politics with Vox.com. That’s probably the hardest piece of this and will continue to get harder as we move more and more brands over to the platform. But in understanding what their mission was, how they want to connect to their audience, and the types of stories that they want to tell, we were able to start to prioritize the way that the design system would work and the types of features that we added to the platform that they would need, and we were constantly comparing that back against the needs of all of the other brands just to make sure that we’re taking as holistic an approach that we can and that everything is abstract and, I don’t want to say generic enough, but truly generic enough to be able to work for a bunch of different types of subject matter.

We were influencing the editorial strategy through a data-focused approach that then also allowed us to come full circle and prioritize that from a design perspective in a way that would support their audience growth.

One example is the idea for Curbed, they’re really big on a sense of place and having a utility-focused approach to how they guide people through neighborhoods. So understanding that helped us prioritize how we would build a feature in from Eater into this platform overall, a thing we call Map Stacks that’s sort of a community-focused, location-based guide to different places. And the other big component of this that is just as important as the editorial strategy and just as important as the design approach is we integrated a growth strategy into this as well, so we looked at what are the other brands doing that works and doesn’t work. Curbed had never had something like Map Stacks before, but the idea for the approach that they wanted to take was to just publish as many maps as they could every day. That was not incentive for us to build that into the design system or into the framework overall because we know that that’s not an effective strategy. But if we look at something that a brand like Eater does, which is evergreen maps that they update every week, and there are only maybe five of them but they drive thirty-five percent of the traffic, that’s a better approach. So we were influencing the editorial strategy through a data-focused approach that then also allowed us to come full circle and prioritize that from a design perspective in a way that would support their audience growth, if that makes sense. It’s kind of a convoluted circle I just described, but all three pieces of that sort of played together to help us prioritize.

Every time we’ve added a new brand up until this point, we’ve taken the core of Chorus, maybe branched off a few things and added smaller pieces of functionality here and there, but over time that has really become six slightly separate versions of Chorus.

Karen:

And it wouldn’t be me if I didn’t ask if you’d like to talk a little bit about the CMS replatforming work that you all have been involved in for quite some time now. I think I’d be curious, even just in general, maybe talk a little bit about the platform but also what benefits that gave you maybe to Curbed or what benefits that gave you in doing a responsive redesign.

Lauren:

Up until this point, the sort of dirty little secret about Vox Media is that all of our brands are on this joint platform that you may have heard about called Chorus. It’s this in-house, proprietary content management system that we built from the ground up. Although all of our brands are on Chorus, they’re all on slightly different versions of Chorus, and that happened because we started with a big sports blogging network, SB Nation, and we built it out to be specific to the use cases around hundreds of community team blogs reporting into a national structure. But then we added The Verge, and then Polygon, and then Vox.com, so every time we’ve added a new brand up until this point, we’ve taken the core of Chorus, maybe branched off a few things and added smaller pieces of functionality here and there, but over time that has really become six slightly separate versions of Chorus. So, when it comes time to roll out one unified ad product, for example, across the board, you have to do that in eight slightly different ways. If we want to, for example, in 2014 when we made The Verge responsive, we didn’t really do a redesign at that point, we just took what existed and made it work on all screens. That was a separate process that only impacted The Verge’s codebase, and obviously at that point The Verge hadn’t been able to benefit from the fact that Polygon already had a responsive framework and SB Nation did.

Curbed represents the first part of a process that we’re going to be going through, through the end of the year, to move all of our brands over to one unified version of our platform.

So, Curbed represents the first part of a process that we’re going to be going through, through the end of the year, to move all of our brands over to one unified version of our platform. And that’s unified in the back-end, so in all of the admin functions for how you create articles and how all of the information is structured, but also on the front-end, the whole design framework that we’re using, and all of the templates, and components and all of that that’s available to all of these brands so that we can more easily roll new features out, we can more easily test and iterate and make incremental changes to optimize for the best page across all of the brands. And in general it’s going to make our lives so much easier when it comes to improving our websites and making them better, because rather than doing all of our work eight different times in eight slightly different ways, there’s just one thing that we can roll out, people can toggle their settings to determine if they want the thing or not, and it is live in the world. And every bug we fix, it benefits all the brands simultaneously; every feature we add, every performance improvement we make, across the board that impacts everyone simultaneously.

Overall we like to get into a process where we do just enough design, just enough comps to do exploration, and then move into a prototype pretty quickly to start to form decisions about it.

Ethan:

Yesenia, I’d like to circle back on something you mentioned earlier, which is that your team was rarely creating comps during this redesign. Could you tell me a little bit more about the tools and applications that Vox designers are using on the regular? Are there projects where you’re creating mockups, or is most of the design process pretty prototype heavy at this point?

Yesenia:

Yeah, so for Curbed specifically, since we had done some of the framework work a couple months prior, and we did do some mocking up for that, and in that case different designers will use different things. For this process, we used Illustrator wireframes and we used InVision to create kind of rough prototypes, but we were moving pretty quickly into a coded thing. So, for the Curbed website, we were able to kind of design the system in a more abstract manner, so I would have my typography system color palette and I could apply that right to the website. The way that the websites that are on our new framework are built right now, we actually have a theme editor built over top of it so that I can go in, and without going into any code, I can start editing the typography and editing the color pallette and different interactions and make changes much more quickly when I’m designing something.

There’s still some instances where we will mock things up, but I think that overall we like to get into a process where we do just enough design, just enough comps to do exploration, and then move into a prototype pretty quickly to start to form decisions about it. Like we just went through a navigation study and a navigation redesign and that was the same case. We spent maybe a week doing research and gathering data, and then about a half a week doing sketches in Sketch and in Illustrator, and then a week building that out into prototypes, and about a day doing some user testing so we could form decisions about it, and then we moved into building the real thing.

We didn’t need to sell people on the idea of the benefits of having your site load faster, especially because such a huge part of Vox Media’s traffic is coming to us from mobile devices on a fragile network.

Ethan:

Nice, that sounds great. And I can’t let this question go by because I’ve got you on this podcast: How did the Curbed team actually talk about performance in the context of this responsive redesign? Yesenia, I’ve seen you give a number of great talks about the intersection of visual design and performance when you’re actually talking about the web. How did that manifest itself in this redesign?

Yesenia:

Performance overall is a huge goal for Vox Media sites. We have a full performance team that works continuously on optimizing and making things faster. For Curbed, it was actually the first site that was built out on a new front-end framework called Presto, and that included a complete refactor of the front-end architecture and the way that was built ended up being much faster than our other Vox Media sites. I think we have some statistics, the page load from the previous Curbed site to the redesign, it was fifty percent faster because of some of the front-end changes. So, this performance team is continually working on things like image optimization, they’re working on the way that fonts are loaded and implemented; they’re working on the ad performance, which is obviously a really important part at Vox Media.

And then from a design perspective, we have a typography performance budget set of 200 kilobytes, and when we do our exploration, we’re continuously making sure that we’re staying within that budget, which I would say that the Curbed typography system is a lot more pared down than some existing Vox Media sites. Once we start moving other Vox Media sites onto this new framework, auditing the typography system and making it a little bit more efficient is going to be a big part of that. But I would say that I don’t think that performance was a big sell, like we didn’t need to sell people on the idea of the benefits of having your site load faster, especially because such a huge part of Vox Media’s traffic is coming to us from mobile devices on a fragile network. So it wasn’t a huge sell, but it definitely is some work to make sure that our sites are loading efficiently.

Lauren:

I would say where performance does come in handy for having conversations with editorial, it’s very easy to want a custom font for just drop caps or a custom gradient that just does this one thing on this one page in a certain way. And though I can’t think of any specific examples of how it came up, I know very often we would have conversations with them sort of educationally about, “We have a budget that we need to stay under, we need the page to render in under three seconds on broadband… The decisions that we make about some of these details that you think are important are actually going to make us not hit our goal.” So, it’s helpful to have some type of budget to talk about in the context of some of those higher touch asks and it helps frame and educate, but like Yesenia said, our teams are just so smart about this that it doesn’t take much to convince them out of a direction that would be bad for performance.

Karen:

Well Lauren, Yesenia, it’s such a pleasure to talk with you. I can imagine that there are other listeners out there that would love to have a chance to talk to you, too. Do you have any advice that you would give people as they are embarking on a major redesign like this? What would you tell people to keep in mind?

Yesenia:

I would say that if embarking on a responsive redesign feels like a daunting thing, if figuring out how you’re going to take all your content and make it work in a responsive perspective seems daunting, I would say to view it as an opportunity to really evaluate your content and prioritize what really matters to your audience. I think this is something that we still come across continuously, and thinking about what’s going to be the most important and the most important to someone that has limited screen space, limited bandwidth really helps to evaluate your content overall and prioritize what really is going to matter to your audience.

Lauren:

I could not have said that any better.

Ethan:

Well Lauren, Yesenia, I just have to say, one of the things I deeply respect and admire about Vox product is just how forthcoming they are with sharing everything they’ve learned about their digital design work, and it’s been really great to have you on the podcast to continue that. So, thanks so much for your time.

Yesenia:

Absolutely, thank you so much for having us.

Lauren:

Thank you. Is this a good time to plug product.voxmedia.com?

Ethan:

You plug away. [laughs]

Lauren:

Consider it plugged. [laughs]

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, Media Temple. Go to mediatemple.net for easy to use hosting and 24/7 customer support.

If your company wants to go responsive but you need help getting started, Ethan and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.