Episode Transcript

Ethan:

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

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, we are practically blue in the face with joy, because this week we are speaking with Mini Kurhan and Olawale Oladunni from Walmart. Guys, thank you so much for joining us.

Mini:

Hi, thank you.

Olawale:

Thanks for having us.

Karen:

But before we get started, I’d like to say a few words about our sponsor, GatherContent. I am so excited to have them as a sponsor, because I just love GatherContent as a product. Pulling off a responsive redesign means wrangling lots of content and stakeholders. The editorial and migration process can be one of the most difficult parts of going responsive. GatherContent makes collaboration and approval processes a snap, with simple workflows and structured templates. It’s much better than the mess of Word documents, Excel files, and missing emails you rely on today. What’s even better is the API that takes your work out of GatherContent and into a prototype or your CMS. Managing the editorial processes in a responsive redesign is difficult enough, so make your team’s life easier, with GatherContent. Go to gathercontent.com and find out how this content collaboration tool can help you plan, organize, and produce your web content.

Ethan:

So Mini, Olawale, why don’t you introduce yourselves and tell us a little bit about what you do at Walmart, and maybe tell us a little bit about how responsive design plays into your daily job?

Olawale:

So I’m actually the UX lead. My official title is principal UX, but I lead the Walmart Grocery specific effort within the Walmart group, and most of my time is spent on all the responsive and general design efforts on that property.

Mini:

So I am also a principal UX, and I lead the home page and personalization group, and with the responsive effort I was really deeply ingrained in working on how to make the hero images and all the marketing graphics across the home page fully responsive.

We had a customer base from different platforms and they knew that there needed to be a way to consolidate to make sure that our efforts were being executed in the most streamlined way possible.

Ethan:

So, obviously you guys have this wonderful upstart little brand that you work for. I’d just love to hear a little bit about how you actually got this responsive redesign off the ground. I mean, in some of the projects you’ve worked on, how did you actually convince your stakeholders or your executive leadership to actually go responsive? And were there any concerns or questions about responsive design as a methodology?

Olawale:

Actually, the road to responsive design at Walmart has been coming for a while. Back a few years ago when the division called WalmartLabs was established with the purposes of bringing technology in-house Walmart, the leadership had this vision for being able to take the digital properties into the modern age. Some of the things they did early on was, first of all, work on things like re-tuning the platform, and be able to adapt to the sort of omnichannel world of digital e-commerce. So, that’s where we started. A few years back, we started to do things like that and we began to go beyond the desktop into mobile and web. But once we were able to complete the big platform shift, it gave us the opportunity to be able to consider things like responsive design, which, as the leadership saw the converging of where our customers were, it made a lot of sense.

Mini:

For the properties we had before, there was a desktop site and a separate m-dot website, and separate mobile apps. So, definitely we had a customer base from different platforms and they knew that there needed to be a way to consolidate to make sure that our efforts were being executed in the most streamlined way possible.

We are truly omnichannel in the fact that we have stores as part of the customer experience, so I think we are constantly looking holistically to see what the customers need from us on different devices.

Karen:

One of the things that Ethan and I sometimes hear from companies that have previously been managing a desktop site and an m-dot site is that there’s this expectation that mobile users are different, that they have different scenarios of use, that their goals are somehow different, that they’re interacting with the site or with the shopping experience in a different way. How did those conversations take place for you at Walmart around the needs of mobile users versus desktop users and how those would play out in a responsive design?

Mini:

I think that’s actually a great question in the sense that it’s something we’re still exploring. When we did go responsive, we were taking what we were calling at the time the “happy path” of just getting one-to-one parity across all the devices, and we’re always iterating and doing testing and reaching out to customers for feedback, and doing user research and everything.

We do see different behaviors for different devices, and it’s something we’re evaluating. And I think one really interesting thing with Walmart is that we are truly omnichannel in the fact that we have stores as part of the customer experience, so I think we are constantly looking holistically to see what the customers need from us on different devices and how they’re engaging at different touchpoints, because a customer in the store might actually be using their phone, which they wouldn’t be doing when they’re at home on their computer. So, it’s an interesting question that we’re always evaluating.

We wanted to test a new way of working with smaller teams and iterating quickly. And so that was the first foray into responsive design.

Ethan:

I’d love to hear a little bit about how you approach scoping responsive projects. Specifically, now that you’ve actually gotten a couple responsive redesigns under your belt by now, has the way in which you structure these projects and schedule and plan for them changed over time?

Olawale:

Yeah, so when we first started this, we knew, just to mitigate risk and to sort of get our feet wet, that we needed to figure out how these projects would go. So, we actually engaged a consulting firm, Cloud Four, who had done a lot of these kinds of things, just to help us both figure this out but also learn together. And what we decided to do was really go with a smaller sort of site that we had, which is not the main Walmart site called Walmart Grocery, which was a pilot at the time, and was also not necessarily tied to Walmart.com in terms of infrastructure. So, it allowed us to work quickly.

And also the other thing we wanted to do was test a new way of working with smaller teams and iterating quickly. And so that was the first foray into responsive design and we learned a lot from that, and as we completed that and we moved further into the dot-com side of things, would be much larger, we broke that into smaller rollouts and took a lot of the learnings from both the way we work, the day-to-day of having to design for responsive, and brought that all together as we started to do the larger site over time.

Mini:

Yeah, and with the rollout of the larger site too, it’s been really interesting to see how different sections of the site will get rolled out, and also, again, constantly monitoring the customer engagement and making sure that everything is looking good before going to 100%.

We figured out that the best way was to have one team serve as the team that would set everybody up for success and they worked out all the “happy path” things.

Karen:

Can you talk a little bit more about how you planned and staged that rollout process? I’m always fascinated by large-scale organizations that pick and choose different sections or different URLs on which to experiment with a responsive design. How did you, from a research perspective or from a staging perspective, plan that?

Olawale:

So, one of the things we did while we were working on Walmart Grocery, which is a standalone site, is we were already thinking about how we would approach the larger dot-com, and one of the things we knew by doing Walmart Grocery is that we would engage all the people involved, we’d serve as the ambassadors to help the rest of the larger teams start to figure things out.

Once we got done with Walmart Grocery and we’d learned a lot from it, we figured out that the best way was to have one team serve as the team that would set everybody up for success and they worked out all the “happy path” things, but then once that was done, they become like the SMEs [subject matter experts] of responsive at that point, and then basically we scheduled out different parts of the site based on what made sense in terms of risk, or the teams that were working on them, the impact on the customer, and things like that.

It’s been really great too for any designers who can sit with engineers and actually be able to go over the details directly with them.

Ethan:

I’d love to hear a little bit about design process at Walmart and how that might have changed as you’ve done more multi-device work. We’ve talked to a lot of organizations who have found like even just something as low level as the applications and tools they use on a daily basis have changed dramatically now that they’ve gone responsive. Have you found that that’s the case for you and the UX team there? I mean, have you changed the way you’re actually talking about and sharing designs as they’re evolving?

Mini:

I think it has. We actually started, as a whole UX group—and it’s a large group too—have been using Sketch to do our designs, and then we have several different prototyping tools. So, at first we were using Flinto, I think we’re on InVision right now, some people have been using Axure. Or we’re using plugins, like Zeplin, to be able to work directly with the engineers and not have to do spec’ing.

It’s been really great too for any designers who can sit with engineers and actually be able to go over the details directly with them; and as a group, coming together, literally sitting in the same room or having video conferences for people who work remotely, and being able to share and just give each other feedback. As we’re exploring new patterns and people are encountering new problems, just to be able to discuss what’s working for some person and how somebody else might approach something differently and trying to figure out consistencies between all the different sections of the site.

For a lot of the designers, things have changed, they’re getting a little bit more comfortable playing with CSS in the browser and tweaking things like that as well.

Olawale:

Yeah, I think another thing that we started to do right after the Grocery site launched, during that period and afterwards, was really trying to design in the browser as well. So, we were also doing a lot of that, where we weren’t completing designs in Photoshop, we’d try to get as much as possible done and then tweak. When we worked with Cloud Four, basically the way we set up our sprints were that every week we would have these designs roll in and then we’d look at them as a group, and go back and iterate on them. And even sometimes what’d end up happening is we would back-document from the responsive demos—if you want to call them those—that we had during those sprints. And so I think even just for a lot of the designers, things have changed, they’re getting a little bit more comfortable playing with CSS in the browser and tweaking things like that as well. And also, we’re also looking at things in devices directly, so a lot of designers now are using their phones or the browser to play around.

When we’re thinking about the workload required, it’s not just the team that’s creating the images, it’s also the team that has to input everything into the system.

Ethan:

I think that’s great. And I’ve got to say, I mean this is a little “inside baseball,” but one of the reasons we were so excited to have you both on the podcast was I was lucky enough to see you both speak at Responsive Field Day in Portland, where you were talking about responsive images but at a massive, massive scale. I was wondering, if you guys were comfortable, if you wouldn’t mind just sharing some of those lessons about some of the issues you had around planning images for responsive redesign at Walmart and some of the ways you worked through that.

Mini:

Yeah, I mean I think the first thing was really just being able to understand that scale and what was actually needed, and then being on the UX side, thinking about the creative team as one of our customers. So it’s not just the shopper who will be seeing these things, it’s this internal team who needs to produce all of these things, and thinking about how that number, the number of images, could completely skyrocket if they had to create separate images for separate breakpoints, and really just trying to figure out ways to make the workload as small as possible.

And especially, too, when we’re thinking about the workload required, it’s not just the team that’s creating the images, it’s also the team that has to input everything into the system. And all those teams interconnected, it was just a massive amount of work if we didn’t streamline it on our side in the planning.

Olawale:

Yeah, it’s very interesting. I mean, like, once we started to see how basically the process of the teams would have to change based on the way we now had to do things, and so even stepping in to help them figure out how to get the images right and still be able to maintain performance at a reasonable level, things like that were just massive learning for everybody as a whole, and I think it’s changing the way we’re all working.

Even trying to document responsive, based on the way we worked before, was just a monumental task.

Karen:

Speaking of changing the way you’re all working, one of the things that comes up when Ethan and I talk to companies is the idea that having a responsive design or a responsive prototype changes the way that you collaborate with the rest of the organization, it changes the thing that people are looking at. How did working in a responsive way change the way that you might collaborate with your design team or maybe even the way you got feedback from and approvals from your stakeholders?

Olawale:

It definitely changed a bit. I think the one thing that we found was even trying to document responsive, based on the way we worked before, was just a monumental task. And in order to work quickly, at least when we were working on the Grocery site as a pilot, we found that we really value providing things for people to look at but also valuing mostly the conversations and the close collaboration, because things are changing so quickly, and to be able to learn and shift quickly was a really valuable thing.

Mini:

I think too the thing that has been fantastic from my perspective from the conversations that I’ve been a part of is the support that we have outside of UX and product and engineering, working with people in merchandising and creative, of really people talking mobile-first and what’s needed for mobile, whereas before they always would just focus on what’s needed for the desktop site. I think it’s pretty great to see how quickly people have been able to adapt to working this way.

Ethan:

You mentioned shift and learn, Olawale, which I think is a really great phrase. I’d be curious to hear, once you’ve released a responsive design, have there ever been any elements of a responsive layout that you’ve had to rework? When it’s actually been in front of customers and you start getting some data on it, in terms of how it’s performing, has there been anything you’ve had to shift or change after releasing it out into the wild? And if so, what were some of the things you learned?

Olawale:

So as Mini said, we went ahead into this with the mindset of mobile-first, and this is really great. But as we put things out there, there were a few times where we sort of, based on feedback from customers, looked at the desktop side of things to make sure that, while we were mobile-first, we didn’t lose focus on what made sense in a desktop world. So, we continue to do that, but our part is still always to start from the small form factor when we’re thinking of design.

Karen:

As you’re evaluating the responsive design work that you’ve done to date and thinking about the future, how do you evaluate the website against all of the other digital touchpoints, or the rest of your digital ecosystem? Like, for example, how do you evaluate people’s use of the responsive site if you’re thinking about in-store use or you’re thinking about people using their phone on the go?

Mini:

I’d say part of that is really relying on our user research group to really do proper thorough testing from all different types.

Olawale:

Yeah, and we do all kinds of stuff. I mean, we do things from even shop-alongs to, we’ve had customers come in… And the thing is also, like, prior to going responsive we had mobile apps as well, which had very specific contextual use within the store, so we’re constantly looking at how the responsive site is changing that or vice versa, or are the same customers using the responsive site versus the native app, and things like that.

Sometimes we saw different things when you actually looked at it on real devices. And so early on, we acquired a bunch of different devices.

Ethan:

One of the things you guys mentioned earlier, which is like catnip to me, is using devices as part of the design process. I think a lot of organizations that we speak with, even now in 2015, folks still think of a device lab as a QA tool—which it absolutely is—but it really sounds like it’s been foregrounded into your design process a little bit more. Can you talk a little bit about that, like how you’re actually using devices on a daily basis? And if you want to touch on how you QA designs, I’d love to hear a little bit about that as well.

Olawale:

Yeah, I think one thing that’s been clear to us after going through some of this is sometimes we noticed that just shifting the browser from left to right to get that small size, sometimes we saw different things when you actually looked at it on real devices. And so early on, we acquired a bunch of different devices, and so we tend to do what we call a lot more of the visual QA on our end because the designer [17:08 to 17:09] are probably a little bit more than, say, maybe the QA team does, and so the combination of the QA team and us looking at what the intent was on different devices has been great, and also learning for the team as well, in terms of shortening the cycle of iteration when we review stuff together as a larger team.

Mini:

And I think, too, just from doing hands-on design, using Sketch and Sketch Mirror and being able to connect to different devices has been amazing, just to get that instant feedback and be able to see changes, and you don’t have to know code, you can just quickly design and see your designs on a phone.

Olawale:

Yeah, I think for some of the designers who were a little bit more savvy, some of them would get excited by being able to plug in a phone and actually tweak something and take a screenshot and say, “Here, here’s the intent of what I really wanted after now that I’ve seen that you’ve coded it.” So I think that sort of freedom of being able to—even after the things been coded, being able to go back and help your devs get things right.

We’re always working to try to get things better and faster for the customer.

Ethan:

I love that. It’s this nice distinction not just between the aesthetics but also how it’s going to feel in somebody’s hand. I guess drawing out of that, one of the things that’s always impressed me about Walmart in general is how much knowledge sharing you’ve done about performance, basically like foregrounding the idea that if a website is fast, it’s going to perform better not just for your users but also for your company. Has performance still been part of the conversation in the responsive projects that you’ve worked on? And if so, I’d love to hear how generally you design for performance.

Olawale:

So, just because of the scale and the scrutiny on how the site’s doing with customers, we’re always continuously measuring. And as Mini alluded to, even when we roll out things, we start really small, maybe one/two percent and we measure, engage, and iterate and we roll out until we reach full capacity at 100%.

Mini:

Yeah, and definitely performance is something that is always being checked, and we’re always working to try to get things better and faster for the customer.

At Walmart, the customer journey is not just “shop on a phone” or “shop on a desktop,” it’s sort of this continuum.

Karen:

Let me follow up on that and say if you are always measuring, can you talk about, just broadly, how you go about measuring the success of a responsive redesign? Like, for example, one of the things that I often pick up on is that organizations, even after they move to a responsive design, they still want to evaluate success based on mobile, tablet, and desktop, and evaluate their analytics data through those lenses. How do you talk about measurement?

Olawale:

We look at all those typical things, but we also realize that at Walmart, the customer journey is not just “shop on a phone” or “shop on a desktop,” it’s sort of this continuum, and so we factor that into how we measure and think about has engagement increased or decreased based on the redesigns.

Mini:

I think too for us, we were in a really great place in terms of having separate m-dot sites. We could see the business metrics of everything that the customers were doing from an m-dot website, and so we have that at least as a benchmark of what we want to try and improve upon. So as we are rolling things out, we want to make sure that we’re never taking a hit in any measurements that are being tracked, and everything’s always just “Here’s our baseline, let’s try to improve, and how far can we improve?” and just try and make it better.

Ethan:

Well Mini, Olawale, this has been an amazing chat with both of you, I can’t thank you enough for your time. But before we properly wind things down, I just have to ask: has there been any advice that you might have that you’ve learned from your responsive redesign that you’d like to share with our listeners?

Olawale:

I would just say it doesn’t matter what scale of organization, definitely there’s going to be things you’re going to have to relearn, and I think ultimately it comes down to the people involved on the project and just making sure that everyone, as they think of how their processes would change, that what might be right for your organization is going to vary. And just go for it.

Mini:

Yeah, I would say… I mean the thing that pops into my mind is “ask questions,” you know? Communicate with one another, really share and really leverage the team of people that you have to work with to make sure that you are learning, because it’s a learning process.

And also to be able to reach out to hire experts in the field if you need help getting started, and having them really educate you, and not necessarily have them do the work for you, but really just take it as a learning opportunity and be able to see what you can learn from it, and then be able to share that knowledge back with your team.

Karen:

Well with that, let me say thank you to both of you for taking the time to talk with us today. I have been genuinely interested in the work that Walmart’s been doing over the past few years, and I look forward to seeing more of what you all are up to. So, thanks for being here.

Olawale:

Thanks for having us.

Mini:

Thank you so much.

Ethan:

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

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

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

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