Episode Transcript

Ethan:

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

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, I couldn’t be more excited—it’s almost like game day—to be speaking with Yesenia Perez-Cruz and Sanette Tanaka, who are here to talk to us about SB Nation. Yesenia, Sanette, thank you so much for joining us.

Yesenia:

Absolutely! So happy to be here.

Sanette:

Thanks for having us.

Karen:

But first, let me welcome our sponsor, FreshBooks. I personally have used FreshBooks to manage my invoicing for many years now. FreshBooks has made my life so much easier by helping me keep track of who has paid me, and who hasn’t. It’s been a great product for years, but now it’s even better, with an all new version redeisigned from the ground up. Now it’s even easier to send invoices, set up online payments, and manage expense reports. Their dashboard, notifications, and automated late payment reminders will help ensure you get paid on time. FreshBooks is offering a 30 day, unrestricted free trial to our listeners. To try them out, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section. They’re great, and you should totally try them out.

Ethan:

So, Yesenia, Sanette, maybe you could tell us a little bit about what you do at Vox Media, and your role in the SB Nation, and tell us a little bit about that redesign in general. Yesenia, do you want to go first?

Yesenia:

Sure. So, I am the design director on the Vox Media owned and operated platform team, so my role in the SB Nation redesign—which was actually part of this longer project that we have been doing to move all of our brands onto one unified platform, so that was just one piece of it—so my role in this has been kind of setting the direction and working with the designers on my team to create the design system and to work on the user experience for SB Nation and then all of the other brands that we’re moving onto this unified platform.

Sanette:

I am a senior product designer on Yesenia’s team, and I also work on the designs for SB Nation, for our other brands, for all of the other pages and everything under the larger overarching project.

Ethan:

Well, once again, welcome. It is wonderful to have you both here. For many of our listeners who might not be like me and who is very, very well-versed in the world of sports—oh yes, I know everything about sports—maybe you could tell us a little bit about SB Nation. Because, if I’m correct, it’s not just one website, right? It’s much, much broader than that.

Yesenia:

Right. SB Nation was how Vox Media got started. I think it started as one Athletics Nation blog, and really Vox Media grew out of SB Nation. So at the time, I think we have over 300 individual SB Nation team sites, and really the mission of SB Nation is it’s all about the fans. The fans that run the team sites, the fans that are there on game day and commenting, the fans that are posting content and sharing content. Which, the new SB Nation refresh had a very appropriate new mission, which was, “Come fan with us,” and that really represents what SB Nation is all about.

Ethan:

Wow, so really we’re talking about the responsive redesign of well over 300 websites. So, I would love to hear a little bit about how you actually managed to kick that off. I know that Vox does a significant amount of responsive design work, but when you’re actually talking about redesigning hundreds of websites at once, were there any specific challenges or discussions you had to have around responsive design at that kind of scale?

Yesenia:

The funny thing about the SB Nation relaunch and the SB Nation team site relaunch is it happened at a pretty quick pace, because we have been working on this project to move all of our Vox Media owned and operated brands onto one unified platform. So, you can imagine the process started way back last year when we were deciding what the Vox Media article template was going to be, and what the key components were going to be. And then we started another project to define what Vox Media home pages should contain and what our audiences are looking for on a home page. So, leading up to the SB Nation redesign, we had a Verge relaunch, we had a new Vox.com home page, we had a new Polygon home page; Eater followed shortly after SB Nation.

So, when we start the conversations with editorial about relaunching, like we did with SB Nation, the conversations that we have are what are your goals? What does your audience need? What are their goals? What audience needs are not currently being met with your existing site? And then we have conversations about do we need to add something to our existing product and design system to support those goals, or do we have solutions within our design system and within the products that we have to help you meet those goals? So, those are what the early conversations are like.

So, we can have a kick-off meeting with our brand identity team that works on the new branding, and then our SB Nation editors will be there, and their team, and we’ll just come to the table with here’s what we currently have as part of the home page product, the article product, the features product. What goals are not currently being met with this? And then that will just kick off the whole process. So, we might do some additional wireframing or product evolution based on those conversations, and then we work with the brand identity team to translate the brand and the new branding onto the platform.

Sanette:

And adding one more piece to that: So, like Yesenia mentioned, SB Nation is a network of many, many websites dedicated to different sports teams, and then we have SBNation.com, just kind of the flagship site. So, the way this project was split, we addressed SBNation.com first and then we addressed the team sites second. That was a way for us to vet our initial approach and our designs for SBNation.com before we moved onto the team sites. So, that was another way that we kind of approached this project in a two-pronged way.

Karen:

I know you all have a lot of experience in taking a mobile-first or responsive approach to these redesigns. As you were thinking about the specific needs of SB Nation readers, was there anything about the mobile context that seemed particularly relevant to you, like the way that sports fans are checking their phones or keeping up on what’s going on with the scores, and did that contrast at all with how you might have conceived of what a desktop reader might prefer?

Yesenia:

Yeah, that’s a really great question. So, one of the things that comes up with the SB Nation audience a ton is the mobile commenting experience and making sure that that loads and performs as quickly and efficiently as possible. So, on a team site on the day of a game, they could have a comment thread that goes up to over 1,000 comments. So, they’re very focused on that experience and making sure that it’s as smooth as possible. For this relaunch, we didn’t get to spend a ton of time redoing the commenting workflow, so a lot of our task was more on the engineering side and making sure that it’s loading quickly and it’s not lagging for commenters.

The other thing that we designed new, that we added as part of our home page product to serve a mobile audience, was what we call The Morning Recap, which was a new template that is focused on summarizing kind of the news in the day in the morning that a sports fan could have with their cup of coffee, and they could catch up on everything that happened the night before. This was partially because when we were gathering data about SB Nation’s audience, we found that the peaks of usage—so, when people were going to the site—were slightly different between mobile audiences and desktop audiences. So, a desktop audience is mainly there around lunchtime and they’re looking for something to read, a mobile audience is there kind of at night when a game is on. And then the morning recap was kind of our attempt at seeing if we could change audience behavior by creating a new product that could target mobile audiences and see if we could create a habit of having them come to the home page in the morning.

Sanette:

Right. Adding a few other examples onto that: everything we do, we look at it through a mobile or small screen lens, and with SB Nation, all of the research that we did, our data and analytics team pulled a bunch of stats about home page usage. Another decision that we made was to expose more nav items, and that was something that was a part of our navigation redesign last summer that we carried over onto the home page in the past month with the SB Nation relaunch. We found that the navigation menu is one of the top-clicked items on the mobile home page. So, our users were looking to get to team sites, they were looking to get to our blogs, so we exposed more of that content upfront.

Ethan:

One thing I’d like to hear a little bit more about is the design process you both used to make this responsive redesign happen at such a scale. And specifically you both touched on earlier was how you worked with editorial and sort of identifying needs that they might have had, and how to actually work that into the larger design system you were trying to create for SB Nation and for other Vox products. Could you tell me a little bit more about how that collaboration happened?

Yesenia:

So when we have a brand refresh, it’s a really big collaboration with our brand identity team as well. So, they kick it off and before they even design anything, they start by working with the editorial team to define the mission. They define that new mission, “Come fan with us”; they wrote statements about what the new brand would mean, which I think is one of the most interesting things that our brand identity team does, is before they start creating anything visual, they write down what the new mission for the brand is going to be.

So, they kick off that process, and something that our brand identity team has done is they start by creating the brand system and thinking about that holistically instead of just designing a website. So, they start to think about things like the bigger picture of the brand language. They’re thinking about things like how the brand looks in video and off-platform, and they were finding those elements. And then when we come in, we’re working together to define how that is going to work on-platform.

So when we kick off and we start talking to editorial, we want to understand what some of their content needs might be. So, that was like the very initial conversation that we had, “What are your content needs?” And for SB Nation, it was this idea of The Morning Recap, it was a better template during events and being able to signal all of these events are happening and point to where you can find event content. And then some additional needs to be able to better promote their video content and their podcast content. So, everything in addition to the written content, which their current site did a great job of showcasing. So we have our brand identity team and they’re working on defining the holistic brand; we’re working on identifying content needs that our current design system or end product doesn’t support; and then once we have done some wireframing and reviewing with editorial, then we’ll start kind of merging those pathways and figuring out how we can translate the brand best on-platform.

Sanette:

One more interesting thing to note is when we consider editorial for SB Nation, more so than our other brands, we actually have a lot of different levels of people we’re working with. We have the top editors that we’re working with; we also have bloggers that are part of all the different SB Nation communities; and we also have community members who create content known as FanPosts and FanShots. So that’s community-driven content, as well as comments, which is a big, big part of our content and our space in the SB Nation hemisphere.

So when we are considering who to talk to and how to understand editorial, it’s many different levels and we work with our product manager to identify how and when to bring them in. So that could be everything from a survey that we disseminated early to all the writers to understand how they use SB Nation/how they create content; to creating posts, sharing wireframes, and sharing those initial designs with the actual community members, with the users, with the readers. So, it’s not quite as straightforward as some of our other brands, which makes this project a little bit more challenging, but also really rewarding in being able to reach so many different people in different levels.

Karen:

Let me follow up on that and ask how you planned and scoped a project of this magnitude. We like to ask people how they plan their redesign, but when you’re talking about 300 sites and having to engage with the community of creators and writers and run concepts by them, how did you know how long it was going to take and how did you anticipate any problems that you might run into along the way?

Yesenia:

Luckily our product manager has been at Vox for a very long time and he has great relationships with the SB Nation team, so he did a lot of the planning and scoping. But I think the biggest thing that we had to figure out was the communication. We kind of worked backwards from a set date, which was May 1st for SBNation.com, because that was actually tied to a sales launch, and we worked backwards in terms of communication. So, “If we need to give the SBNation.com team access to a sandbox so they can start viewing their content two weeks before launch, then we need to start design at this point.”

It was similar for the team sites, as well. We worked backwards from when we wanted to have league managers and bloggers preview the design. I think what we really had to get right with SB Nation, as Sanette alluded to, was we couldn’t do a very quick rollout. We had to give a bunch of previews and heads up about what was happening, especially when it came to the team sites. So, SBNation.com, the flagship, that doesn’t have as many bloggers or part-time bloggers that are contributing to it, so that was a good one to start with, and that set the foundation that change was coming and that things were going to change on team sites in the next month. And then from there, we just had a lot of conversation with the SB Nation editorial team, the editor-in-chief, but also with their league managers who would help us figure out the best communication path with bloggers.

Sanette:

Yeah, I think this final step of this project, introducing the new branding and the new home pages, we really kind of fell into our own with our communication plan. But we’ve been introducing new products, we’ve been introducing new article design, new feature templates, new story streams for over a year now. So, SB Nation and our writers, bloggers, editors, are used to receiving new products from us, and so we’ve been able to, in addition to iterating on our process and our designs, we’ve been able to iterate our communication plan, and I think, especially this latest launch, we’ve been able to give more heads up than we have in the past. It certainly helped in the rollout and then just easing their expectations.

Karen:

And what about changes that you made to your content management platform, Chorus? How has this iterative approach to design for the various products changed the way that the content management system or the platform development has gone?

Sanette:

I think we’ve gotten better and better in adapting the system that we use to design our content management system. So like Yesenia mentioned, we started this project over a year ago with the launch of Curbed, which is the first brand that we introduced on our new content management system. And then since then, we’ve been going through rather quickly, bringing all of our brands over to the new system. As we bring over each brand and as we started looking at every part of the platform—and when I talk about the platform, I’m referring to all the different pieces you basically see on the website. So, the articles, the navigation, the feature template, the story page, the home page. So as we go through each one of those, as we bring them onto every single brand, we’ve solidified our approach, we incorporate more research in the beginning, we go through more rounds, we bring editorial in sooner.

I think the two best examples of our process has been the home page project and then the feature template project. With home pages in particular, even after we had a base design, we’ve gone through many, many rounds with our editorial team to figure out how to apply it to their sites and figure out the best way to support their editorial strategy. That’s where design decisions—like what Yesenia mentioned earlier, creating new layouts to support our Morning Recap layout, to support different needs of SB Nation, writers and editors and readers throughout the day—really come into play.

Yesenia:

The other thing that we need to be really cognizant of, and this is certainly the case with SB Nation, because we’re dealing with so many team bloggers, so it’s a little bit different than The Verge, which has a handful of editors that are working on programming the home page… We have to be very mindful of not creating something that’s going to create a bunch more work for the bloggers to just keep things running and keep things updated. So even though we created some new hero configurations and even though we changed how things, like videos, are displayed on the front-end, we tried to not change too much in terms of how team bloggers need to program their home pages or how they need to run their sites. Because these can really often be part-time people that don’t have a ton of bandwidth to be messing with layout, messing with image cropping, messing with a bunch of things on how the front-end looks. So, we do have to be really careful with not overcomplicating things and keeping the process of updating things on the back-end as simple and straightforward as possible.

Ethan:

This might make for a good time for me to ask about performance then, because this is something that I know is near and dear to your heart, Yesenia; something you’ve spoken about quite a bit at conferences. As we think about performance not just as a technical problem but also as a design criteria, how did you actually manage to build a site that’s responsive at this scale but also as fast as it is? Tell me a little bit about how you managed that process.

Yesenia:

Yeah, so we have a performance team and we have our front-end engineers that are constantly focused on improvements to how quickly our sites load. But I’ll point out a couple of things from the design perspective that we are especially mindful of. So one is typography, and we have a set typography budget of 200 kilobytes. So when we are trying to design a new typography system, we’re really mindful of staying within that budget or staying below that budget.

The other one, which is especially tricky and more complicated, frankly, than typography is images and image ratios and image cropping. So, one thing that we’re also mindful of is that. To give you an example, when we were designing one version of the hero, we had a really large image in one of the designs, but it had a block of text over it. One of our performance engineers, Jason Ormand, he pointed out right away that that isn’t going to be the best bang for our buck when it comes to performance or design, because we’re going to be loading in a super large image, but it’s mainly going to be covered by something. So, we also try to be mindful of that, make sure that we are not loading in giant assets that aren’t going to have a large payoff, if it’s going to be obstructed.

The other thing is we have the picture element on our home pages now, so that adds some interesting challenges on the design end, because we want to make sure that we have consistent aspect ratios between, like, let’s say our mobile home page. We want to make sure we have consistent aspect ratios across all of our brands, so that adds some interesting challenges on the design end, as well.

Karen:

Let me ask more broadly how you think about looking at data and other metrics either as part of the design process or to evaluate if the design changes that you’ve made are working? How do you look at analytics data or user testing data, or any other research that you might be able to get as part of this process?

Sanette:

We rely on analytics data so much. We have an incredible data and analytics team, and we work with them at the beginning of every project to understand how our current products are being used. One of the interesting things with this project is we’re not inventing anything new. We weren’t creating a new way of telling the story, we were redoing our article page, redoing our feature page, redoing our home pages. So, we’re lucky that we have products we can look at and that we can draw from to understand what we need to keep and what we need to change. So, we will work with them from the beginning, they will give us a report with questions that we have with other insights that we need, and then throughout the process we’ll continue to check in with them and we’ll continue to get more clarification when we need it.

And then as we’re going through the design process, one thing we haven’t had as much of a chance to do that we’d like to do in the future is do more user testing. We work very closely with our editorial stakeholders; we don’t do qualitative research as much right now with our users. But after we introduce a design on a brand, we will follow it and we will continue checking a set of metrics. Those include page views, session time, return visits, click-through rates. We’re looking to make sure our key metrics aren’t dropping. We’re looking for improvement, also, clearly. We’re lucky in terms of because we have so many sites and because we’ve been rolling things out piecemeal, we can adapt the approach later. So, we can take what we learned from The Verge home page we launched, for instance, in November and apply it to SB Nation.

Ethan:

Speaking of things you’ve learned, I would love to hear if you both happen to have advice for our listeners. If anyone is out there listening to this podcast or reading this transcript, what are one or two things you’ve learned over the course of redesigning SB Nation that you’d like to share with them?

Yesenia:

I think one thing that we learned as we were embarking on SB Nation was really making sure that our communication was just solid across the board. Which, when we were dealing with this much scale, we just had to make sure that we were really clear with the SB Nation audience about what we were doing, because so much of SB Nation is built from the audience up, so we had to respect them and make sure that they were really clear on what we were doing. And then also making sure that we just were really aligned with all of the other change that was happening with the branding. So, working really closely with brand identity, working really closely with the new editor-in-chief, and making sure that we were all working towards the same goal and that all of our goals had our audience in mind.

Sanette:

Yeah, and I would say the piece of advice that I have is when you’re solving a problem, make sure that those problems are very clearly defined. It was very helpful for me and for the other senior designers on the team to know exactly what we needed to solve with the home page mocks. And the pieces that we were focusing on were what Yesenia mentioned earlier: designing for an event recap, to go over the results of a game, to bring in more social; and to address some of those high points of traffic, particularly in the morning and lunchtime, when our users are coming to our sites and trying to get a recap of things that had happened the night before or the day before. So, having those clear problems and goals really made it possible for us to zero in on our designs and be very specific and also finish the project with a really short deadline.

Karen:

Well, I want to thank you both for taking some time out of your day to speak with us. Yesenia, it’s always a pleasure to talk with you, and Sanette, I hope we’ll get to talk again. Thank you.

Sanette:

Thank you.

Yesenia:

Thank you so much.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design Podcast. Thanks also to our sponsor, Freshbooks. Go to Freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section for a 30-day free trial.

If your company wants to go responsive but you need help getting started, Karen 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 if 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 again for listening, and we’ll see you back here next week.