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 getting smarter by the moment! We are joined today by Lisa Schneider and Ringo Lertpercha from Merriam-Webster. Welcome.

Lisa:

Thank you.

Ringo:

Thank you. Hi.

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:

It is such a pleasure to have you here. I am a huge fan. I love words, I love the dictionary, and I love your new responsive site. So, I would love it also if you could start off, just please introduce yourself, tell us a little bit about what you do at Merriam-Webster, and perhaps a little bit about your role on this responsive redesign. Lisa, you want to go first?

Lisa:

Sure. Hi, I’m Lisa Schneider, and first of all, thank you both for having us, we’re big fans and we’re thrilled to be here, and I am the chief digital product officer for Merriam-Webster. I joined the company about a year and a half ago, and this project has really been my primary focus for this entire time, and I really led everything from ideating it, selling it up the chain, the strategy, and then bringing on the right team that really made this happen, including Ringo, who’s sitting here, who is our UX designer and made this look as beautiful as it does.

Ringo:

So, I’m Ringo Lertprecha. Hi, really great to be here, and thank you having us. I am a design director, I’m taking care of all the digital products. I’m actually the first digital design director of Merriam-Webster, and I was brought in and my first project is this responsive design. So, I led both UX and UI and everything in between.

Lisa:

And Ringo did a lot of technical work as well.

Ringo:

Yes.

I’d love to give you a great story about how I convinced somebody, but the truth is is that the facts speak for themselves, and we’re all converts.

Karen:

So, tell us a little bit about the decision to go responsive. Lisa, when you talk about concepting the strategy and selling it up the chain, were there questions or concerns about responsive as a methodology?

Lisa:

I think it wasn’t as difficult as the phrase “selling it up the chain” makes it sound, which is really a testament to our senior management. They’re very forward-thinking and very data driven, and quite simply when you look at the numbers and you look at how much of our traffic is coming in on mobile, I think it becomes very clear that mobile-first has to be a strategy that we take, and that creating and maintaining separate products and trying to start thinking about all of the different devices that are out there is really untenable, and it was very clear.

I’d love to give you a great story about how I convinced somebody, but the truth is is that the facts speak for themselves, and we’re all converts and that’s why we’re here, and it was really easy to just draw that picture for the company and show them the numbers, and they got it.

Ethan:

Well that’s incredibly exciting to hear. One thing I’d love to hear about, tracking all those different devices, is how Merriam-Webster thinks about the needs of the mobile user and the desktop user. We talk to a lot of organizations where they’re pretty convinced that different devices means different needs and different use cases, whereas a lot of other organizations that have gone responsive have basically said that, you know, everyone effectively wants the same thing regardless of devices. Can you tell me a little bit about where Merriam-Webster sort of fell in that spectrum?

Lisa:

We fall closer to the “everyone has the same needs.” Merriam-Webster is a dictionary, so we provide dictionary definitions, and we also have other tools and information around language and sort of understanding and enjoying the world of words, and we think all of that is important, because we think that the better you understand words, the better you’re able to understand your world, the better you’re able to communicate. And it’s also a lot of fun, and so besides the dictionary definitions, we’ve got blogs and galleries, we have videos about words, we have word games, and we do something called Trend Watch, which is where we look at the data about what words are what we call “spiking,” meaning being looked up at a much greater rate than they are normally looked up, and that usually corresponds to something that’s happening in the national conversation and that’s really interesting. So all of that surrounds the dictionary, but the majority of our traffic is still people coming in to look at dictionary definitions, and that’s true on any device.

Some people like apps and I think you need to have apps, and yet if you look at mobile traffic, there is absolutely no denying that mobile web is really important.

Karen:

One thing that I didn’t hear you mention is that you also have a pretty large suite of apps. So, you’re available on a variety of different platforms, for iOS and Android, for Windows—you even have an Apple Watch app. Can you talk about how responsive design fits into sort of that broader ecosystem? Like, did you have conversations with people about whether apps or web was the right way to go?

Lisa:

I think that’s such an interesting debate and I think a lot of people make waves by taking sides in that debate, and my personal feeling is the answer is really, really, really not clear. Some people like apps and I think you need to have apps, and yet if you look at mobile traffic, there is absolutely no denying that mobile web is really important. And so, at the moment our strategy really is to be all of the places that users want to be. You know, if you hear something, if you’re reading something, if you’re not sure how to spell something and you’re looking up a word very quickly, you know, using your phone browser, then we need to be there. And if you’re somebody that knows that you want to look up words or you’re a professional who uses words in some way and you want to download the app and have really quick access to that wherever you are, even if you’re online, we need to be there.

I always think of how to present the information in a modular way and then how to plug in each module into each page or each section.

Ethan:

I don’t think I could have said that better myself. That was beautiful, Lisa. Ringo, I’d love to hear—I mean, this is a beautiful site you’ve helped design. I’d love to hear a little bit about your design process, and that could be on MW.com or just in general, but I’m curious to hear how you think about designing for the web as you’ve started doing more multi-device work.

Ringo:

Yes, of course. Since this is a responsive design, I have to always think of all the devices, how would this content look on a different device, different screen? Of course, the distance that the user will look from their eyes to the screen, all of that in consideration.

I always think of the design as a module, right? So each part, each content should have its own module, and then each module should lead to a different page, a different section so that you can plug and play easily if you want to update the site. And of course we are going into the iteration process, we don’t want to make things hard for us to plug and play, to do AB testing. So, I always think of how to present the information in a modular way and then how to plug in each module into each page or each section. And when I design, I think of this is one module, and how would that module work throughout from desktop to mobile-first, and then see how that fits into the bigger picture, or a bigger page, a bigger section. So, I never think of “Okay, let’s design the whole page first and then go into smaller modules.” I’m working the opposite way.

We started with the definition page and then we used Sketch to do our three different breakpoints at the start with the modular design in mind.

Ethan:

That’s fantastic. I’d love to hear a little bit more about some of the applications or tools that you used to do that sort of more modular responsive approach. Are you still creating mock-ups to share with other folks on the digital team, or are you creating prototypes? Just tell me a little bit more about some of these programs that you’re using.

Ringo:

Definitely. So, I’m using Sketch, and I’ve been using Sketch for a long time. I’m a big fan. It’s such an easy tool to use because you can preview it on your phone, on your tablet, on the computer, so it’s super easy to use and you can see the result right away. So, I use Sketch at the start. And when we were designing the site, since the highest traffic is our definition page, we started with that page first, and then we did a little bit of user testing.

In terms of sharing the layout, we were fortunate enough that we don’t really have to go through so many layers and we have really small teams. So, me and Lisa especially were working very closely with each other, and the page that we did the most user testing is the definition page. We didn’t have enough time to do every single page for testing, so that’s what we’re going to do next. But that’s how we started; we started with the definition page and then we used Sketch to do our three different breakpoints at the start with the modular design in mind. So, I do each module into three different breakpoints and incorporate that into the page.

I’ll be honest and say I don’t know that the content strategy specifically relates to the responsive part of the redesign.

Karen:

Let me ask about your content strategy, and by that I certainly don’t mean the dictionary content itself, but you have quite a lot of other content types that you publish; you have articles and you have videos and quizzes. Can you talk a little bit about how that editorial direction might have played into or affected this responsive redesign process?

Lisa:

Sure. I’ll be honest and say I don’t know that the content strategy specifically relates to the responsive part of the redesign. You know, the redesign is a concept, and so it’s responsive, it’s technical, it’s aesthetic, and it also includes the content strategy.

But the content strategy, again, is—you know, Merriam-Webster is a tool, but we believe that the tool matters. You know, it’s not a widget, it’s not something anybody else can produce, we have the largest lexicographical staff in North America, probably in the world we’re rivaled only by the OED, so it’s something that we take very seriously and that we maintain. We’re constantly reviewing definitions, we’re constantly adding to it, and the reason that we do all of this work, as I said earlier, is that we believe that words matter, and so this content strategy is really to invite people into that world and to give them different points of entry, depending on who they are, into that world of words and into—and by the way, I hate this word with a passion and I’m going to use it anyway—edutainment, which is this idea that this is entertaining but you are also bettering yourself.

We parallel the census: everybody uses the dictionary, and so we need to find a way to appeal to everybody, and that can be really hard.

Karen, you were very sweet at the beginning, you said you’re getting smarter looking at Merriam-Webster, and we do think that’s true. The idea of bringing people in to get smarter while they’re feeling entertained and to help them understand their world and help them communicate better is really important to us. So it all ties together, and having the different content types is really a way of appealing to different people, because literally everybody uses the dictionary, we index 100% across the board. We parallel the census: everybody uses the dictionary, and so we need to find a way to appeal to everybody, and that can be really hard.

In order to get from where we were to where we are now, there was really no way to iterate our way there. We had to do this big bang release and put ourselves in a position to iterate going forward.

Karen:

Let me follow up and ask about the publishing processes and tools that your team is using to actually manage and maintain this website. Did you make changes to your content management system as part of this responsive redesign? Or, with all of the fantastic people on staff, how does their process change?

Lisa:

We did update the CMS as part of this process, and so fortunately/unfortunately this was a “big bang” release, and, as Ringo said, we did a bit of testing and iteration on the definition pages, but otherwise in order to get from where we were to where we are now, there was really no way to iterate our way there. We had to do this big bang release and put ourselves in a position to iterate going forward and really do things in an agile and smart way going forward.

The CMS was part of that, and because we made updates to the CMS, we’ve really empowered users who were not able before to go in and create their own content and publish it and optimize it, they can do that now. And so, we’ve got a team of people who are creating content, we’ve got somebody who’s sort of a content manager leading that effort and really helping to identify what it is that we’re doing and how we’re doing it.

Sketch was incredibly helpful because it allowed me to go to things like board meetings with a bunch of devices in my hand and show something that looked and felt real to people who don’t do what we do.

Ethan:

I’d love to hear a little bit more about the design reviews of the responsive redesign. How did you actually start sharing this more modular layout, the new aesthetic with the rest of the organization? Were you showing them Sketch mock-ups? Were you showing them prototypes? Tell me a little bit more about that process.

Lisa:

So we actually started, because the definition page, as Ringo said, is our central and most important page, it’s the page that gets the most traffic and really the core of what the Merriam-Webster brand is, when we first conceptualized what this will look like and how it will be structured—take a look at our definition page and take a look at any other dictionary. We’ve really sort of reinvented what that looks like, and the card structure that we have has never been done before by an online dictionary, and so it was really important for us to get buy-in on that very early in the process before we had gone too far and spent hours on design and mock-ups and that type of thing. In this case, people were brought in very, very early on to look at wireframes and to be able to understand what it is that we were doing.

I think Ringo’s use of Sketch was incredibly helpful because it allowed me to go to things like board meetings with a bunch of devices in my hand and show something that looked and felt real to people who don’t do what we do and maybe can’t look at a PDF on a computer screen and, you know, you’re shrinking the browser and saying, “Imagine what this would look like on a phone!” I’m actually holding up a phone and saying, “Here, look! Look at what this looks like on all these different devices,” and so people were just thrilled with that.

You’re always looking to improve, and things change so quickly—user behavior can change quickly and tools available can change quickly, and you’re always looking to optimize at any rate.

Karen:

I’d like to ask about any changes that you might anticipate making or want to make now that you’ve launched. Are there things that you’ve looked at in your analytics data, or just as you’ve seen the site out there in the world, that you think might need to evolve in the future?

Lisa:

No, everything is perfect. We’re done. [laughs]

Ringo:

[laughs]

Karen:

[laughs] That’s so great to hear!

Lisa:

Yes, definitely. Look, I think that’s part of the game. And first of all, you’re always looking to improve, and things change so quickly—user behavior can change quickly and tools available can change quickly, and you’re always looking to optimize at any rate.

The reality is, you know, we have this beautiful mission at Merriam-Webster, but we’re a company, and I like the part where I get my paycheck, and so we also have to be aware of the revenue implications and always trying to balance everything that we’re trying to do for the user with the reality that we need to get revenue, and so you’re always looking to do better. Having said that, I think specifically for us, because there were so many pieces that went out, we said, “This is good. This is Good Enough™,” as one of my colleagues wrote it with a capital G, a capital E, and a ™. This is good enough for now. It’s a million times better than what we had. But of course we’d look at it and say, “Oh, you know what? I want to fix this and I want to test that, and I think we could try this,” and so absolutely, we have a plenty long enough list.

The user will be the one to tell us what they want, what they need, and we will make sure that we get them what they want.

Ringo:

Yeah, and I would like to add to that. I think the website is never done, right? Because we keep iterating, we keep testing, and we put better things out there based on user feedback, based on the data that we got and… We didn’t tell you guys that we put the feedback button out when we launched the beta site and we got tons and tons of feedback, and they were great, they were amazing. They talked about font choice, they talked about even the spacing, the color, and we enjoyed very much reading that feedback and incorporating that feedback into the actual site before we launched. And that is what we continue doing with the data that we’re getting now, and of course the site is going to continue evolving and changing, but the user will be the one to tell us what they want, what they need, and we will make sure that we get them what they want.

We cannot afford to neglect any area that would either help or hurt us in search rankings and in sort of bowing to the powers that be at Google.

Ethan:

I’d love to hear a little bit about whether or not performance was a consideration when you were responsively redesigning. A lot of organizations focus a lot on the aesthetics and the layout of their new responsive sites, but the speed of how quickly it actually performs is something that I think a lot of people are actually just now waking up to. Is that something that came into the conversation at Merriam-Webster?

Lisa:

Oh, emphatic “yes”! Emphatic “yes.” [laughs] The way that many people come to Merriam-Webster, among other reasons for focusing on page speed, is through search, and so we cannot afford to neglect any area that would either help or hurt us in search rankings and in sort of bowing to the powers that be at Google, and so this was really, really important to us. And again, I would say that we did a lot of things that were smarter on this site than on the previous version. We’ve improved our page speed quite a bit, and likewise, it seems somehow there’s always more that you could do and something that we continue to look at and to work on, for sure.

We’re really against using simulators, so we really want to have the actual pieces of hardware in our hands that real users are using and make sure that we’re QAing on those actual devices.

Ethan:

That’s really exciting to hear. While you’re speaking, Lisa, just to follow up on something you mentioned earlier about being responsive to user feedback and all these different devices, has the new responsive site changed the way that you manage your QA process, or maybe the way that you define browser support? Tell me a little bit about that.

Lisa:

Sure. Obviously it has because we didn’t have a responsive site, so it was much easier in the past to say, “This is the desktop site and we’re going to QA it on desktop, and this is the very, very limited mobile site and we’re going to QA those couple of pages that exist on mobile.” And I think now the process is much more complicated, and yet we’re trying to be faster, and so that’s something that’s really challenging I think for anybody to juggle.

We use a combination of a corporate QA team that is not solely dedicated to us, but also our product team does our own QA as well, and so we make sure that we’re sitting there and looking on different devices. We have so many devices in our office and we’re really against using simulators, so we really want to have the actual pieces of hardware in our hands that real users are using and make sure that we’re QAing on those actual devices.

One of the great things about having a responsive site is I look at Google Analytics and I have one rollup number.

Karen:

Perhaps you could talk about, just broadly, how you think about measuring the success of this responsive redesign. So, sometimes we talk to organizations that say even though they’ve adopted responsive as a methodology and an approach to thinking about the web, they’re still measuring success by tablets and smartphones and desktop. How do you think about looking at your analytics data, and is it different in a responsive framework?

Lisa:

Yes and no. Yes, because I am very interested particularly for certain metrics in our overall metrics across the board, and one of the great things about having a responsive site is I look at Google Analytics and I have one rollup number, I’m not going to different dashboards, I’m not trying to add things up, I’m not trying to normalize data. I’ve got one set of data and so overall I know how the brand is doing in this world.

But on the other hand, again, the reality is that different platforms monetize a little bit differently, and so we do need to separate them and be paying attention to them in that way. And we also want to be separating in the sense of what Ringo was talking about in terms of user feedback, where a desktop user might feel one way and a mobile user might feel another way, and we need to be really aware of that, that although the page is responsive, is it working A) overall but B) is it working better in one platform than another so that we understand where we might need to test and iterate.

There are so many technical bits and pieces, there is so much more QA. Just on the technical side, really understanding what’s involved and giving yourself plenty of time would be one piece of advice.

Ethan:

Lisa, Ringo, just full disclosure, Karen and I have like a back channel chat room where we’re pretty much just typing in all caps during everything you’ve said over the last twenty minutes. This has been wonderful. Before we let you go though, I just have to ask, do you have any advice for anyone who might be listening who’s about to start a responsive redesign today? Is there anything you’ve learned in responsively redesigning MW.com that you’d like to share with our listeners?

Lisa:

We’re looking at each other wondering who should go first. [laughs] I think one thing I would suggest is to really understand what the process involves and give yourself plenty of time. Because it is more complicated and because as you go through different platforms you’ll find things that you didn’t expect to find and there are so many more areas, so if you just take typical web design and say, “Oh, you know, hey, it looks good on Chrome, but * cough cough * IE is sort of a mess, and so we’re going to have to fix that,” and now, you know, spread that out over all of the different devices…

I think people might think about it as a regular web design, and because it is more complex and it can be very tricky, “What happened to the font? Does this image scale or are we pushing a different image size altogether?” There are so many technical bits and pieces, there is so much more QA. Just on the technical side, really understanding what’s involved and giving yourself plenty of time would be one piece of advice.

And the other one would be to really do a lot of planning and thinking both in terms of doing your research, looking at other responsive sites, both in your space and not in your space, for what you think works well and looks good… How do you feel as a user when you play with things? I hear a guy named Ethan Marcotte has a really good book out about responsive web design, and so kind of really do your homework on the strategic and user as well as planning for the extra technical side. Ringo, what else?

Ringo:

Yeah, from the design standpoint, I forgot to mention in the design process what I did in Sketch also that I created, which would translate to CSS—I got the header, the h1, h2, h3… So, if you set that up in the beginning, it’s extremely helpful because you use that throughout your site. You can do that in Sketch, turn those into a symbol, and then you just use that throughout your layout. That’s really helpful so that you don’t have to recreate things every time.

Like I mentioned, the module thing was very important. Test it out, because maybe you see on the desktop you have the headline, on the carousel you have the headline, you have the blurb, but then on mobile you don’t have enough space. What are you going to do with those blurbs? We decided to take that out. Those types of things. Test it out early and then iterate from there. But that is really important.

And another thing, maybe it just applies to us because we have such a short time—there’s things that we were going to incorporate into the definition page, and we tested it and we tested it and it was not working perfectly. Sometimes you just have to let it go, and then maybe you release it later. So those types of things, there’s going to be a decision like that that comes up while you’re working, so just don’t be scared to let things go even though it’s a great idea.

Lisa:

I think that’s always true.

Karen:

Well Lisa, Ringo, this has just been fantastic. I think for anybody who loves language and loves words, the idea of getting to work for Merriam-Webster sounds so amazing, and just to hear how innovative and how thoughtful your strategy is around going responsive has been really impressive. So, thank you so much for taking the time to talk about it with us.

Ringo:

Thank you.

Lisa:

Thank you for having us. We really enjoyed it.

Ringo:

Yeah, our pleasure.

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.