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 suffused with a warm glow. We are delighted to have Lauren Young and Kevin Gilsdorf here to talk about Celestial Seasonings. Welcome!

Kevin:

Hi.

Lauren:

Hello.

Ethan:

We’d like to take a moment to thank our sponsor, GatherContent. As it happens, they’re conducting a new, free online masterclass titled “Content Strategy for the Website Redesign Process.” It’s taking place on the 17th of March, a Thursday, and you can register online at GatherContent.com if you’re interested. Now if you’re on an in-house team that’s about to redesign your organization’s website, well, this seminar might be perfect for you. It’s free—free, I say! And it’ll help you recognize common content production issues so you can keep your projects on track. It’ll also teach you how to make smarter design decisions that are content focused, which will lead to a better overall user experience wherever people are accessing your sites. And heck, it’ll also set you up to better maintain your content after launch. So if this sounds like the online seminar for you—did I mention it’s free? Then you can sign up at GatherContent.com today. And thanks again to them for sponsoring.

Karen:

So Lauren, Kevin, thank you so much for taking the time to talk with us about a fantastic tea brand which I personally love very much. I would love it if you could start off, just introduce yourselves, tell us a little bit about your work, your role on this responsive redesign. Lauren, why don’t you go first?

Lauren:

Sure. Lauren Young, associate brand manager from Celestial Seasonings. I really handle all of the digital platforms communications for the brand, so I was really the marketing lead and project manager from the brand’s side on this website redesign.

Kevin:

And I’m Kevin Gilsdorf, Celestial tea drinker, and also Blue Chip Marketing’s digital and creative director. I oversee UX, social, and the design/copy content team here at Blue Chip.

It was definitely easy selling this project to the leadership team.

Karen:

Well thank you both for joining us. Maybe you could start off by just talking a little bit about the road to responsive for Celestial Seasonings. When you were initially embarking on this redesign, were there any difficult conversations or concerns about going responsive that you needed to overcome?

Lauren:

From the Celestial standpoint, no, not at all—no concerns, no difficult discussions. I think the leadership team at Hain really understands the importance of website redesign; I think that any brands in the Hain portfolio that don’t have a responsive design at the moment are probably undergoing a very similar process to the one that we just did so that they can fix that and have a responsive design. So, it was definitely easy selling this project to the leadership team.

I think that our mobile and desktop users are similar, I think they’re looking for very similar content. It’s just how we deliver that content that’s different by user.

Ethan:

Well, I’d love to hear a little bit more. As you started walking on that road to responsive, how did you talk about the needs of the mobile user of a Celestial Seasonings responsive site versus the desktop user? A lot of companies that we talk to, they maintain, looking at their research and their analytics, that mobile users and desktop users have their own needs and they need different information, whereas many organizations feel that they all effectively need the same content regardless of the device. Can either of you talk a little bit about where Celestial Seasonings sort of fell along that spectrum?

Lauren:

From my standpoint, I think that our mobile and desktop users are similar, I think they’re looking for very similar content. I do think there are a few key differences. I think that a desktop user is in a little bit more of an exploratory mindset, so they might go into more in-depth research; I think that they’re looking for product information, they use our store locator to find their favorite flavors in stores near them. It gives us an opportunity that, because they are in that exploratory mindset, to tell our brand heritage, our story of our history a little bit more. I think that mobile users are interested in similar content, but they’re on the go, they’re looking to find that information much quicker and then move on with their day. So to me, it is similar content, it’s just how we deliver that content that’s different by user.

Kevin:

Yeah, and I would just sort of build on that with the fact that Celestial as a brand, tea drinkers in general, it’s a great culture and people really get into the specific tea that they’re drinking. So, as Lauren said, it’s kind of looking at that desktop user and allowing them to be able to explore all the different types of tea that Celestial offers as well as some of their history, and even just some of the history about tea in general. And then when we look at mobile, we’ve paid a little bit closer attention to the shopper mindset. Obviously being a CPG (Consumer Packaged Goods), Celestial is able to appeal right there at shelf, and so to be able to enable those users to research there is very beneficial.

Karen:

One thing I’m curious about, especially when talking about a client/agency partnership, is how the scoping and contracting process might be different when you’re embarking on a responsive redesign. Did this wind up costing more or taking longer than you would normally plan, or you might’ve planned in the past, for a desktop-only redesign?

Kevin:

I think if we go way back, it probably would. As an agency, Blue Chip has definitely designed a number of responsive sites for the last three to five years, so it really depends on the amount of planning that we do up-front, and we definitely work through discovery process to understand the audience and understand the business requirements, the technical requirements going in so that we can be as efficient on the build process as possible.

On the mobile site I think we wanted to make sure that the content and the info was higher up on screen. Sometimes that meant de-prioritizing our artwork and some of our brand assets.

Ethan:

Tell me a little bit more about those early days. As you’re actually starting to plan out this responsive site, a lot of organizations sort of struggle with thinking about content prioritization and hierarchy of a design when it’s going to be viewed on different screens. How did you make decisions about what to keep and what to get rid of across different breakpoints, and what did you prioritize across different screens?

Lauren:

I think the old website design was busy. I think for us the key objective was to simplify the navigation, clean up the design, make the content more digestible for our users. I think there’s a huge difference between our old experience and the one that we have now. And then in terms of prioritizing and hierarchy of content, to the point I made earlier, I think users on desktop have the appetite for a little bit more research and to explore different types of content, so I think that we were able to add elements like our artwork and things that are inspirational and important to us on desktop because there is more real estate, whereas on the mobile site I think we wanted to make sure that the content and the info was higher up on screen. So, sometimes that meant de-prioritizing our artwork and some of our brand assets, or just removing that type of imagery altogether.

Karen:

Let me ask about how you staged the rollout of a redesign of this magnitude. Sometimes Ethan and I will talk to organizations that do just one big bang, and other organizations will roll out pieces over time, maybe even do a beta release. How did you think about the rollout strategy?

Kevin:

We definitely took an approach where we wanted to focus mostly on some of the brand assets as they were introducing not only the website but packaging and some other brand elements at the same time. We also took a very hard look at how to make sure people could access the different flavors from a variety of different ways so that they could select the tea that was best for them. There’s, you know, many varieties that Celestial offers, and so we were trying to simplify that process first, and then we built on top of that some of the more integrated consumer-centric content that we could via some of the mood selection and some of the other content that really got into selecting a tea by your personal choice.

In terms of prioritizing the content, the shopping experience has to be very easy to understand exactly what you want when you want it.

Ethan:

Let’s talk a little bit about design process. I’d be really curious to hear, once you sort of moved past research and some of the initial discussions, once you were actually visualizing this responsive design, how did you actually manage that process? What kind of applications and tools were you using to flesh this responsive layout out? Were you creating mock-ups or prototyping? Tell me a little bit about the nitty gritty there.

Kevin:

Yeah, absolutely. We started with wireframes and really kind of were even sketching some of the solutions out in terms of the flavor sorting and where different content that existed before would live on the new site. And we definitely wanted to make sure, based on some of the persona work that we had done, that we were peeling all the way from people who were just learning about tea to, you know, hardcore Celestial enthusiasts. So in terms of prioritizing the content, the shopping experience has to be very easy to understand exactly what you want when you want it. So that was trying to blow out as many barriers there as we possibly could, and then when you got into the more detailed information, obviously we could take a little bit more time with that. But as Lauren said, we even made some judgment calls in terms of the imagery and where that would live so that it didn’t complicate the experience on mobile.

Lauren:

I think that at the outset of the project, so concepting and planning, all stakeholders were involved; it was a much larger group. And then as we did nail down into the more specific prototypes or content and designs, the marketing person really worked directly with the appropriate creative lead and agency lead.

Karen:

I’d like to ask about how the responsive redesign might have changed the content that you published on the site. So, did you have to take into account the editorial process for how you might describe your various products, or creating new content to describe the company or the brand?

Lauren:

Did we change how we described our products on desktop versus mobile? Is that what you’re asking?

Karen:

Well, I’m asking really, sort of broadly, as you’re thinking about a site that’s going responsive, so working across all these different screen sizes, how did that factor into the way you thought about the content that you were publishing, or how much content you had, or what that editorial process might’ve been?

Lauren:

Sure. I think, again, the content remained similar across both devices, mobile and desktop. I think we did just want to keep in mind then, making sure it was streamlined and digestible, because we didn’t want to have more content than was necessary, understanding how that was going to impact the mobile experience. So that’s one thing I think that changed that we considered through the editorial process. And then the other one again was just the imagery—I think on desktop we have a lot more real estate to play with those brand assets, so you’ll see that personality come to life a lot more on desktop than you will on mobile.

Ethan:

I’d love to hear if performance was part of the discussion when it came to responsive. You know, a lot of organizations really focus on aesthetics and making the layout all squishy so it works on a whole bunch of different devices, but then they sort of come to realize that the speed of the experience is also very important to their users. I’d be curious to hear if that came up at all for Celestial Seasonings.

Kevin:

It certainly did. I mean, I think as Lauren noted earlier, there was a lot of busyness to the old site, which we very much aligned with the branding that has become much cleaner in terms of the packaging and the way that the colors interact. So from that standpoint, we’re actually able to move a lot of the design elements more towards a codebase, which just obviously makes the whole experience a lot lighter. And then from an imagery standpoint, you know, there we tried to make sure that we were optimized appropriately based on the different screens and making sure that the visuals were used, I guess, in light levels but obviously gave the most impact so that visually it still was a very rich experience.

I don’t really believe our KPIs necessarily changed when looking at desktop versus mobile experience.

Karen:

Let me ask more broadly about how you measure the success of a redesign like this. As you’re looking at your analytics data or as you’re tracking the performance of this new site, is it different in a responsive framework? Are you still looking at your metrics based on mobile and tablet and desktop, for example?

Lauren:

For us, we actually, like I said, the leadership at Hain places a lot of emphasis on the brand websites and the performance of those websites. We actually use analytics platform called Domo for all the brand reports on similar metrics. And so for us, some KPIs are daily unique visitors and bounce rate, and for us at Celestial, I don’t really believe our KPIs necessarily changed when looking at desktop versus mobile experience.

Kevin:

We definitely, usually with our clients we set up very strong KPIs and business requirements in the up-front, and obviously Celestial wanted to make sure that there were enough interactions and that the unique visitors and bounce rate were all key components to that. So, you know, I think, as Lauren said, we didn’t necessarily look vastly different between mobile and desktop, but that’s a key component to the success of a responsive site, is to identify those KPIs way up-front.

Ethan:

Beautifully said, Kevin. One thing I’d love to know is, as we come to the end of our time, Lauren, Kevin, do you have any advice for our listeners? If somebody out there is listening to this podcast and they’re about to take on a responsive redesign, what would you share with them? What’s one thing that you walked away with from this project?

Lauren:

I would say to make sure you’re evaluating design and content in the mobile environment as soon as possible, making sure that it’s not a secondary consideration, maybe even reviewing content and design in the mobile layout first, aligning on what that layout and what that content looks like and then moving on to desktop. I think doing it that way would allow there to be no surprise once you do see what it looks like in a mobile environment.

Kevin:

Yeah, and I think the high point for us is we obviously really value the discovery and planning process to ensure that it’s as efficient as possible, making sure that we align on the objectives as early as possible with the client so that we’re basically tying everything back to the objectives as well as the user’s needs so that we’re aligned all the way through, from discovery through final development and launch.

Karen:

Well Lauren, Kevin, that’s really helpful, and I’m so grateful that you took the time to come on the show today and share a little bit about the things that you’ve learned over the course of this project. So, thanks a lot.

Kevin:

Thank you very much.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from 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 episode at responsivewebdesign.com.

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

Yeah.