Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.
And I’m your other host, Ethan Marcotte.
And this week we are so excited, it is like we are our own source of renewable energy. We have Jaime Salm and Aaron Mentele here to talk about MIO. Welcome.
We’re really excited to have you on.
But before we dive in, I’d like to take a moment to mention our sponsor, GatherContent. They’re a wonderful content collaboration platform that helps teams plan, organize and produce all of their web content in one place. We’re excited to have them as a sponsor, as they want to make collaboration easy. GatherContent lets you centralize your editorial process, allowing your team members to easily edit and approve content: they offer simple workflows and structured templates, leaving off the mess of mailing tons of Word documents around.
What’s more, GatherContent’s designed a powerful API, allowing you to take your content wherever it’s needed: whether it’s publishing to your CMS, or pulled into an in-browser prototype, or directly into your application. If you’re looking to make your website responsive, you might give GatherContent a look. Check them out today at gathercontent.com.
The website for MIO, mioculture.com, launched recently and it is a gorgeous site. I would love it if both of you would introduce yourselves, tell us a little bit about you, a little bit about the company, and a little bit about your role on the project. Jaime, you want to start?
Sure thing. So, I am the creative director and cofounder of MIO. MIO is both a design consultancy, a boutique design consultancy focused on sustainability and local manufacturing, and a collection of wares for the home and office that are made responsibly. We work with local manufacturing and we try and source the most sustainable material available to us. And that’s pretty much what I do, all day and night. [laughs]
So I’m Aaron and I’m one of the partners at Electric Pulp, and Electric Pulp is a web development shop, or agency, or… I actually don’t even know what we call ourselves anymore. But we build websites, and we happen to do a fair amount with lifestyle retail brands, we do a lot of work with e-commerce, and all of that e-commerce work is responsive.
We are about making sustainability accessible, and so really accessibility online means responsiveness as well, and good design.
So let me follow up on that and ask both of you: as you were planning this redesign, were there any concerns or questions about responsive design as an approach or a methodology? Like, did you have any difficult conversations about deciding to go responsive?
No, and there’s a very big reason for that. [laughs] I think when we came to Aaron… Well, first of all, I had admired the work Electric Pulp has done for a long time, and so I was like, “We’ve got to work with these guys!” We really wanted to work with them, and we had a website that had a lot of issues and it was clunky and it was getting old and it was falling apart at the seams, and I think Aaron can talk more about that for sure, and Google’s “Mobilegeddon” came and we were like sitting ducks pretty much.
So really it wasn’t a question of should it be responsive, it was like it must be responsive, and whatever we’re going to build on has to be much better, has to fit the company design-wise. We are about making sustainability accessible, and so really accessibility online means responsiveness as well, and good design. So it was a perfect match, in that sense. So it wasn’t a question of “if”—it had to be done that way.
It was more than just not being mobile-friendly, it was that the site just didn’t really speak to a consumer.
Yeah, and maybe just to expand on that a little bit: MIO as a company has this very clear purpose, and when you come to the website, it wasn’t strictly that it wasn’t mobile-friendly, it was that maybe the messaging hadn’t really considered a smaller screen audience or quicker look audience. You’d come to the site and you wouldn’t get the mission, and you wouldn’t get the value prop, and then, again, on mobile you really didn’t get much of anything. So it was more than just not being mobile-friendly, it was that the site just didn’t really speak to a consumer.
I just said “phone,” I’ve been trying not to.
So MIO, they play in both B to B and B to C—I can let Jaime go further into that—but that model, those two models are very, very different, especially when you start to look at retail e-commerce on the phone—and I just said “phone,” I’ve been trying not to—so, mobile screen size. It’s just very, very different promoting to a consumer versus business, and so when we looked at that, it wasn’t, “How do we pass Google’s mobile-friendly test?” It was, “How do we help get that message across?” Because the more you learn about MIO, the more you find out that really there’s a lot of thought process that goes in on the back end of their products that really requires that storytelling just to let people know what it is that they’re selling.
Yes, that’s a good way of putting it, and yes, that’s exactly the problem: I think we had the wrong tool; we were using a butcher’s knife for carving something very precise out and telling that story. What Electric Pulp has done is create a platform that we can build on that we can tell the story about the product, that we can tell the story about the company, that we can share why we’re doing this and how we’re doing it.
Now that we have a platform, it’s our responsibility to build on it and to create content and really put all the pieces together for our audiences, both B to B and B to C. And it’s obviously a challenge, but now we have the tool to do it, so it’s really exciting for us. It really changes us as a company I think, which is great.
That’s why I use that label “mobile-friendly,” and that veers away from the idea of responsive a little bit because it’s almost clearing a bar, passing a test, and we don’t usually look at it that way.
I want to pick up on something that Aaron said a couple times, which is, you know, this phrase “mobile-friendly.” I’d be curious to hear a little bit about how the constraints of the small screen were used in the planning of the site. I mean I guess a lot of organizations we speak with, they struggle with trying to understand the needs of the mobile user versus the desktop user. Some of them see them as essentially the same use case, that they all effectively need the same information. Other folks argue that mobile users and desktop users essentially need different things. Where did MIO’s responsive design fall in that spectrum?
So, how about I start, Jaime, and then you can jump in as well? So mobile-friendly is one of those labels I use kind of grudgingly. Jaime mentioned “Google-geddon,” I think is what you said. Anyone who did not pass that Google mobile-friendly test at the end of April of 2015 can look back at their traffic and see in their acquisition channels, their search referral traffic just dropped off a cliff right at May 1st, basically, 2015.
And, so, that’s why I use that label “mobile-friendly,” and that veers away from the idea of responsive a little bit because it’s almost clearing a bar, passing a test, and we don’t usually look at it that way, but that’s the reason I’m saying mobile-friendly. So, there are two sides: there is the one side of getting your search traffic back and getting people to be able to find your site, and that’s almost the mathematical side, you know, “Do this and you get your results back.”
We went at it looking at it like, how do we expose the mission all along the way and make sure we can do that on a small screen or a large?
The bigger thing for us—because we all knew that, MIO knew that, Jaime and Isaac came to us, that was very top-of-mind for them. The other side of it, though, is when you’re talking about a mobile screen size, that range… you can say that people use mobile devices differently than they use a desktop device, I think that that’s true, and in other cases it’s false, but there are a lot of different ways that you would use those devices.
When we looked at it, we started to look at, you know, what’s the message that MIO wants to get at? So, we didn’t go in and say, “Okay, here’s the site, here’s the structure, it’s an e-commerce site, they need to do these things.” We went at it looking at it like, how do we expose the mission all along the way and make sure we can do that on a small screen or a large? So for us it was really giving the purpose back to the MIO product line, and that was a bigger part of the design process than just how do we take these images and this content and squish it down into a smaller size, or vice versa, mobile-first and grow it out to a large desktop size? It was more like how do we get the message across on either screen or anywhere in between?
The big thing here is we’re not just a product company. Like I said in the beginning, I think our stories are very important to our products.
Yeah, I agree with that, and I think the big thing here is we’re not just a product company. Like I said in the beginning, I think our stories are very important to our products. Some customers, they do come and say, “Oh, I just want these tiles for my wall because they look great” and that’s it, that’s the end of the story, and they just need to get some very basic information—the cost, the dimensions, how many I need—like really functional things.
But other people are there and they really want to know more about MIO, and I think getting as much of that content in a format that is readable in other platforms was just as important for that part of the audience. And also on the B to B, I think that that’s even more key to the story of our new site. I think really making that information accessible, still readable, not squishing it down, making it so it’s like it flows, and I think Electric Pulp did a great job with that as well.
I think we were more involved, we were looking at it in our browser and on our computer, and then we had a few iterations where they were showing us what some basic screens look like on mobile. But a lot of it I think we left up to them and I think we trusted them and it turned out to be the right thing to do, trust your web developers, and I think that was one of the big things we learned working with other companies in the past, I think we made mistakes where, like, we were dabbling in things that we shouldn’t have been dabbling in. We gave them a little bit of leeway to actually go out there and do what they had to do and make some decisions on behalf of us.
I’d say that we’ve been doing this for four years, responsive e-commerce, and I can’t imagine it going any other way.
So I’d be curious to know, as you’re planning a responsive project, especially where you have a client services relationship, how do you scope a project like this? Is it different? Do you expect that the timing or the costs are going to be different because you’re now working in a responsive way?
No. It’s impossible to decouple that today. Off the top of my head—and I should know this, but I don’t—I’d say that we’ve been doing this for four years, responsive e-commerce, and I can’t imagine it going any other way. We’ve written some case studies on client sites that we had designed ourselves, non-responsive, and went in and retrofitted them to be responsive, and took a look at conversion rates and revenue and all of these other indicators, and it was just obvious and kind of validation, we already knew that making a site work well on mobile was going to result in people being able to use it. But that was a long time ago, and it didn’t even really take that initial proof, it was just a matter of the evolution came quick and then all of a sudden everything had to be modeled that way.
When we look at a project, we don’t ever say, “Here’s the cost and then here’s the cost for responsive” as like an itemization or an option. It’s just simply “Here’s the cost of development.”
When we look at a project, we don’t ever say, “Here’s the cost and then here’s the cost for responsive” as like an itemization or an option. It’s just simply “Here’s the cost of development,” because it’s just part of our process, the design and the development is responsive now. So, we’ve never pulled that out. I think initially when we started we probably had to add time and cost because it was new, but that’s long since gone away now too, it’s really just part of the same. And that makes sense, because it’s all the same codebase and the same Sketch files there, whatever, all of the assets—the process is all singular now. So, nothing is split out, and I wouldn’t say at this point anything really adds cost. Now if you have a site that is not responsive and you want to modify that, then it’s probably pretty clear to look at it and say this is the cost for just the mechanical aspect of updating the site to work responsively, but certainly not a part of our bid process.
We look at it more like completely agnostic of device, and we think about the smaller screen and the larger screen constantly as we’re going through it.
Aaron, I’d love to hear a little bit more about how the Electric Pulp team works responsively. Like, has working in a more device-agnostic way changed the way you folks structure projects internally, the way that your developers and designers collaborate? I’d love to hear a little bit more about how you guys actually ship this stuff.
Sure. So, it’s probably important to note that we’ve been around for—in like a month, we’ll have been around for twenty years. So, we have some… baggage. [laughs] Or some very strong ideas in the ways that things need to be that are influenced by the things that we’ve always done. So we have this process that has been built up to work a certain way.
It’s fun to say you’re entirely mobile-first and that’s the only way that you think, and that you grow off of that. For us, it’s maybe not that case. I don’t know if I’m throwing us under the bus by saying that. But we look at it more like completely agnostic of device, and we think about the smaller screen and the larger screen constantly as we’re going through it. We don’t do it linear, so we don’t go through and say, “Here’s the mobile approach and then here’s the desktop approach,” and I don’t know if any teams do that, honestly, because it just does not make sense to anyone on the team here. I don’t see how you can look at it as fully separate, two different workflows.
It’s almost like you’re looking at them at the same time, rather than build out a modeling template for mobile and then coming back and building out that same template for desktop.
So for us, we’re using Sketch, I think I just mentioned that, and Sketch does a really good job of allowing you to create the screens all in one place rather than with Photoshop, where you’re comp’ing everything on one screen at a time and going through a feedback loop. For us, we’re building them out in tandem, and so you’re seeing them side-by-side, so you’re thinking about them at the same time, you’re thinking about the process.
Now, all of that said, obviously there are different patterns of usage on different devices, there are a lot of things to consider for messaging, visuals. But it’s almost like you’re looking at them at the same time, you’re growing them out at the same time rather than build out a modeling template for mobile and then coming back and building out that same template for desktop or vice versa. We look at them at the same time, and I can’t take credit for that, I think the whole team does a really good job thinking about both sides. Stefan, who did the design on the MIOCulture site is just a fantastic designer and he can almost be using the right and left sides of his brain at the same time, one eye on one, the other eye on the other. It’s very much it’s fluid and it all happens at the same time. I don’t know if that makes sense, or answers your question. [laughs] But we don’t separate them, there are no walls between these breakpoints.
There was a lot of content that had to be developed and it had to be developed very quickly, and we wanted to do a lot of things.
Jaime, let me ask you about the content creation process for a site redesign like this. As you were thinking about how you might tell your story or perhaps describe your products differently, how did the responsive design process influence that or maybe even change the way that you presented descriptions or information about your business?
To tell you the truth, I think we were a little unprepared. [laughs] I hate to admit that, but yes, we were a little unprepared. I think there was a lot of content that had to be developed and it had to be developed very quickly, and we wanted to do a lot of things. We had a very ambitious laundry list for Electric Pulp which we edited down to things that made sense, you know, that fit a scope that was achievable. And then on our side, really preparing content, revamping content, making sure that it worked at all different scales and that it communicated more about the product.
But I think, again, for us I don’t think it was separate either. I think we looked at the content holistically and we were saying, “What are our PaperForms? What are our FoldScapes?” How do we explain that to a consumer, whether they are on a tablet or whether they’re on their phone? Whether they’re on a project and they’re like, “I wonder if these guys who have those cool wall panels, is that going to fit here?” We were trying to, like, really visualize what it is that those customers are looking for on our site, whether they were on one platform or the other, and that’s how we’re developing that content.
We’re in the process of even editing it further and trimming things. A website should be a living thing—especially once it’s up it shouldn’t be this static thing.
We had to edit a lot, and I think that was the other big challenge for us, editing down the copy and making sure… I mean right now we’re in the process of even editing it further and trimming things. We’re still adjusting, and for me that’s a great thing. I think a website should be a living thing—especially once it’s up it shouldn’t be this static thing. I think we’re learning more about our users and how they’re responding. I mean, some orders come through and people are confused about one image or about some content, we immediately are “Okay, what are we going to do about this particular product? How are we going to change the copy? What other information do we need to provide? How does that look on the phone, how does that look on the computer?” We are looking at that, but I don’t think that we were like saying “what is the difference on mobile platform versus the computer?” I think we were looking at it holistically. “What is MIO’s story and are we telling it effectively with the images and with the copy? And what information is in there?” I think that’s how we’re approaching it.
Are you asking me if we design in the browser? Or if designers need to know how to code?
I’d love to hear a little bit about the design reviews that were conducted while the site was actually evolving. Aaron, for example, what were you actually showing to MIO to actually show the responsive design? Were you showing prototypes? Were you showing mock-ups? A combination of the two? And Jaime, I’d love to hear a little bit more about how that process actually felt from the client side.
Sure. So… are you asking me if we design in the browser? Or if designers need to know how to code? [laughs]
[laughs] If you will.
We do the landing page first, that helps us get the visual cues together, the messaging together, just the general aesthetic of what’s going to happen on the rest of the site.
[laughs] We use Sketch, and we still do flat comps to do a standard desktop range and a standard mobile range, and then we pull them into inVision and present that way. Just the real quick version of a design review: So, we do that on the landing page first, that helps us get the visual cues together, the messaging together, just the general aesthetic of what’s going to happen on the rest of the site, and that is very clear where you’ll have both views. Where earlier I said there really wasn’t a wall between the two, you’ll be able to see here’s what it would look like on a standard phone device, here’s what it would look like on a standard desktop device. That’s the first step, we go through and we review that, and I think that’s probably pretty common for most developers. Get that landing page experience through design review first, and then as we get deeper into the project…
At the beginning you get both: you’re going to see mobile and desktop, and then in the middle of the project it’s more just getting the content right and we don’t always have both views.
Some of that follows a pattern, so we don’t like to review every single page as “Here’s the desktop view and here is the mobile view,” we like to do it at the beginning, do it on specific pages. Maybe you have a complex form that’s going to have to have very specific mobile rules that maybe wouldn’t follow a typical grid scaling down in columns. So, at the beginning you get both: you’re going to see mobile and you’re going to see desktop, and then in the middle of the project it’s more just getting the content right and we don’t always have both views at that point.
So, once we get out of that design review—so we go through and we do design and then we build and then we do implementation and deployment—we have some of those screens that probably would never go out for feedback in a mobile view or a desktop view, but there’ll be a development server where you can see the project as it’s being built out on staging. So all of the design feedback is pretty specific in the beginning, and then if there’s a point where if there’s a responsive solution that doesn’t make sense, so it doesn’t look good on iPad or tablet, you get that in the staging area—and I don’t know if I’m getting too far down in the weeds on the process—but there’s really a lot of places where you can experience that mobile, both from looking at the mock-ups and from actually experiencing it in a dev area. So you get a little bit of both.
Right away you can see better conversion rates, but I almost don’t like to look at anything and call it scientific until you’re a few months in.
One of the things that people consistently seem to harp on in the industry is the idea that mobile conversion rates are low, and I think that sometimes there’s this sense that people don’t want to shop on their phones or that conversion rates will always be low on mobile. Can you talk about how the responsive redesign has affected your metrics? Like, is this delivering the kind of business value that you’re looking for?
It’s pretty early to tell. We usually want about four weeks to watch statistics, so in MIO’s case it would be really hard to say. Right away you can see better conversion rates, but I almost don’t like to look at anything and call it scientific until you’re a few months in. I can tell you that just if we threw that net a little wider and said let’s look at half a dozen or twenty clients that have retail sites that have gone responsive, you’ll always see that uptick on conversion rates. I’ve never seen it not. And it goes up in a significant fashion; it’s not that it just barely goes up, it’s very obvious.
But the thing that we look at with conversion rates—like if we kept that net that wide and said, “Let’s look at a dozen clients and just pull some averages,” we would always see, at least in the cases that we work with, the conversion rate on mobile is lower, and I don’t think that’s a surprise to anybody.
Our conversion rates go up when the site goes responsive, but I can’t think of any cases where the conversion rate is as high on mobile as it is on desktop.
But we also look at it and we try to put a little bit more logic to those statistics. The time on site on mobile is also less than time on site than desktop, and that can mean a couple things. In the worst case scenario, that means that a person gets fed up with the site, they don’t like it and they leave. But I think more reasonable, especially if you have a site that does look good on a mobile range, the better explanation is that people will tend to browse quickly on a mobile device, where maybe they’re not on a desktop, and the reasons are—you can jump to conclusions, but because it’s mobile, just by definition of mobile, people are maybe not sitting at a desk, they might be at a store, they might simply be comparing prices, they might be doing a quick review, they might be on the bus, on a plane, and just looking information up. So you have different purposes and all of that I think factors into conversion rate. Our conversion rates go up when the site goes responsive, but I can’t think of any cases where the conversion rate is as high on mobile as it is on desktop.
If we just switched the statistic to revenue, we have plenty of sites where the mobile revenue is higher than the desktop revenue.
Now saying that, if we just switched the statistic to revenue, we have plenty of sites where the mobile revenue is higher than the desktop revenue, and that’s something that I think is a pretty profound change. One client over the holiday season, a shopping season, so Black Friday through Cyber Monday, saw sixty-seven percent of their revenue coming from mobile. So, that’s a big switch.
And with MIOCulture, you have to have a few things going. You can’t just build it differently, you also have to set the stage for people and then let them know that now you’re mobile-friendly. So, there’s that adoption rate of just letting people know again, “Hey, the site’s all new,” and in their case they already work with B to C and B to B, but it’s almost like a re-introduction for the B to C market for them. So, I think we need to give it a few weeks.
They have good statistics today, but we’ll see the same thing that we see with everyone: you always see an immediate rise; but the more dramatic rise, it’s not just a plateau or a step up, it’s a trend up. So, you’ll see it go up, and then you’ll see it continue to go up, and that’s kind of how it happens with everyone that we work with that goes responsive for the first time. And then beyond that, we have clients that we’ve redesigned responsive sites for them three or four times now and you see those continued ticks: the nicer you make an experience on mobile, the better the conversion rate. But we always have to look at that time on site and a few other indications just to keep in mind that people use sites differently on a phone than they do on a desktop, and I think that’s pretty common sense type of thinking, but nobody really wants to admit that.
Working on the content, really thinking about that content ahead of time, taking your time for investing in it, I think that’s smart.
One thing I’d love to hear a little bit more about is if you guys have any advice for our listeners who might actually be about to embark on a responsive redesign. What’s something you learned during the redesign of MIO that you’d like to share with our listeners?
[laughs] Jaime, I feel like I’m on these rants…
No, they’re good rants!
…If you want to take a stab, I’ll jump back in.
When you’re asking, “Hey, should this be mobile? Should this be flexible? Should it be adaptable to what’s currently going on in e-commerce?” the answer is, “Is there any other way of doing it?”
From my perspective, I think working on the content, really thinking about that content ahead of time, taking your time for investing in it, I think that’s smart. And picking a partner obviously that you trust, and someone who is… What I love about what Aaron is saying is that it’s not about one way or the other way, it’s both. When you’re developing a site, you’re making this investment and you want it to work, you know, for what is happening right now in the marketplace. So it’s not like it’s an optional thing.
It’s the same thing when I talk to my clients, if they say, “Well, should it be sustainable?” Sustainability is not an option if you come to MIO. We believe that sustainability is the way that things should be made. So similarly when you’re asking, “Hey, should this be mobile? Should this be flexible? Should it be adaptable to what’s currently going on in e-commerce?” the answer is, “Is there any other way of doing it?”
So I think preparing for that is really… it’s really changed a lot of the ways that I’m thinking about the site and what we can do, and I’m almost excited for what’s next. I think aside from us putting and building this website out, I’m almost thinking, “Okay, what’s MIOCulture.com version 2.0?” I’m thinking, “What are the real tools that we need?” We had originally, like I said, a long list of things that we wanted them to do, and I’m thinking, “What makes sense? What will make sense two years from now, three years from now, five years from now?” So really, it has opened doors in terms of preparation. That’s just content, I can’t think of anything else.
I think content is probably how I would’ve gone, too. You really need to be thinking through more than just the design interface patterns, you really have to be thinking about how to get your message across, and if your time on site is lower on mobile, how do you get it across more quickly? So things like that you really need to build up from content, you need to build up from your message.
- In our case, and I don’t know if this is the way everybody thinks, but for me, you always have to be gathering data, so you always have to be watching analytics. We try to set up a lot of events so that, when we launch a new site, we know what the conversion rates are doing, we know what everything is doing right down to bounce rate, which is the most evil statistic in the world because there are so many red herrings and false positives with bounce rates, but you need to be watching all of those things. So when we launch a site, we add a bunch of events, we configure Google Analytics to watch search queries. So we know what people, where they’re going, what they’re looking for, whether the goals are being achieved. So, your performance indicators are huge and Google Analytics just makes it so easy to not just have to launch a site and guess, but to launch a site and see exactly what works.
If you’re building with a new pattern, you’re going from non-responsive to responsive, you really need to be ahead of your analytics to be able to monitor exactly what’s going on.
Earlier I said that everything we build, the mobile conversion rate goes up. There are times where you’ll launch and out of the gates it won’t look like there’s a big push, and you might find out later that maybe through that development process you switched from Google Analytics Classic to Universal, and then all of a sudden you have a different baseline, or something’s changed, maybe you have some kind of window that slides out that calls a ghost page, and then your pages go up, the conversions go down. There are a lot of different things that you just need to watch.
I guess my point is if you’re building with a new pattern, you’re going from non-responsive to responsive, you really need to be ahead of your analytics to be able to monitor exactly what’s going on so you can continually iterate. You’re working with data, not just intuition. There’s just a lot of information that I think you have to have that I’m not sure if everybody works that into their process or not, but for us it’s a huge part of what we do. So we want to know what’s happening with revenue and conversion and all those things so that we might only be two weeks down the road and we realize “Maybe something wasn’t quite right.” I just think that’s probably the biggest thing that maybe people—and I don’t know if that’s agencies or clients or everybody—but I think that’s probably the easiest thing to miss, just thinking through that testing model.
Well Jaime, Aaron, I think the only thing that I am more excited about than talking with you today is the beautiful products that you have for sale on MIO. I’ve been just riveted by looking through the website at all of the fantastic things that you make. So, I’m going to look forward to moving and buying some of your fantastic products, and I hope that everybody else will enjoy checking out your website. But, for today, thank you so much for taking the time to talk with us. This has been wonderful.
Yeah, happy to be here.
Thank you. Thank you so much.
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.