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 M.:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, I am so excited my molecules may be sublimating from a solid to a gaseous state during this call. We are joined today by Ethan Winn and Sarah Thompson from Seventh Generation. Welcome.

Sarah:

It’s great to be here. Thank you.

Ethan W.:

Hi.

Karen:

So, I’d love it if both of you would introduce yourselves and tell us a little bit about what your role is at Seventh Generation, what you’ve been doing with this redesign. Ethan, why don’t you kick us off?

Ethan W.:

Sure. So, I’m a senior tech strategist and the lead architect at CoLab Co-op, and my role was working with Sarah through initial planning phases to scope the project and plan it, and then with our dev team to implement it on a Drupal platform.

Sarah:

And at Seventh Generation, I call myself a marketing technologist. I lead our website team, leading the design and development project cycles, marketing technology platform. I work on user experience across our digital initiatives and work closely with our product and brand communications teams and also oversee our e-commerce business.

You’ve probably heard this before, but it really was a no-brainer to go responsive.

Karen:

Very impressive. I’m so excited that you’re able to join us today. So I’d love to find out, when you were planning this redesign, how did you talk to your stakeholders and your executives and everybody else at Seventh Generation about going responsive? Were there questions or any difficult conversations about responsive as a methodology?

Sarah:

You’ve probably heard this before, but it really was a no-brainer to go responsive. We let our users lead us to where we need to be, and we know our user base and our target market really well. Seventh Generation has been a content company for—I’ve been there for eleven years, and that entire time content has been at the forefront of how we interact with our consumers in the digital space.

Mobile traffic was about one percent of our total traffic, and at times today it’s over fifty percent. So again, a really, really clear message from our consumers and our user base.

We made a strategic shift and a strategic decision in the past year and a half to take our website from what had been a product focus for several years back to a content and storytelling focus. And really, there was no choice but to make it responsive. That’s where our consumers live; they’re on whatever device wherever and they are checking their emails and clicking through to an article and then pinning it or sharing it out on Facebook. Again, there was just really no choice.

One other little piece that I noticed when I first joined the digital team six, seven years ago now—maybe eight, thinking back—mobile traffic was about one percent of our total traffic, and at times today it’s over fifty percent. So again, a really, really clear message from our consumers and our user base. We didn’t have any difficulties internally communicating the value of the decision.

When we’re talking about our core consumers, we don’t differentiate them between mobile and desktop because it’s the same person, it’s just a matter of where she happens to be and which device happens to be closest at hand.

Ethan M.:

I’d be interested to hear a little bit more, in the light of all that explosive mobile growth, how Seventh Generation talks about mobile users and desktop users. Karen and I have interviewed a lot of different organizations and we hear different approaches. Some people just feel that mobile, desktop, it doesn’t really matter—users basically want the same information regardless of the device that they’re using, and other organizations actually feel that there’s a bit of a strategic differentiation between the two. Tell me a little bit about how mobile and desktop are talked about at Seventh Generation and how that played into the redesign.

Sarah:

Yeah, so we don’t differentiate our users. When we’re talking about our demographic, our core users, our core consumers, we don’t differentiate them between mobile and desktop because, again, as I said before, it’s the same person, it’s just a matter of where she happens to be and which device happens to be closest at hand. We definitely see some slightly different behavior trends looking at the data of how these same users behave when they’re on different devices, and that led us to making sure that certain key features rise to the top for our users who are on their mobile device. But from an overall content and communication strategy, we wanted to make sure that the content was equally accessible. Again, we just rise different functionality to the top depending on which device or desktop the user is on.

On a desktop experience we’re focusing on really high resolution, high gloss images, giving the richest media experience, and of course on a mobile experience those assets want to be served as fast as possible.

Ethan W.:

And I would just add to that, that from a technical perspective, as we were engineering the site and the storytelling implementation, the only difference we really paid attention to was what it takes to deliver a compelling story on different device formats, and that on a desktop experience we’re focusing on really high resolution, high gloss images, giving the richest media experience, and of course on a mobile experience those assets want to be served as fast as possible to have the most impact.

It just extends us to be really collaborative with everyone we work with and I think it’s especially important on responsive projects.

Karen:

Let me ask about how you plan and scope a project of this magnitude. So Sarah, working with Seventh Generation, if you’re bringing in an outside agency to partner with you on this, did it change the way that you wrote the contract or thought about writing the project plan? Ethan, does it change the way that you think about scoping projects?

Sarah:

Ethan, why don’t you kick this one off?

Ethan W.:

Sure. I think on our side, it just extends us to be really collaborative with everyone we work with and I think it’s especially important on responsive projects. So, we really work collaboratively from the get-go with the estimation spreadsheet and a collaborative scoping phase, and then really all of that collaboration had to carry through all levels. So, it went through each design review all the way through acceptance testing.

Sarah:

And I would add that it changed how we looked for a partner, for sure. Moving into this as a storytelling project and knowing that we needed it to be a great user experience on all devices, our initial search for a partner changed how we wrote the RFP and planned internally. Then from a time and costing standpoint, I didn’t go into it—and our organization didn’t go into it—with an expectation that it would be as straightforward and simple as just putting up a desktop optimized website. So we knew there would be some additional considerations, but had a pretty realistic sense going into it of what that would look like.

We’re so fortunate in that we really had ninety-five percent of the content already on our site, it was just a matter of re-architecting it. And boy, what a huge difference that made in our ability to tell a story.

Ethan M.:

Sarah, one word you mentioned was “storytelling.” I’d be interested to hear a little bit about how you actually convey an effective narrative in a responsive system, because that’s something I think a lot of organizations struggle with, right? They still focus on that widescreen layout, especially when they’re crafting these beautiful designs, and then mobile feels like a compromise. I don’t really get that sense on Seventh Generation.

So I’d be curious—as you’re looking at different page types or working through different sections of the site, how did the organization actually make decisions about what to prioritize on different screens at different breakpoints? How did you make decisions about what to actually keep and what to get rid of?

Sarah:

That’s a great question. I will add that the internal team working on this from a content communications strategy standpoint and design standpoint are fantastic. It was really myself and two other people, and just having the right people fill the roles makes a huge difference. How to prioritize content and get the storytelling across—first and foremost, we’re so fortunate in that we really had ninety-five percent of the content already on our site, it was just a matter of re-architecting it. And boy, what a huge difference that made in our ability to tell a story.

We had a really careful organization of the role of copy, introductory blurbs on the page, and just knowing how users consume content on the different devices led us to getting the right hierarchy in place.

The other consideration is recognizing that a big piece of storytelling, no matter what device or screen size you’re on these days, really is visual. People are used to Pinterest, they’re used to seeing things quickly and being able to get the story in a really visual way, and pulling out some of the same—this probably dates me a little bit—but using the squint test, looking at the screen of what key elements of the story jump out when you’re looking at it across devices, big screen, little screen. We had a really careful organization of the role of copy, introductory blurbs on the page, and just knowing how users consume content on the different devices led us to getting the right hierarchy in place.

Ethan W.:

I have to also toot Sarah’s horn a little bit here. Sarah and I first worked on the first iteration of Seventh Generation’s Drupal site I think it was seven years ago, and even then Seventh Generation was almost thinking proto-responsively and was really on the right page, and it was really then more the limitation of technology, it wasn’t really there yet to chunk out the storytelling in the way they were envisioning. So, it was really great to get to do that, really see a lot of that vision come to light now as technology has really matured. But Seventh Generation has been on that page for a long time.

Sarah:

Yeah, it’s actually true. I remember when we were building that site and looking at the designs, saying the comment a few times that “this design is ahead of its time, the internet is not quite ready for it yet.” But it’s really true, we kept a lot of the same principles and approach to getting the storytelling site out there that we used seven or eight years ago, so it’s great fun.

We had so much of the content in place, and our site isn’t huge or super complicated from an IA standpoint, that just from a content standpoint it made all the sense in the world to do it all at once.

Karen:

That is music to my ears. Let me just follow up on that and ask how that might have influenced the way that you plan to roll this out. So, looks like you guys just did the big reveal, rip off the band-aid and launch a new website. I’ve talked to other organizations that have had to do a more staged rollout, where they have done it section by section or maybe did a beta release, even. Do you think you were set up well in the past to be able to just do a completely redesign here, or were there any trade-offs that you had to make to relaunch the full site all at once?

Sarah:

Boy, I honestly couldn’t imagine doing it any other way. Part of it is that enough projects, the fear of that ever mystical phase two, that “Oh, we’ll just take care of that in a later phase,” and I think we all know what that means a lot of the time… Really again though, we had so much of the content in place, and our site isn’t huge or super complicated from an IA standpoint, that just from a content standpoint it made all the sense in the world to do it all at once. We did, earlier on in the project, talk about the possibility of looking at a product section vs. the storytelling section, but I feel pretty strongly that it was better to push things along on the same timeline and really create a much better, more integrated user experience.

We had to do a very large-scale migration to support the new content architecture that was going to drive the new design. It was hard to see a way to do that incrementally.

Ethan W.:

Yeah, and technically the content architecture migration piece was really intrinsic here to implementing the responsive redesign and the storytelling focus. So, we had to do a very large-scale migration to support the new content architecture that was going to drive the new design. It was hard to see a way to do that incrementally outside of really changing the core of the site.

Collaboration on this design process was way more than we’ve ever experienced in the previous design process, which I think is a great way to approach responsive.

Ethan M.:

I’d love to hear a little bit about the design process, when you’re actually thinking about the visuals. We’ve interviewed a number of companies that basically have found that the old process of going from comps to code just doesn’t necessarily work quite as well for them anymore. Some of them move a little bit more heavily into prototyping, others are probably just adapting old processes to kind of work more flexibly. How did you guys actually start thinking about the visuals for this site?

Sarah:

Thinking about visuals was actually part of what drove us to do this site. From a functional standpoint, it was absolutely a huge learning curve internally in getting our in-house designer up to speed quickly with the help of some fabulous resources at CoLab; it was really a collaborative experience for our team learning a ton about responsive design on a really quick timeframe. And honestly, we couldn’t have done it without this super open, collaborative bulwark style that CoLab is a fan of. We went through the designer and the resources at CoLab worked together, getting design and prototyping up and running. Jenn was great at getting prototypes up; we could kind of tweak them on the go, make changes in shifts and then make sure we rolled those back into the design phase.

So, collaboration on this design process was way more than we’ve ever experienced in the previous design process, which I think is a great way to approach responsive. And then there were a lot of things that we learned along the way, making some strategic decisions about retina display and working on different devices, which has altered how we approach the design process internally.

Ethan M.:

I love that idea of a give and take between design and production. The other side of that though is I’d be curious to hear if there were any elements of the design that you’ve redesigned or reworked since you’ve actually launched the website? And if so, what were some of the drivers there?

Sarah:

Let me think… We’re actually only three weeks into the relaunch, so… Luckily, I think we’ve got pretty much everything in good shape out of the go box. Ethan, I don’t think we’ve done any redesign work since launch, is that correct?

Ethan W.:

Yeah, we didn’t do any redesign work. We did do some initial optimizations for mobile formats. So, as Sarah mentioned, in the initial build we focused a lot on the retina experience and…

Sarah:

So we did think, during the initial build, about retina, about device evolution, about the user being on several devices at once. So, she might be doing something on her computer, on her tablet, and pull up the phone to check something that she’s looking at. We’ve all been there, right? So, most of the work that’s been done since launch has really been about optimization, nothing from an overall design standpoint. We’re certainly keeping a close eye on our analytics and on user trends, behavior trends that we’re seeing. But so far, really everything looks good and I don’t see any major redesign needs in the near term.

That meant making the content a lot more well-structured, condensing a lot of different content types into a single content type that was a lot more modular.

Karen:

So in the planning process for getting you guys on the podcast, Ethan [Winn] emailed and said that he was really excited to talk about well-structured content architecture for storytelling and approaches to configuring Drupal as a component CMS, which coincidentally is a topic that my friends and family refuse to discuss with me anymore, so I’m really happy to be able to talk to you about it. Tell me how that worked for you on this project.

Ethan W.:

I think there’s really two main pieces. We’ve kind of already touched on one talking about the migration and how the content architecture change was really critical to implementing the responsive design. So, we couldn’t do the design without changing the content architecture. Primarily, that meant making the content a lot more well-structured, condensing a lot of different content types into a single content type that was a lot more modular and had lots of different fields that could be represented in different ways and in different contexts. So while Drupal isn’t a proper component CMS perhaps, I definitely think you could think of it as component-like when you configure it in certain ways.

By using lots of entity references and view modes in Drupal, we were able to get different story content represented in a really wide variety of ways across different design organisms.

I think the other big piece for that for us was using the panels system to manage region content in different pages and different screens, then to make heavy use of the Drupal field and entity subsystems within that. By using fieldable panel panes and making a bunch of different pane types, that each had a set of fields on them, we were able to really structure the way that content is represented at a more granular level than just the page or the screen. By using lots of entity references and view modes in Drupal, we were able to get different story content represented in a really wide variety of ways across different design organisms, if you will. So, those two things combined helped us really leverage Drupal and feel like it was really working for us in the responsive approach and not something that we had to negotiate.

It has made the life of our customer care team a lot easier because the information that people are looking for is just easier to find.

Karen:

Let me just follow up and ask if that content structure, the new architectures, have changed the way that you and your team works, Sarah? How did that intersect with some of your storytelling goals and the way that you manage content on the site now?

Sarah:

Yeah, so one thing that’s actually huge is that it has opened up our content to really working across a lot more of our company. So, that’s really just an internal function. We have some great videos from our product formulators up on there now. It has made the life of our customer care team a lot easier because the information—people that are looking for product information, they’re looking for information about Cruelty Free Certification—the information is just easier to find. So, in that way, it’s also reduced the back and forth between our customer care team, our research and development, and our scientists.

Our strategy for the year has had a huge impact on the way we structured our content on our website.

From a marketing and advertising standpoint, we have had a strategy in place starting earlier in the year, ready for the site to launch, to bring in more traffic on the telling our story piece of the business. So rather than driving everyone towards product, which was previously super easy to find—it’s still really easy to find—the rest of our story was really hard to find. So, getting our brand positioning out there; what makes us different as a company, what makes us mission-driven has definitely had a huge impact… well, I should say our strategy for the year has had a huge impact on the way we structured our content on our website.

Ethan M.:

I’d love to hear a little bit more about how Seventh Generation conducts design reviews either during this redesign or since you’ve been taking on more multi-device work. When you’re actually talking about a new feature or a new page type, how do you actually look at it and discuss it as an organization?

Setting up the context for our stakeholders and going through things more carefully makes a huge difference.

Sarah:

This is a key place of where the collaborative relationship with Ethan and the team comes in, that we definitely look to their expertise in “Here’s what we want to achieve” and they can help us figure out the best way to achieve it, whether it’s through, as you said, in content type or a new view or just organizing things a little bit differently.

On the internal side, responsive is a learning curve for our organization and we had, ahead of time, identified key check-in points and sign-offs along the way, but found out we really had to set up a context really carefully with our stakeholders, if not enough to say, “Oh, here’s a prototype. Click around and tell us what you think,” because we’re still in the learning curve, we’re still figuring out, as a broader organization “What are we looking at when we’re looking at the prototype?” So, setting up the context for our stakeholders and going through things more carefully makes a huge difference.

I don’t have any specific expectations of what’s going to happen between our mobile and desktop users. We’re certainly seeing that line converge in terms of percent of traffic a little more; that gap is closing.

Karen:

When you’re thinking about evaluating the success of this responsive redesign, do you look at anything different? Like, do you look at your analytics data still broken down by mobile, tablet, and desktop? Do you evaluate the success of a responsive site different from the way you evaluated your old desktop site?

Sarah:

We certainly are looking at some different things. I’d say we’ll be looking at things more carefully once we turn some of our advertising back on, ramping traffic back up to the site. I am absolutely looking at some of the basic metrics you would expect: time on site, depth of session, as well as social interactions—based on our strategy and content architecture, we’re looking at social traffic more carefully now. I don’t have any specific expectations of what’s going to happen between our mobile and desktop users. We’re certainly seeing that line converge in terms of percent of traffic a little more; that gap is closing. But I’m not going to, at this point, say it’s because of the site. So, in part, I’m looking to learn from our data. I think we’ll see a lot of different patterns in terms of how they’re currently consuming the content and set some different expectations for our KPIs.

Ethan, do you have anything to add to that?

Ethan W.:

No, I think you really hit it. The only we’re checking regularly to get our thumb on the pulse is just bounce rate, bounce rate, bounce rate, and already seeing some improvement there. We’ll talk about performance in a bit, so we can talk about those metrics separately.

Ethan M.:

Oh, we can talk about it now, Ethan. [laughs]

Ethan W.:

[laughs]

One of the big things we had to focus on in terms of a Drupal-responsive build was the proliferation of image asset formats and responsive images.

Ethan M.:

No, actually your timing is perfect because I was going to jump in, because you’d mention some post-launch optimizations you guys had done and being really conscientious about speed on mobile devices. How did performance come up during the redesign process? Did you have to sit down and define what was going to be a well-performing experience for your users? And how did you evaluate it going forward?

Ethan W.:

On the CoLab side, I would say that we were really, really aware of that “mobilegeddon” was nigh as we were building this. So in our case, we did allow Google to be somewhat of the arbiter of our success of the build in determining the basic performance of the site for mobile.

In the end, we were able to get about two megabytes off the page weight and a lot of time off the first render and page load, so that was a big indicator of success for us.

One of the big things we had to focus on in terms of a Drupal-responsive build was the proliferation of image asset formats and responsive images. It was pretty intense in that when you’re building this cascading content architecture, you then have to have a very appropriate image size and image format for every single representation, every context, every device format. So, that was just a continual process of iteration as we developed initially and then after we launched. But in the end, we were able to get about two megabytes off the page weight and a lot of time off the first render and page load, so that was a big indicator of success for us.

Sarah:

And I will say that at the very upfront of the project, I think actually before we even kicked this project off, I had said to Ethan, “Help. Our page load times are awful.” [laughs] So, eyes wide open that we needed some optimization help. CoLab has definitely delivered on that.

Take the time to have those seemingly endless philosophical debates about which architecture to choose because it’s going to have a huge impact throughout the entire build process.

Karen:

Sarah, Ethan, this has been a delightful overview of what sounds like a really successful project and a great collaboration. Do you have any advice for other people who are embarking on a similar responsive redesign? What have you learned that you would tell other people to keep in mind?

Sarah:

I think point one is, as we’ve both said a few times, is the collaboration has been really key and thinking of it as a new way of talking to our users, so be open to a new way of working for a more effective and more efficient process.

Ethan W.:

And as a build team, within the context of that collaboration, I also would advise to be really, really intentional about your architectural choices and take the time to have those seemingly endless philosophical debates about which architecture to choose because it’s going to have a huge impact throughout the entire build process. So, we really spent a lot of time debating various approaches to implementing components and various kinds of atomic design principles in Drupal and that definitely paid off a lot in the final build.

In hand with that is just document obsessively. So as you’re having those conversations, you want to make sure that for the whole tech team you’re just documenting standards you’re choosing so they’re being used consistently across your site.

Sarah:

And I think the only thing I have to add to that is to not get hung up on differentiating between your mobile user and your desktop user. There’s a lot of value to knowing that people will be behaving a little bit differently, and knowing that gestures are different and occasions may be different when they’re on their different devices but the user experience, the brand experience has to be super consistent. Responsive is really about meeting your users wherever they are, so approach it with a holistic mindset and keep checking back in with your personas—the same person who is on their phone, is watching a movie on their laptop, and using their tablet to email—all at the same time. So, just keep checking in and keep it holistic.

Ethan M.:

I can’t think of a better sentiment to end on than that one. Sarah, Ethan, thank you so much for spending some time with us today.

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.