Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, we are so excited, we could hardly get to sleep! We are here with Claudina Sarahe and Becki Choi from Casper. Welcome, welcome! So, I would love it if both of you could introduce yourselves, tell us a little bit about what you do, maybe even a little bit about what Casper does. Claudina, would you like to go first?

Claudina:

My name’s Claudina Sarahe, I’m the head of front-end engineering at Casper. I joined Casper about one month before they turned one, and I’ve been involved on what we call the Nightshade version of the site. So Casper had a responsive website when they launched, and then I joined to implement what is kind of a new look and feel that you see on our website today.

Becki:

I’m Becki, and I’m one of the designers on the Casper creative team. I joined around the same time as Claudina too, some time early last March. When our team was small, we kind of did a bunch of design from marketing, packaging, and the site itself. But as our team began to grow, I shifted more towards the site, and so I had the pleasure of working with Claudina and other developers on Nightshade.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

Karen:

Well, I’d love to hear a little bit of the background about how this redesign came to be, and maybe you can answer for us if there were any questions or concerns about using responsive design as you approached this project.

Claudina:

Responsive was always a known. So, as mentioned, Casper’s first site was responsive, but one of the things that we wanted to do in the second version was really develop our brand language and identity, and also one of the things that was really important to us was starting to systemize things a little bit more and create more patterns, really thinking about building blocks that we could piece together for creating additional pages down the site. So luckily we never really had to do deal with getting approval for responsive. And performance was also a really big importance for us from the first version to the second version, and is still something now that we’re really actively working on.

Ethan:

Since Casper’s been responsive since day one, I’d love to hear a little bit about how Casper tends to think about mobile users and desktop users. Specifically, we’ve talked to a lot of retailers who have said that depending on the size of the screen, different people need different kinds of information. Whereas some others say that basically regardless of the device, mobile users and desktop users effectively need the same content, they need to do the same transactions. Where does Casper fall on that and how did that inform the redesign?

Claudina:

I think this is something that we’re definitely honing in on more and more, especially looking at our analytics… So after we implemented the first redesign, we definitely saw an uptick in mobile traffic, especially mobile traffic that’s converting. But it’s still significantly lower, and what we definitely see, which has been pretty standard with a lot of the other folks that you’ve interviewed in retail, is mobile is used more for learning and browsing, and conversion still happens on desktop or tablet. So, it’s not something that we still want to continue pushing that and drive conversions on mobile, but I feel Becki can talk a little bit more to how we’re really thinking about how do we optimize that learning and the discovery for mobile. That’s really where speed also comes into play. One of the things we’re thinking about now is landers and making very simple pages that can load quickly so folks can learn about stuff. Becki do you have any thoughts?

Becki:

Yeah, just to add a little bit more onto that, I think what’s interesting is that Casper has so much advertisement, from subway ads, to billboards, etc. So, most people that don’t know about Casper, if they’re traveling or in transit, they’ll pull out their phone and their first interaction with our brand is through their mobile device. And so, many things that we hear from our customers and people that interact with our brand is that Casper is a fun, friendly, quirky brand, and we often think about that when we’re doing photo shoots and even through our redesign. So, it’s definitely very important for us to maintain that level of quirkiness and delight so that our customers, depending on if they come through desktop or mobile, they still get that same experience.

Karen:

Talk to me a little bit about how you started planning out a project of this magnitude. How did you figure out what you needed to do or what you needed to prioritize, how long it might take, and who you needed to have involved?

Becki:

I might talk a little more about Nightshade and not so much the redesign, which happened before Nightshade. But I think what happened as a result of our redesign was that, from a lot of factors—from slightly rushing things to meet certain deadlines and just not really taking the time to properly examine all the things that just had to go into consideration in a redesign—that basically led to Nightshade, where we, I think throughout creative and tech, felt there were a lot of inconsistencies through the code and also in the visual language itself. So when we kicked off Nightshade, I feel like we didn’t even start really designing for the first couple of months. We wanted to really take it slow, which I’m really happy that we did, because obviously you rush things the first time, you end up having to reiterate, do it again.

So our process is we just really did a full assessment and audit of our site, where Claudina and I pulled a bunch of different elements and components of where we found these inconsistencies, and just really studied and analyzed them. From there, we started to break it down on a component level. And then, yeah, after a couple months of that, we started to actually dig into design, where I met with Claudina and Joseph, the other developer, on a daily basis to figure things out, end solutions, together.

Claudina:

I think one thing, to help clarify for folks listening, is we’ve kind of had multiple phases to our responsive site. So there was the first version of the site that launched before Becki and I joined, and then when we joined we made this new version which we call Nightshade, it’s the name of our style guide and the design system that powers it. That first version, we redid just the home page, and at that time we only had one product, so it was much easier. And this is something that we constantly are learning, is when we add new products, if it’s a supporting product or a secondary product, and what that means. And so our design language and our systems and our tools are constantly evolving, but we’ve got a really good core. So in 2015, we launched more products and we just kind of continued with the same Nightshade language that we had. After we finished that, we took a step back and we were like, hey, we’ve got to figure out and clean up some of these inconsistencies, we’ve got to start to design the system. One of the things that Becki can talk about is how we realized it’s important to go back and revisit typography, and that the typography that we had was just not suited to the amount of content. So that was really one of the big driving forces for what we call this interim period where we solidified Nightshade and our patterns.

And then this past summer, when we went international, was when we really got to bring all of those patterns into the main site, and so a lot more of our core product detail pages are using these nightshade patterns. That’s always an evolving process, so we’re going back and tweaking them and simplifying, and it’s been a really good learning experience. One of the things we’re doing now is really trying to set content guidelines to our patterns. Because we are international, we have to support a lot of languages, and we’re trying to get to a point where the level of involvement between design and dev to put new products out is more minimal. That really requires us to work together and work with our copywriters to understand what is the impact of this element, what is its goal in storytelling. I think one of the coolest challenges that I’ve really found at Casper is our story is so, so important, and also maintaining that quirkiness and that zing. So, there’s a lot of interesting challenges.

Ethan:

I’d love to hear a little bit more about the process you actually used to refine the patterns for Nightshade. So, specifically when you were looking at this responsive redesign and trying to systematize it, how did you talk about what constituted a good reusable pattern vs. something that was maybe a little bit low quality? And how did you refine things to get them up to a point that felt like they could be part of the visual language?

Claudina:

It’s still very much a work in progress. So initially, we’ve got a couple landing pages which were our first go at fully using Nightshade patterns. You can see those at casper.com/ease, is one of them. When it came to refining the patterns, I think this is something we always do or do a lot when we have a big looming deadline: we were trying to clean up our entire site while launching international, so it was a lot of learning as we tried to implement, and we even just had to make some notes to be like, “Hey, let’s come back to these.” But one of the things that we do on the front-end team is we have a weekly jam session, and the front-end team sits and we really nerd out on CSS and front-end things. Recently we’ve been talking a lot about these patterns between the dev team, figuring out where the friction is. Like, hey, are these patterns confusing? Are we using them? Which one of these seems to cause pain points? Or which of these makes sense? Does this pattern have too much default styling applied to it? Do we need to simplify it, which is something that we’ve currently been thinking about, is maybe we need kind of a default skin on some of our patterns for prototyping and then there’s a level of refinement that happens. So, it’s an ever-evolving process of really involving the whole team and then making those changes, and getting them back into our Nightshade core library. One of the things that we did is we created a separate repository for that. So we want to go back and update it, and that means we take our findings from the main site back to it.

Ethan:

Becki, as a designer, I’d love to hear a little bit more about how folks in your role at Casper interact with the patterns. Has that changed the way that you actually build pages or design new features for Casper? Has it changed the applications and tools you’re using on a daily basis? Tell me a little bit more about how you work.

Becki:

Developing the Nightshade patterns have definitely helped, like Claudina mentioned, just being able to churn out a lot of pages. For example, marketing or lander pages are just so much faster, that take up a lot less design and tech resources. I think the challenging thing about creating a style pattern library is that now we’re in this position where we have to decide, when we design a new page, to keep using these patterns and when to break the rules. I think it’s very important to always keep these patterns in mind because obviously we want to maintain visual consistency, which is one of the biggest reasons why we started this project. But yeah, I think it’s always important for designers to just not be afraid to break out of the mold as much as it is to use these patterns that we’ve created and to use whenever we think it’s appropriate.

Claudina:

One of the neat things about the work that we did with the landing pages, and when we were building our style guide, is that one of our goals was to be able to install the project on our designers’ computers, and Becki actually got to code and write CSS, which was super fun. We had a really fun time working together, and so that was a really big learning. We’re still currently, right now, a Ruby on Rails site, but we’re really thinking about how, in the future, we can have a system that lets our designers code so at least on our static landing pages it’s possible.

Becki:

Yeah, I think that’s been one of the most exciting and rewarding parts of working on Nightshade and working with Claudina, is that I never thought I would be able to contribute to any code in whatever way. Just even creating very simple media queries, using vocabulary like breakpoints… It’s just very exciting to me to continue to learn and just work side by side with developers and slowly pick up on things along the way.

Claudina:

Setting a type scale was one of the big things, too, that really helped. [laughs]

Becki:

Yeah. Not to go too much into the nitty gritty of the typography, but type was one of the biggest reasons why I wanted to create this system for a site. Just to give you a little example, our site was always built responsively, but the way that we did our font sizes was by pixel based. So the different from going from desktop to tablets and mobile, they didn’t always scale in the same hierarchy. So at certain breakpoints, it was strange to see Heading 2 be the same size as Heading 1. And so by implementing the modular scale—that’s amazing—it just makes sure that it maintains that hierarchy in any device that you look at our site on.

Karen:

You mentioned earlier that you also had content guidelines for your patterns, and that’s something that’s near and dear to my heart, and it certainly intersects with some of the questions about typography, or reuse, or letting these patterns have a life beyond just one person or one developer. Can you talk a little bit about how content intersected with this work?

Becki:

Yeah, so like we mentioned earlier, we launched international, and using German as our first international “test,” it was definitely interesting because obviously are just so much longer in German, and so we quickly found that—for example, our buttons, CTAs, they just wouldn’t fit all on one line. So we just had to take all those learnings from launching in Germany to really take a look at our content and see, if we couldn’t cut down the character count, then what else can we do to minimize the clutter.

Claudina:

And this is still very much, for us, a work in progress with our content. Our writers are really figuring out how we can create some guidelines that will allow us to continue to effectively tell our story in these different languages. So it’s been nice that we got German out of the way, because it’s definitely the longest. And yeah, we’re getting to a point where we’re really understanding what each of the patterns are good for in terms of storytelling—and I think in some ways too it helps us to create better content because we can say, “Hey, this is really long. We need to figure out how to shorten this or tighten this up,” and then we can have those discussions. And as Becki mentioned, one of the greatest things about having patterns is not—I mean, obviously it’s the simplicity and the ease of being like, great, I know what’s there—but it helps us have really good discussions when we need to break something, and we really can understand why we need to do that, and if it becomes a one-off, at least it has an explanation along with it.

Ethan:

You both have mentioned the word “breaking” a little bit. I’d love to hear about how Casper actually does device testing and QA on this wonderful little pattern-driven responsive site. Can you talk a little bit more about that? That’s obviously something important to a lot of online retailers.

Claudina:

Definitely want to give a shout-out to a member of our team, Emily McDonald, she’s really a driving force with QA, and we have been building a device lab… And one of the things that we do is we also have a really close relationship with our data and analytics team, and we choose the devices in our lab based on analytics. Thankfully we tend to see a cohort of the same devices. It’s been interesting, in different markets, which ones are more popular. So all of our features get tested on actual devices; developers will do emulation testing if they want to, sometimes they’ll grab a device. So yeah, all the way down to we still support IE9, but we definitely always bounce back to our analytics and are really thinking, hey, is there a solution that we can provide? What is our developer speed around these things? For example, we still have people trying to access our site on IE8 and older Blackberry instances, and we’ve been testing and working on what we call a simplified version of our site that we can deploy to older browsers. Because we don’t want to not meet our needs, so that’s definitely one thing that we’re still thinking about: how do we actually define support? And it’s currently looking like about one percent or more traffic on the site that we will support.

One of the other driving forces that we learned from when we were putting the actual Nightshade style guide together was the definite power of having live reloading and being able to have everything on our devices. That was super fun when we were working with design, because we had a tray where you could stick a bunch of devices on it, and we would look at them all right there in the context as we were working on these patterns, and it really made working through them a lot faster.

Karen:

Talk to me a little bit about how you evaluate the success of this new redesign. I know for retailers, you have some very clear metrics in place for what defines success. Does looking at the site across mobile and desktop, or looking a responsive implementation, change that at all?

Becki:

I think most people measure success of a redesign through, like you said, analytics, numbers, conversion rates. The way that I see it is more of the relationship between tech and design. I think, from doing Nightshade and just working more closely together, it has strengthened the relationship and has definitely streamlined the process from design to tech. And with a better relationship, for any future redesign or pages, it just makes it so much easier.

Claudina:

Definitely conversions. When we did the first one in March, we saw a performance improvement, we saw an increase in parity. We could see the dramatic differences of mobile traffic. Before we did the redesign, mobile traffic was a lot lower than desktop, and then afterwards, that’s when they really basically became neck and neck. So, that was important. When we launch these newer landing pages—we actually do a lot of A/B testing, and those were A/B tested and they performed significantly better than our home page, and so we’ve been rolling them out over different markets. So it’s a combination of both, but A/B testing is a big way that we definitely gauge things and gauge smaller changes as well.

Ethan:

Claudina, Becki, it’s been fantastic speaking to you both for the last half hour or so. Before we let you go though, I’d love to hear if you have any advice for any members of our audience who might be starting their own responsive redesign today. What are one or two things you’ve learned that you’d like to share with them?

Becki:

I kind of said this previously, but just the relationship between tech and design is super crucial. I think it’s okay to admit to not knowing the answer to every design problem. I think for a lot of young product designers like myself, there’s often a lot of pressure to always know the answer, or if you don’t know the answer, you have to pretend to know the answer. And I’ve found it very true that every time I’m stuck in a design problem, eventually you will see the solution, whether it’s through just talking to developers, or a designer, or even through user testing, or even just taking a break and coming back with fresh eyes. Just to not let it get to you and that everything will eventually get solved.

Claudina:

Yeah, I can’t echo the importance of making sure that, when you embark on it, as much as possible to have it be this interdisciplinary team between your developers, designers, copywriters… I think the more folks that can lend their expertise is super important. I think it’s also really important to look at your data and see what your data tells you about your customers, at least about what devices they’re accessing. Because it can seem really daunting when you say responsive, you’re like, “Oh my gosh, this has to work on all of these!” We’ve been learning that, yes, we definitely want the site to be accessible to all and on all different types of devices and platforms, but also to pay attention where our customers are coming from and to make sure that we can deliver the best experience on those devices. I think, too, the other thing is to know your story, and that also helps in your decisions for responsive.

Karen:

Well Claudina, Becki, this has been great. I really think that the site looks beautiful and it’s such a great case study of integrating your message and your story with the design process. So, thank you for coming on the show.

Becki:

Thanks for having us.

Claudina:

Thanks for having us.

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.