Episode Transcript

Ethan:

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, I am just beyond thrilled; I’m genuinely excited. We are joined by Noëla Parant and Chad Jennings, who are here from MOO.

Noëla:

Hello.

Chad:

Hello.

Ethan:

But before we dive in, I’d like to say a few brief words about our sponsor.

Now, Karen and I use FreshBooks extensively here at our little podcasting media empire, and we’re thrilled to have them as a sponsor. And we’re even more thrilled because they’ve launched an all-new version of their popular cloud accounting software! It’s really easy to use, and is a simple way to be more productive, organized, and—most importantly—get paid quickly.

This new Freshbooks has a ton of great, intuitive features. A few favorites: it lets you create and send professional-looking invoices in less than 30 seconds; you can use Freshbooks to set up online payments, which can get you paid faster; and many more.

Sound tempting to you? Well, FreshBooks is offering a 30-day, unrestricted free trial to listeners of the Responsive Web Design Podcast. To claim that trial, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section.

Once again, thanks so much to Freshbooks for sponsoring our little podcast.

Karen:

Gosh, this is great! I’ve been looking forward to talking to you both for quite some time. Just to kick this off, how about both of you introduce yourselves, tell us a little bit about who you are, what your role is at MOO. Noëla, do you want to go first?

Noëla:

Yes. So, I’m Noëla. I’m lead UI designer here at MOO. I’ve been there for a year and a half, and I basically look after anything with UI design. I spend a lot of time between brand, product, and tech to make sure we deliver solutions that not only solve our customer’s problems but that are also beautiful, creative, and on-brand.

Chad:

And I’m Chad Jennings. I’m actually the chief product officer here, so I oversee three teams: our product management team, our UX design and research team, as well as our physical product design team. I actually moved over here from the Bay Area about five years ago, so I’ve been at MOO for almost three years now.

Karen:

Well, one of the reasons that I was so thrilled to get a chance to talk to you is that MOO is actually a really fairly complex product and service environment. I think when responsive design first came out, there was this sense that, yeah, maybe you could use it for your blog, but it was never going to be appropriate for a very complex, transactional, e-commerce, merchandising experience. Could you maybe talk about the conversations that you’ve had around going responsive, and were there any questions or concerns about whether this would be the right approach?

Chad:

Sure. So, it’s interesting because, really, MOO, as you said, is complex in that it has a couple different segments and a couple different steps in the process, from traditional e-commerce merchandising, to a web app where people are creating things, to an e-commerce checkout, as well as an enterprise kind of platform piece. And so, the questions tend to be less about responsive and more about, Hey, we need to solve mobile. We need to solve small viewport. How do we go about doing that? Because it really is a multi-year, maybe three or four-year process to make our entire end-to-end user journey mobile-friendly, and so responsive just ended up obviously being the way to go. We didn’t have to argue so much around that, I think people just really got it.

A lot of the arguments were much more around should the experience be different, for example, when you’re creating business cards, or creating postcards, or creating flyers on a mobile phone or a desktop viewport or even an extremely large viewport, whether you’re a designer using this or an enterprise customer using this. Our conversations were much more about how we needed to design an experience differently potentially on different viewports versus whether we should do a responsive solution or not.

Ethan:

Chad, this might actually be a wonderful time for me to ask, how did you actually sort of think about how those experiences needed to differ across different viewports? We talk to a lot of retailers, a lot of other organizations that sometimes make a very eloquent business case for the fact that mobile users and desktop users need different experiences, need different UIs. Whereas other organizations try to sort of really refocus most of their interfaces on what matters to all their users, regardless of the device. Can you talk about how MOO sort of navigated that spectrum and where you ultimately landed?

Chad:

Sure, yeah. So, we have three segments, and let me just talk about two of them that we talk about, and they’ll be quite obvious for people, I think, once you think it through. So, what MOO was really built on in some ways was what we call our enthusiasts, our small business and entrepreneurs, meaning our goal in MOO is to make design available for everyone. “Great design for everyone, everywhere,” is kind of one of our key tenets. How do we bring great design to small businesses to help them stand out? And so many of them do not have design skills, right? We provide beautiful templates; we provide something that we call our online creation tool to help them lay out their own designs, add their own content, add imagery, and that’s one way that a lot of MOO was built up on.

But we also are very popular and have many designers that use us. So, designers and freelance designers and in-house designers at businesses who use MOO for their brand identity products. Obviously their creation experience is very different, right? For the most part, they’re doing most of their creation experience within professional tools, whether that’s Illustrator or InDesign, and are coming to us to upload a press-ready PDF, for example. So, when we think about their mobile experience, we’re still trying to figure this out, to tell you the truth. Like, you can imagine that the browse experience—so, I’m discovering MOO, I’m discovering products, I’m getting pricing, I’m figuring out which product is best for me… That obviously can be very similar across both those segments, and therefore that’s kind of where we started our responsive work, is building out a new CMS, building at the top of the funnel and redesigning that to serve those two needs.

What we’re going through right now, though, is the decision of, Hey, if I’m a professional designer, it’s less likely I’m going to have my high-res PDF on my phone and I’m going to upload that way to add to the creation experience. Whereas an enthusiast, or someone coming in and wanting to use design templates is more likely to potentially use an app on their phone to lay out some business cards, or lay out designs for flyers. So, that’s how we’ve started to approach it and think it through, and to tell you the truth, we’re still kind of thinking through the best approach for that. What’s interesting is we still have a lot of designers that come and actually will say, “You know what, I may use this on mobile, but I’m going to go away and go back to desktop when I’m actually going to come and convert with you.” So, that’s kind of our challenge and what we’re still working through a bit.

Karen:

Maybe that might lead into another question, which is one of the things I’ve seen basically every organization struggle with, is how do they collapse or deal with a large, complex global navigation on a smaller screen size. Can you talk about how you handle that and maybe how that is affected by what you observe in how people are flowing through the application or how people are making decisions?

Chad:

Yeah, I’ll start and then maybe Noëla can talk about the design of it a bit. We’re a ten-year-old start-up in many ways, so that means we also have ten years of legacy code and ten years of different parts of the site built and attempting to have a single global nav across all these different instances, from a WordPress blog, to PHP pages, to Rails pages, to different pieces on that. So, the first thing we tackled was our global navigation. In order to make the entire site responsive, we really had to tackle how that global navigation moves up and down on different viewports. And so one of the big challenges that came was around how do we present the click or hover on different viewports.

So, one of our big challenges with the global navigation, of course, which many people do both on responsive is how do you interact with that both on a touchscreen, or a touch-based device—a mobile phone, a tablet—and obviously a larger viewport or desktop. We used to have a global navigation where, when you came across and hovered, you would hover and click and it would show that sub navigation. Of course, hovers don’t work on touchscreens. So, we made a decision to go to a click to open the navigation and then you can navigate through that sub-navigation that way. We rolled that out, and it was consistent between the small viewport and the large viewport. But actually what we did is we saw it changed how people flowed through the site in a really major way. Instead of going to, for example, our All Products page, people were now going to our Product Category pages much more because they were clicking and going directly to that overview page. That actually changed many things. It changed our average order value, it changed conversion, it changed our product mix, just around this simple difference between hover and click.

What we’ve gone back to now is actually a different interaction on a touchscreen. So, on touchscreen it’s still a click to open the menu and go into that. On our desktop, if you come to MOO.com, you’ll see there’s a hover and the sub-menu comes down below that, and that’s kind of changed again how the navigation flows through the site. So, it was a great learning for us; it took us a while to figure out exactly what the impact was on our product experience, but that’s what we’ve done now.

Ethan:

I’d love to hear a little bit more about how responsive design might have changed the way that you think about visual design for the web. Has the process that you used or the tools that you used changed now that you’re thinking about multiple devices when you begin laying out an interface?

Noëla:

So when I first joined, the redesign was already underway, so there was this new look and feel that was emerging from the responsive redesign. What we did at that point was we extracted, from an atomic design perspective, all the tiny elements in the sense of this new look and feel and we started to build a new design system based on this, along our new design challenges that were coming up with the responsive redesign. In terms of the tools that we used, this is where we introduced Sketch. We are a distributed design team, so some designers were working with Sketch, some with Photoshop, and we were working very much in silos. At this point, we formalized everything, adopted Sketch… And also we adopted Craft library, so all the design elements from the design system are available from this plugin, and it’s shared across the design team, so that changed a lot, and it improved consistency and the overall UI design standard that we were delivering, and also it improved how we prototype and how we do mock-ups, so now we can spend more time testing our hypothesis rather than discussing our UI design questions.

Another thing that changed within the development process is we are quite proud of our design system, but it was living at a design level only in Sketch. So, what we did is we asked developers to mirror our approach and think about streamlining and avoiding duplication. A few of them got super excited, and this is how we started our pattern library. So, what we have now is a living design system that still needs to grow up, but the basics are there. It’s shared across the product teams, and they can all use it and contribute to it.

Ethan:

The one thing I’ve been dying to ask both of you about is responsive images, because that’s something that I think a lot of organizations struggle with when they’re thinking about not just how to resize imagery across different sized screens, but maybe when they might want to introduce a different crop of an image, or basically just how to catalog all the different imagery that they’re displaying and determining where it shows up. Is that something that you had to work into your responsive design process at all, and if so, how did you think about it?

Chad:

I think one of our learnings was that I wish we would have spent more time thinking about a responsive image strategy earlier on. And not only in getting the developers around that—because if you do research, there’s still tons of different approaches and different philosophies about how to do it—but also I think with our creative team and our marketing team, to understand how art direction worked for them, how they could take an image and might use it differently in a responsive world, because they really weren’t up to speed on how that could work. So that was one, I think if we would have spent more time on that maybe earlier on in the process, it would have helped.

The second thing is imagery is super important to our brand. We’re a pretty image-heavy site; it’s all about physical product and the details of those physical products, and so we spend a lot of energy and time on photography. The one benefit of that is we actually have a photo studio right here, we do most of our photo work at MOO and headquarters here, which is right around the corner from Noëla’s desk. So, the good news is when we can quickly do some mock-ups and have them photographed, Noëla and the team can take some time to put them in mock-ups to show and display to the photographer, a little bit real time, how we might use art direction as this moves up and down the process.

Noëla:

Yeah, because one of the things we can stress is how key photography is for the user experience, because for conversion, for people to really understand what they’re buying, they need to really see what is shiny paper, what is matte paper, what is gloss, all these types of paper that we need to really display properly. In terms of the process, again, we really need photography to solve some of our UX problems, so there is a lot of back and forth with the creative team, with the photographer. We can sometimes spend a lot of time in the photo studio with them, it’s an evolving process and collaboration.

Chad:

Noëla, how many images do they usually provide? Is it one and it’s mostly resized within our CMS at this point, or do we write custom images as well?

Noëla:

For one responsive module, they have to provide two to three images. So, definitely one for a larger viewport and one for a small viewport. Sometimes we can tweak the code so it will resize, we can tweak the ratio within the module, but sometimes they will have to provide a specific image with a specific crop for different modules.

Karen:

My ears perked up a little bit when you mentioned your CMS. I’m always very interested to hear from big, complex organizations and how they solve for some of their responsive design challenges, which also often impact or hit some of their CMS challenges. I think sequencing or structuring a large-scale project to deal with the whole range of problems like that can be really complicated. How did you all solve for that?

Chad:

Well, I don’t know if we totally solved it, but we’ve certainly learned a lot. It’s funny, because actually coming into MOO, at my previous gig we were doing a CMS rollout and a responsive redesign at the same time, and I told myself, Hey, we should never do this again because you have so many dependencies. And what happens is the dependency happens especially around top-of-the-funnel pages, like the home page, product pages, entry point pages, which get lots of traffic, and the challenge you have is, one, you’re redesigning, so new content, new images, new copy, as well as putting it into the CMS, and that redesign has to beat the original version. So, before you can launch the responsive version and the new CMS, you have to have something that wins in an A/B test. So, what that means is unfortunately then you’re tying launching a CMS.

And so, for example, our CMS, we had a bit of a home-grown CMS mixed together over a couple years. We decided to replace it with Magnolia, so that gave us much more flexibility. The reason we did that was also the merchandising team had much more flexibility and mobility to optimize the site; it was a much more friendly CMS than we had before, much more responsive to their needs. At the same time as we were doing the redesign, we were introducing new priorities on the pages and pieces like that. What we learned was that as long as you have a strong experiments engine and an A/B platform, that can work pretty well. But it means you also have to then hold launching things until they get through that approval process. What we actually introduced in the middle of the process was we started actually doing like-for-like pages. It kind of pained us, and Noëla would say the same. “Hey, we’re taking an old design page and kind of pushing it together to make a responsive design page.” Which wasn’t so bad because we had fairly block-y pages, in some ways, as well. But that allowed us then to launch that, it’s now in the CMS, and then the team can start optimizing around that page and redesigning that page and evolving the experience within the new CMS versus trying to do both at the same time.

Noëla:

On top of that, what’s quite an interesting challenge at MOO is that, from a UI design perspective, the CMS is currently serving our performant pages, but anything further down uses other technology. So, this is where having, again, this pattern library is very helpful. As we’re designing responsively, we still have to consider would this be a CMS module or would this be a react component, and it adds a little extra challenge that keeps us busy.

Karen:

Let me follow up on that and ask about another topic that’s always of interest to me, which is how do you roll out something like this, of this magnitude? I’ve seen pretty much the gamut of people launching individual pages or individual sections, people doing a responsive retrofit, people launching in beta and basically running two parallel versions of their website at the same time, people burning the whole thing to the ground and starting from scratch. How did you roll this out, and what would your recommendations be?

Chad:

In hindsight, I think what we ended up doing—and we learned a lot—we really rolled out in kind of three distinct ways. The first one is what I mentioned: for something that’s a really critical page, we would make sure we set up and ran an A/B test against the old design for a long enough time to make sure we’ve done the first thing. So, that’s kind of the traditional path to that. The other thing we started doing is for pages that we thought were high-risk, we would launch them only in small viewport. So, some of our template pages and business card pages that we didn’t quite have all the functionality built in around filters and a lot of that deep functionality that we needed to develop, sometimes we would launch those only on the mobile viewport and keep our desktop viewport kind of similar, which took away some of that risk and allowed us to learn a little bit. And then the other thing, like I said, was sometimes just taking like-for-like pages and trying to kind of jam them into a responsive solution.

From a rollout point of view, I think we had lots of debate over risk assessment and how open are we to launch something without being really confident it would increase conversion or increase average order value. Because of that, we started launching on a page-by-page method—launch one page, see how it did, launch another page, see how it did. But that meant it resulted in a somewhat disjointed user experience. No one was super happy with that. It was low risk, but the design team felt like we didn’t have the user experience or the information architecture that we wanted to provide to our customers. Marketing felt like, Hey, maybe we aren’t hitting our numbers or getting the conversion rate because we have this disjointed experience. So in hindsight, I think what we probably should have done is had a little more confidence in launching two or three pages at a time that really helped flesh out that entire user journey and have confidence that we could actually track that and see the changes and make a big win in that. Because actually what we’ve learned now that we’ve fleshed out so much more of the full experience, it actually is converting higher and performing better than it did when we had this kind of disjointed half responsive/half not experience, which we launched initially.

Ethan:

I’d be curious to know if, during the course of this responsive redesign, performance and optimizing for speed was something that you had to focus on, and if so, how did you actually plan for that?

Chad:

Very much so, though in some ways the initial focus on speed was somewhat focused a lot on imagery. Because I think as we took a look at our page size, we just had not done very well over the years in optimizing imagery. We knew that some of the biggest, chunkiest pieces were just, as we went in with new imagery and responsive imagery and aligned those, that we’d get big wins in that, which we did. We found places where some pages accidentally had someone who had uploaded a really big megabyte image that had been sitting there that hadn’t been tracked very well. So, that’s one thing.

At the same time, we’re really doing a big tech overhaul in that we’ve moved to a new CND, so that had a lot of speed optimization. We moved to AWS and the cloud just in the past couple months, so that had a lot of speed impact and improvements as well. So with responsive web design, a new CDN, and moving to the cloud, all those three things together provide really big wins from a speed and improvement point of view, and to the size of the pages. So, performance and page speed is something that is one of our major KPIs. We look at it, even at the executive team, on a monthly basis, of how we’re tracking performance within that area. So, those are tied together, but it wasn’t necessarily the reason we went responsive in the first place.

Karen:

You’ve touched on different ways that you would measure the success of this redesign or measure the success of particular pages. Can you talk a little bit more specifically about that? How do you evaluate what’s working and what isn’t?

Chad:

When we talked about our digital experience as part of our product, we really talked about three components or three parts of that journey. The browse-to-build experience—so this is, Hey, I’m discovering what I want to make. The build-to-cart experience—Hey, I’m designing my cards, designing my postcards, designing my product. And then of course the build-to-purchase—the actual checkout process. So when we think about how we measure conversion for example, we measure three different conversion points through that, so we’re getting people from different steps in the process. So as we went into the redesign, a lot of our redesign was focused on the top-of-the-funnel, the browse-to-build experience. So, therefore we’d focus on how are we getting more people—lowering bounce rate, of course—to that second step of the process and converting towards purchase. Obviously converting towards purchase is one of the biggest thing we track.

However, up front we also talk a lot about micro conversions or prospect conversions. What I mean by this is we have an enterprise platform—so, AirBnB and Google and Uber and large corporations like that use MOO for their business cards and for their print stationary, and it’s a bit more of a managed enterprise service. Those type of people, we want to get them in, convert to a lead, so a salesperson getting on the phone with them. That’s a micro conversion. Newsletter sign-up is another micro conversion. For professional designers, where we have some InDesign and Illustrator templates that they download, that’s a micro conversion. So, especially when we look at mobile, those micro conversions tend to be almost more important. And to be frank, we’re still trying to figure out how to kind of bubble those up together to be a conversion point that we can track in a good way, and what’s the most successful place to send people. Do we want to send them to get a sample pack? Newsletter? Sign-up, account creation, pieces like that. So, those are the conversion metrics.

The final one we focus a lot on is average order value or first order value. So, again, in some ways, how much are people coming through and how much are they buying, are they buying higher quantities, higher quality papers… Interestingly enough, even the top-of-the-funnel, and the home page, and the product page, and our navigation we’ve found can have a pretty big impact on what people add to the cart and the actual product they make. So, even a change to a page high up in the funnel—and this is why it makes sometimes A/B testing a single page hard—will change product mix later in the funnel and even maybe later on in a session where people come back and purchase later. But those are the key metrics we talk a lot about and how we measure success of our digital experience.

Ethan:

Well Chad, Noëla, this has been a wonderful chat. We can’t thank you enough for coming on our little podcast. But before we let you go, I would love to hear if you both might have a lesson or some advice that you’d like to share with our listeners. If someone is out there listening to the podcast or reading the transcript and they are about to start their own responsive redesign, what’s one or two things you’ve learned that you’d like to share with them?

Chad:

We did a lot of upfront design and upfront thinking, and tried to do lots of mapping of what are the different pages, what are the different modules we need; lots of big, complex spreadsheets. I think from a design point of view and even a product management point of view, we kind of understood the patterns and modules that were used in many places across the site. However, most of the stakeholders, especially in marketing or business or sales, they think about pages. So, we basically had a kind of disconnect. When we were talking about, “Hey, we built this module that you can use on multiple pages!” they really wanted to know, “When do we get a home page? When do we get a product page? When do we get a category page?” It was really kind of difficult, and we struggled getting over that hump.

I think the big learning for me is even though that’s what you’re thinking about in the underlying piece/the system of the design that you’re doing, the system you’re designing is really for yourself and your development team and the design team. What you’re providing to the business is still a user journey, a flow, and improved experience, and that’s kind of what you need to talk about and sell people to avoid confusion and move things forward more quickly. It also kind of helps you say, “Look, we’re going to mock up three or four pages to show how these modules work together,” and make it real earlier on in the process.

Noëla:

I think on top of that, from a design perspective, what we found, especially in a atomic design approach, it’s very easy to go into the nitty gritty details of the design and get stuck into it. You deconstruct the whole UI, you deconstruct the look and feel, and again you get the essence of what this new redesign will look like. But then when you step back and you start putting everything back together, sometimes it just won’t work. At this point, what you might need is some design principles, and Jina from Salesforce a few weeks ago talked really well about the Lightning Design System principles and how they helped make those decisions, make the whole design cohesive. So, this is why you need to define and commit, as a design team, to what is important and what is not important to make sure you get a beautiful system that works well.

Chad:

And I’d like to add just one more tip, because I had a note here and I think it’s important, because it’s really been part of our success: Noëla leads MOODS, which is our MOO design system, our fancy name, which is our design and pattern library. But it was somewhat an organic initiative, meaning there wasn’t something that said, “Hey, we need to build out MOODS.” What happened was it was kind of built out of a need. One of the big pieces that’s made this successful is the forming of a front-end guild.

So those that are familiar with a guild, really it’s an area of special interest. What this does is the guild is really run by mostly the front-end developers as well as the designers that come together on a regular basis, and it’s really fairly autonomous and drives and owns our design system and front-end standards. But it’s really kind of self-forming and volunteer-based, and that’s been super helpful, because as we tried to get other crews and other squads bought into using our design system, it’s really driven from within, not something that’s defined by me at the top of the organization as CPO saying, “Hey, everyone must use this design system.” So that formation of that front-end guild has really been a key piece for the success of our responsive redesign.

Ethan:

And I think successful is a wonderful way to describe it. This has been a fantastic interview. Chad, Noëla, thank you so much for coming on the show. I think I speak for both of us when I say that we are very excited to see where the responsive design goes next. So, thanks again.

Chad:

Thank you for the opportunity.

Noëla:

Thank you so much.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, FreshBooks. Go to FreshBooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section for a 30 day free trial.

If your company wants to go responsive but you need help getting started, Ethan and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

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.