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 beyond delighted. We are here talking to Kat Bagley and Keri O’Brian about Yale Environment 360. Welcome!

Keri:

Hi, thanks for having us.

Kat:

Thanks for having us.

Karen:

So, I’d love it if you could just introduce yourselves, maybe tell us a little bit about Yale E360, a little bit about your own role on the project or with your organization. Kat, do you want to go first?

Kat:

Sure. So, I’m the web editor for Yale E360, and we are an online nonprofit environmental news site. We’ve been publishing since 2008, and we’re based here at Yale but we cover non-Yale news. I mean, we really cover anything dealing with the environment, so we cover issues across the globe but also in the US—policy, climate change, energy, conservation… And we work with a team of journalists, scientists, and policy experts to craft our content. So, as the web editor, in addition to my editorial duties, I also physically manage our websites. I upload all the stories, find multimedia and images, and also manage our social media accounts.

Keri:

And I’m Keri O’Brian. I am a designer at Upstatement, which is a web design firm located in Boston. Actually, the most dedicated listeners to your show will probably have heard some of my colleagues on here before, so it’s cool to be joining the ranks here. But yeah, so I was the designer on this project, along with one of my colleagues, James, and our creative director, Scott. Yeah, Upstatement, our bread and butter is really editorial work, and Yale E360 was kind of like our exact type of project that we love to dig into. So, it was a really fun one for us.

Karen:

Well, let me ask first if, as you were planning this project, was the fact that you were going to go responsive a given, or was there any question or concern about whether responsive was the right way to go? Did you have to convince anybody that a responsive site would do everything you needed it to do?

Kat:

No, it wasn’t even really a discussion. We just knew that that was what we needed to be a modern, up-to-date news site for our readers. So, it was just sort of assumed that that was the direction that we were going to go.

Keri:

Yeah, that’s pretty baked into our process at this point. I mean, we’re always saying, “Interrogate the premise of any assumption that you have,” but that’s one that we pretty firmly know what we’re going to do when we start off.

Ethan:

Well, since you mentioned interrogating assumptions, one thing that I know that a lot of organizations find challenging is some of the assumptions they have around mobile users and the things that they need or the things that they’re trying to access. So in the early days when you were planning Yale E360’s responsive redesign, how did you talk about mobile and desktop users? Do they need access to the same information? Do they need access to different content? How did you talk about that?

Kat:

So, we wanted the experience on our desktop to be the same as for our mobile and tablet users—same information, same quality of design. We were finding that a lot of our readers… When we launched in 2008, most of our readers, maybe all of our readers, were coming to us from desktop. But that had been changing gradually over the years, and in the last few years particularly, we had seen this migration more towards mobile and tablet. We realized that our old website was not very user-friendly for those readers, and so we wanted to make sure that whatever our desktop users were getting, that mobile was getting the same experience.

Keri:

Yeah, absolutely. The thing that we kind of kept coming back to was we wanted this to be a thing that was just delightful to read from wherever you were, wherever you were accessing it from; that kind of felt like the guiding principle of what a successful redesign looked like. Kind of across the board it was like, “If you can read it and it looks beautiful and it doesn’t hurt your eyes and it makes you happy when you read it, then that’s success.”

Karen:

One of the things that comes up when people talk about wanting to provide a consistent experience across all sizes of screens is that sometimes a really cluttered desktop experience has to be cleaned up and pared down so that it can work effectively in a responsive format. Did you have to get rid of anything as part of this process, and if you did, how did you decide what to keep and what to get rid of?

Kat:

So, our old website was pretty cluttered. Yale E360 is unique in that because we are a nonprofit news site, we don’t have any advertisers on our site, which really opens up the possibilities for what you can do with design. It allowed us to really have a clean, pleasant, beautiful design without having to think, “Okay, we’re going to have to put an ad in here and an ad in there.” So, in terms of content, we didn’t have to lose anything, but our old website had this sort of cluttered right-side column that had all the categories, and you could search by video and different categories, and it also had fellow environmental news sites that we thought you should follow. It just was way too much information, and it was a little bit of a no-brainer to get rid of it. We knew that it would be very hard to incorporate that in a new design. Keri and her team really did an amazing job finding solutions for the categorization that had been in that column, and finding different ways to integrate it into the website.

But Keri, I don’t know on your end what kind of conversations you were having in Boston. [laughs]

Keri:

[laughs] Yeah, no, I mean, I think the same. We knew we were coming in at an advantage, that the content that was there was actually really good and what we needed to do was just clean it up, make it a little bit better organized, easier to navigate. But in terms of the raw materials, everything was there for this redesign to be really successful. So, we were really looking at it as a chance to kind of enhance what Yale E360 already had and give you guys a better platform for telling stories rather than suggesting a whole new way to do that.

Ethan:

Keri, I’d love to hear a little bit more about how you approached the design process for Yale E360. As you mentioned in your intro, we’ve had Upstatement on a number of times, so I’d be curious to know if there was anything different about how you started talking about the aesthetic of the new site with your client, and if that’s changed over the years.

Keri:

As we were designing this thing, one of the things we kept coming back to, we kind of explored a few different options, but the design style that we started gravitating toward and that I think the Yale E360 team really latched onto was this idea of something really readable—even from like the home page perspective, which is not always I think the approach that is a given on a web design project. You’re often trying to think, “Okay, how can we get kind of as much as we can up top?” I mean, sometimes you’re thinking that, sometimes you’re not. But yeah, so kind of readability and being able to have this be something that was a kind of comfortable transition for the really engaged readers that Yale E360 already had was really important to us.

So, I would say one of the main things we were thinking about was creating kind of a design that felt timeless, so as to not alienate the long-time readers of Yale E360, but that also when new readers came in, that they felt immediately right at home. So, in terms of how that design kind of came about, we had a little bit I guess of a different design process than sometimes we normally do. We’re not always creating different comps to choose from for clients, but this was one scenario where we came in and we had some comps that were kind of a little bit more modern, a little bit more on the traditional side, and kind of somewhere right down the middle. And we actually I think ended up right down the middle, kind of taking some of the more modern typefaces and things and incorporating those into the updated logo type, and then relying on some of these beautiful classic typefaces, which you see on the site—Ashbury, which is just a beautiful serif typeface that you see on the site. Kind of finding that marriage was what we really keyed into and I think something that Kat and the team over at Yale E360 kind of immediately responded to, as well. That’s how we settled on it and felt like we had found the right thing.

Kat:

I would like to add that at the very beginning, even before they started working on full-fledged designs and options for us, the team came down to New Haven and we had a day-long brainstorming session in which they brought different visuals, and different magazine websites and newspaper websites, and illustrations, and graphics, and we really got a chance to just sit there in a room and talk with them about what we liked and what we didn’t like. What was remarkable was seeing them take all of that input, bring it back to Boston, and create something that was so on point for what we wanted based on those conversations. So, being able to meet in person and talk about sort of design style was really important for laying the groundwork for what they then went and worked on and then presented to us later.

Keri:

Yeah, absolutely. Those early conversations are so important. I think one of the challenges that you can run into a lot is finding a shared language to talk about your likes and dislikes, especially when there’s kind of disparity in the language that people have to talk about design. So, being able to sit down with you guys and kind of even going through what feels like, or can feel like, an elementary exercise of looking at a visual and saying, “How are you responding to this, and why?” and what can we learn from that can be so important and really help you draw conclusions as to which direction or directions you should begin exploring.

Kat:

Yeah, it was remarkable, and this is one of my favorite anecdotes… I remember as we were getting deeper and deeper into the design process, this project was really a sort of a total rebranding for us. The logo was redone, colors were changed… And I remember when they sent us a few of the logos and the overall website look, they had sent a sort of peachy orange color that’s on our website now. I loved it, but there was this feeling like, “Oh, but wouldn’t it look better in a different color? I don’t know. I want to see options.” And they sent a few options and we immediately were like, “No, you guys were right. You’re spot on. This is exactly what we needed and what it should look like.” [laughs]

Keri:

It doesn’t always happen like that, let’s put it that way. [laughs]

Kat:

[laughs]

Keri:

So, that was awesome. And yeah, I mean, specifically in regard to that orange-y color, I think we originally were like, “Well, does it have to be green…? It says ‘environment’ in the name. Does it have to be green?” Turns out, no. No, it does not.

Kat:

I think that’s just the automatic fallback for any environment-related website, whether or not it’s news or a nonprofit green group that does activism or anything. It’s like, “Oh, environment, it must be green and blue!” Those are like your only color choices. [laughs] So, it sort of makes us stand out a little bit more.

Karen:

Let me shift gears a little bit here and ask about the content and the editorial direction for the site. So, did you wind up changing the way that you present your content at all? Did you come up with new editorial products, new article forms, and did that change the way that you publish, or change anything in your content management system?

Kat:

So, we got a whole new content management system, and one of the things that with our old system and our old design, we were really limited in how we could present graphics. So, it was a very text-focused website, which was great at the time, but we found was more and more limiting as the years went on. We couldn’t put in graphics so that they would be big and beautiful and legible for our readers; really detailed graphics were really tough. A lot of our articles deal with the science behind these issues, and we want graphics and we want different ways that we could explore data visualization. We really couldn’t do that on the old site. So, when we went into this design process, that was a major focus for us, was wanting to open up the display possibilities both for photographs but also for graphics and illustrations and things like that.

So, it’s been a bit of a mind shift. I feel like part of the conversation in the design process was, “Okay, what tools are we going to use now, and what tools can we build into this that we will grow into as the years go on?” Because we are a very small staff here at Yale E360; we’re just three editors. So, everybody takes on a lot of work. Unfortunately, unlike other big news organizations where they have entire teams dedicated to the multimedia components of big stories, we don’t have that here, and so for a long time our focus has been the written story, and the photographs and other graphics have been a bonus but haven’t been a major focus for us. So, this new design, really we’ve been growing into it, which has been really wonderful. Almost a year into the relaunch, we’re still finding new ways of using the tools that Upstatement built into the system for us.

So yeah, we do think a little bit more visually about our stories. One perfect example is pretty soon after we launched—actually, I think it was even before we launched—we had a story idea come in about how the world had reached this 400-parts-per-million threshold for carbon in the atmosphere. The story that the writer was proposing was looking at how did we get to this point, how does it compare to our long history of Earth millions of years ago, and what was the situation then and how does it compare to now, and where do we go in the future now that we’ve past this 400 PPM threshold. This is a story that’s important in written word, but it’s more important to be able to show the visuals. We actually got the story idea, and we had a sense at that point of the types of tools that we were going to have with the redesign, and we held off publishing it until we had the new website. And when you go to that story, it’s by a journalist, her name is Nicola Jones, and when you go to the website, that story is just full of graphics and data and illustrations. It sort of was a new way of telling stories for us. We still very much rely and sort of go back to those text-based stories, but we’re gradually moving into exploring different ways of storytelling.

Keri:

Yeah Kat, hearing you say some of those things just makes me so happy, because that was one of the biggest, if not the biggest, charges that we had in this project. A year after you send off a project, you’re not still usually sharing things around of being like, “Hey, this looks so good!” with the team that worked on it, but that’s something that actually happens pretty frequently with the Yale E360 project. James and I will kind of go back and forth and be like, “Hey, have you seen this article? It looks awesome. They’re using the big topper,” or, “They’re using the image layouts that we built in.” It’s just really exciting to see.

I feel like sometimes we get into this scenario where we want to make all this stuff and create all these options, and there’s sometimes to much and so the tendency is to freeze up and be like, “Well, I know that these two layouts look good, so that’s what we’re going to go with all the time.” So, it’s great to see you guys still exploring stuff. Even today, I think he knew I was recording today, but he still sent me an article and was like, “Have you seen this? This looks awesome.” So, it makes me really happy to hear that. It also makes me think back, again, to the first meeting that we had all together, and you kind of walked us through your, at the time, current content management system…

Kat:

Oh my god. [laughs]

Keri:

Yeah, it was painful. As Kat was going through it, she was like, “Are you sure you want me to keep going? Like, you really want to see how I do this whole thing? ‘Cause we’re going to be here a while.”

Kat:

[laughs]

Keri:

It was painful. So, I’m happy to hear that it’s kind of better. [laughs]

Kat:

It is. It’s a million times better.

Keri:

Yeah, and we used Craft, which I think that was the first time that we had used Craft at Upstatement. I was super impressed with it when we started using it. It seemed really easy; it seemed like a good fit for you guys. So, I’m glad to hear that it indeed was.

Ethan:

That’s fantastic. One thing I’d love to hear a little bit about, as I was listening to you folks talk about some of the more complex editorial choices you have to make, is something that a lot of organizations struggle with when they’re working with a moderately complex responsive design is supporting devices. I’d be curious to know if that came up at any point during this redesign, and if so, did you have to put any testing strategies into place, or any processes into place to bring devices into the design process? Tell me a little bit about that.

Keri:

So, at the beginning of every project we work with the team to fill out this technical document that we call the “Technical Assumptions & Constraints” that kind of talks about which browsers are going to get A-level support all the way down. With Yale E360, I don’t remember there being anything too unusual, and I think with the type of site it is, we were kind of able to have support across the board that was identical, or nearly identical.

Kat:

Well, and I remember later in the process, as we were testing the site in general, I think this was happening about a month or two in advance, on our end we had a couple of people testing out how the new website—both the CMS but also the published website—would look on a phone or look on a tablet, and send back any comments. “Oh, the spacing is kind of weird,” or, “This might look kind of odd.” So, I know that as we were nearing the completion of the project, those little tweaks with how it would look on different devices was something that we were all testing.

Keri:

Yeah, absolutely.

Karen:

Let me ask more broadly how you measure the success of a redesign like this. What sort of data or analytics are you looking at to find out if the site is working for you and your readers?

Kat:

We heard right off the bat from our most loyal readers that they loved the website redesign. When we did the relaunch in January of 2017, we sent out a note to our newsletter, and those are the people that have really been with us, most of the time, from the beginning and they’re some of our most loyal readers. In addition, we also launched it on Facebook and on Twitter and said, “Look at our new design. We’re really proud of it. We worked with Upstatement on this, but send us your feedback. This is a process. We’re bringing over eight and a half years of content into this new system, so we’re going to need your help. If you find anything that didn’t transfer over or whatnot…” And we had so many people write in after the new website launched, saying that they loved the design. A lot of people commented that they loved the font, which I do, too; Ashbury is really beautiful.

And then we’ve just been tracking over the last eleven months what’s been happening with our traffic, how are our stories being shared—that’s both who was sharing them and how often they’re being shared, what types of comments are happening on our website but also through our social media networks. And, of course, Google Analytics… We also, because we’re based at Yale, Yale has an analytics system as well, so looking at those numbers through that system. It’s been interesting, because we have seen shifts in our audience since we launched. We have more and more younger readers, that eighteen to twenty-four range, more people are coming to us. But we haven’t lost our loyal readers, which is really important to us. We’ve seen our audience really grow and really interact with and appreciate the new design.

Keri:

That’s great. Yeah, I think one of the things that we were really shooting for was, knowing that the content on the site was not changing all that much and strategy-wise there wasn’t a huge shift happening, we were kind of wary of saying, “Expect your overall traffic to your site to increase.” We find that that’s really hard to do unless there’s a shift in your content strategy in getting people to the site. So, one of the things that we kind of made a note for Kat and the team over there to be looking out for was how much engaged time people were spending. Are people bouncing off the site? Are there people staying engaged? Are there people who are returning? Are they reading multiple stories in one sitting? Those kind of things felt really important.

Ethan:

Well Kat, Keri, this has been an amazing chat. I can’t thank you enough for coming on the show. But before we let you go, I would love to hear if you happen to have any advice for our listeners. If someone is out there listening to this episode or reading this transcript, do you have one or two words of wisdom that you’d like to share with them?

Keri:

I guess one thing that I would say is I feel like there’s kind of a lot of pressure in web design these days to create something that’s completely new and that no one has ever seen before, and things like that. I think with Yale E360, that’s not this site. It’s new and different and beautiful, but it’s nothing crazy, and that’s okay. It’s something that I think will kind of last for a long time, which is not always what you’re shooting for in the technology industry. But if that’s what the audience kind of demands from you, and also if that’s how the content speaks to you, then follow that. Don’t necessarily resist it.

I don’t know. “Go along for the journey.” [laughs] That was a little cheesy, but. Also, be a good person.

Kat:

I would say Yale E360, we’ve been around for almost ten years, and this is the first redesign that we’ve done, and we knew that whatever was going to come out of this process, we wanted it to have longevity and have a classic look. We didn’t want anything too flashy or too unlike us, or something that in a year and a half was going to look outdated or be too much. So, we wanted to really stay true to who we were but push the needle forward and basically just have a classic, clean redesign.

It took a long time for us to get to this process. We had been talking about redesigning the website for years. I came onto the staff in early 2016, and they had been talking about it for years before I had started, so it was something that had been in the works for a really long time. We are really happy with how it’s turned out. As I talked about earlier, this is a system that we can grow into. We’re still exploring and testing out and playing with all the capabilities that Upstatement put in for us, and that’s really wonderful to know that this is something that, years moving forward, we’ll still be able to use and play with.

Karen:

Well Kat, Keri, I think that’s great advice and it really shows in the quality of the website. Thank you so much for taking time to come and talk with us today. It’s really been a delightful interview.

Keri:

Thank you so much.

Kat:

Thank you for having us.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

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.