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, I am excited, I am thrilled, I’m even feeling kind of sparkly. I am here today with Chrissie Webster and Linda Bustos, and we’re going to talk about Lime Crime. Welcome.

Chrissie:

Hello.

Linda:

Hi.

Karen:

So, I’d love it if you’d both introduce yourselves, tell us a little bit about your role, and maybe also tell us a bit about what Lime Crime is. Chrissie, would you like to go first?

Chrissie:

Absolutely. Thanks so much for having me on the show. I am the VP of eCommerce here at Lime Crime, the makeup brand for unicorns. I’m really excited to talk to you today about the redesign that we did in partnership with Workarea in 2016.

Linda:

And I’m Linda Bustos. So, I’m with Workarea, the eCommerce platform that powers Lime Crime, and I’m the director of merchant strategy, so I’m responsible for covering the topics, the hot trends that are going on in eCommerce. I’ve been a blogger for a little while, so I’ve been following responsive design for a long time, and obviously owe a lot to Ethan for really shaping this space.

Ethan:

I feel like I should apologize. [laughs]

Linda:

[laughs]

Karen:

[laughs] Well, we are genuinely happy to have you here. Maybe we could start out by just talking a little bit about the project as a whole, and maybe you could address the idea of were there any concerns about responsive design as a methodology? Or as you were thinking about embarking on this web project, did you have to convince anybody or explain to anybody how responsive would work?

Chrissie:

Thankfully the decision to go responsive was never really a point of contention here at Lime Crime. From the onset, our executive team understood our customer was, and is, highly mobile given their engagement with our social channels. They also understood we needed to leverage responsive technology to streamline our internal workflows for our really small team. In all, we only have one and a half bodies managing our entire eCommerce operations. So, looking ahead, executing a product launch or a home page change on two separate platforms simply would not have been sustainable for us from a workload perspective.

Linda:

Yeah, and it’s really nice to be in 2017 and have responsive design so accessible with regards to being an online retailer. So, do you remember back in like 2009-2010, when the best examples of responsive that we had was like the Boston Globe? So, it was really, really difficult to find great examples to show successful case studies of online retailers, aside from really, really large ones that had the really large budget. But now, you know, I mean it’s very table stakes to have responsive design; you can get a responsive template for free, basically, in a lot of these theme marketplaces, or for around $100, and get at least a base start rather than going out and having to hire all your own people to build it from scratch. So, that’s been a big difference, and I think it’s a lot easier for retailers across the board to make that decision.

Ethan:

That tee’s up my next question pretty nicely, I think. You mentioned how predominantly mobile your audience was, but you do have a very attractive desktop experience. So, I’d love to hear a little bit more about how Lime Crime thought about the needs of those two different audiences. Did you sort of determine that mobile users and desktop users were all trying to complete the same transactions and convert in similar ways, or do they have different needs, depending on where they are, on the site?

Chrissie:

For Lime Crime, astoundingly seventy percent of our traffic is mobile. So, I know a lot of other retailers these days are seeing mobile growing and taking up a bigger contribution of traffic. But for us from the get-go, that was our number one device type. So, getting it right on mobile was absolutely essential. So, when we embarked on this quest, if you will, to redesign our entire website, really we took a look, and as mobile users ourselves, we spent a significant amount of time during kickoff with Workarea discussing our frustrations with differing experiences on mobile and desktop. So, we made a conscious decision to allow, at a minimum, the same functionality on mobile as it exists on desktop. Really, the key difference between the two for us is when to render that functionality and that content.

To give a little bit more of a backstory there: Our data was showing us that the majority of our mobile traffic was coming from social channels. From that nugget of information, we inferred that our customer was coming to us from social because she saw a makeup look that inspired her. Therefore, our goal with mobile was to create an experience that emphasized the visual components first and help marry the experience from the social platform to our site. So when you view our mobile product detail pages, you’ll see that our product photography takes front stage. That’s then followed by your key product information, such as product name, price, color options, followed then by our user-generated content. It’s only after a fair bit of scrolling that you see our very copy-heavy product description. In contrast to mobile, we believed our desktop customer was more likely to be in research mode, if you will, and we specifically chose to surface the copy-heavy product descriptions above the fold to provide her with more information up front and allow her to get that information without scrolling as far.

Karen:

One of the things that I sometimes hear from retailers when they’re talking about addressing the needs of mobile users is that they should develop an app. Can you talk about how you thought about developing for the web, and is an app the right thing to do?

Chrissie:

At the end of the day, I really feel like an app is beneficial when there is more to the experience that a mobile website couldn’t handle, especially when it comes to loyalty programs and surfacing specific content, different functionality… And for us, we didn’t see the need to develop an app because we were able to do everything we wanted through the mobile experience and not require our users to download another thing to put on their phone or on their device.

Ethan:

Well, that makes good sense to me. Let me ask a little bit about how you started making this responsive design come to life. Specifically, I’d be curious to know how you started talking about the design and showing the design. What kinds of applications and tools were your designers using? Were they creating mock-ups traditionally like we used to, or were they using more prototypes to look at things on devices? How did that process work?

Chrissie:

Sure. So, as I mentioned, one of our largest traffic channels is social, especially Instagram. So, we have over three million followers on Instagram, and when we embarked on the design process, we drew a lot of inspiration from Instagram’s UX, knowing that our customer was familiar with it. When browsing Lime Crime’s site, you can see this influence on our product listing or category pages. We wanted to provide customers with the option to view this page as a one-by-one grid, similar to Instagram, or as a three-by grid. Also, having a sticky add-to-bag button on our mobile PDP was heavily inspired by Instagram at the time.

Now, that being said, Workarea did most of the heavy lifting on the actual designs and wireframes for us, and they were a tremendous partner because they understood our customer well enough to draw inspiration from the other digital touchpoints in our customer’s life. So as I mentioned, Instagram was a big influence, another was Tinder. So, looking to web experiences and mobile experiences that our customer was engaging with that didn’t necessarily pertain to our same business vertical was really helpful when we were putting together the designs for our new site.

Linda:

Yeah, and from the platform perspective, so our product team at Workarea has actually been doing eCommerce for over twenty years, so there was a lot of experience with kind of what the pain points are for a Chrissie, a merchandiser, a site administrator, a marketing person who wants to get stuff done on the front-end. Whether you’re doing responsive design or not, getting front-end changes, for the most part, you’ll have to map it out and then there will be some degree of design and technical support that you need to get it done. And the big pain point there, especially for small, lean, nimble teams with more of a start-up/scrappy feel, is how long is that going to take for a marketer or a merchandiser to get what you want up on the site? Is that going to have to go into some kind of IT backlog? So, that was really top of mind when the product team looked at, Okay, we’re going to rebuild a new, modern platform. What types of processes and headaches can we democratize and put back into the hands of the business users?

So, we actually built this product, it’s an eCommerce platform but it’s also a CMS, and the CMS was built as a very user-friendly way that basically makes your site responsive. So, it comes out of the box with content blocks, and if you need a content block that doesn’t exist in there, like in Lime Crime’s case we can build some to spec, but once you’ve got the content block in the admin area, then building new pages and building new experiences, from a design perspective, is like drag and drop your content blocks and arrange them how you want. So, that’s really cut out a lot of that kind of painful process. And in Lime Crime’s case, you can have the theme that you want from a design perspective, but the tool and our design and delivery team can help bridge that. So it’s just set in place, and then once it’s there, there’s no more development QA stuff that needs to go, it’s just build your experience and there it is.

Karen:

Maybe you can follow up a little bit about how some of those content decisions fed into your design process, and also the development process. So, as you’re looking at the product names, or the descriptions, or the sizes of various images, how did you plan out all of those blocks and know which pieces you needed to have?

Chrissie:

Great question. So, with Workarea’s CMS, and considering that it’s already responsive-enabled, we didn’t have to change all that much to our internal processes or the way that we were thinking about the layout or the design. Being unfettered by those sorts of operational or tactical development requirements to make a CMS responsive absolutely allowed me, as the business stakeholder, to approach design decisions with a fresh set of eyes and be able to look at our wireframes and our UX decisions in a different way, because I didn’t have to be concerned about whether we’d be able to execute and I didn’t have to be concerned about spending additional development time to make those things a reality.

Ethan:

That’s fantastic. I’d love to hear a little bit more about how you talked about support during the course of this redesign. This is something a lot of organizations struggle with. When they’ve actually made this responsive design live and breathe in a bunch of different browsers and devices, supporting those browsers and devices can be kind of challenging. How did you manage that QA process while you were working on it?

Linda:

From Workarea as a platform perspective, because we kind of give this tool to our clients and try and take as much of the decision-making and problem-solving off of their shoulders, we have two different types of QA. So, we’ve got an automated QA that will use screenshotting tools for the most common and diverse browsers and device types and user agents. We know that that’s just kind of a wild west of devices, and trends kind of change. As soon as a new device or brand or the iPhone X launches or the newest Samsung launches, it kind of changes the game all over again, especially if there’s two versions or sizes of that.

So, we need to keep up on top of that a lot, but manual is still a big part of that process. So, if we’re working with a customer in building out a new custom block or fitting their theme, getting some of that stuff supported, that is manually QA’d in the top browsers. And we use our customer’s analytics, because a Lime Crime’s customer base and their device usage might be very, very different than some of our customers that are selling vaccines to farmers, and the farmer is maybe using an older smartphone that may be not as feature-rich or have very different specs than the latest iPhone. So, we kind of take it on a client-by-client basis, but also definitely get that manual QA to just preview it on a real device end-to-end, just to make sure everything is working.

Karen:

One of the reasons I love talking to retailers is that you often have very specific ways of measuring how well the site is performing. Can you talk about how you measure success and what sort of data and metrics you might look at to know if this redesign is working for you?

Chrissie:

The KPIs we keep a really close eye on include average page load time, bounce rate, and average session duration. So for us, if our page load times and bounce rates are low, while our average session length is growing, we know we’re doing something right. So, evaluating the redesign that we rolled out in 2016, since launch we have seen, across all three of those different KPIs, a thirty percent improvement from our efforts.

Ethan:

Well, that’s fantastic. So, this has been a wonderful chat, but before we let you go, I would just love to hear a little bit about any advice you might have for our audience. If somebody is reading this transcript or listening to this episode and they’re about to start their own responsive redesign, what’s one thing you’ve learned over the course of this process that you’d like to share with them?

Chrissie:

So, one of the things that was really critical to our success in our redesign process for Lime Crime is that we really filtered every decision through a series of criteria. For us, it fell into three buckets. It was, “Is this design intuitive? Is it helpful? Or is it magical?” Again, being the makeup brand for unicorns, we want to try to infuse magic and whimsy into a site experience in really meaningful ways. So, kind of taking each of those piece by piece, when we were going through this process, by “intuitive” we mean, “Does this design element align with how our users are already interacting with mobile experiences?” A great example of this is our hamburger menu on mobile. Our customers already know what to do with it, what the expectation of it is; it’s already very firmly established what will happen when you interact with that menu. So, that was really important to make sure that every element had an intuitive, immediately understandable response from our customer.

The second question we would ask ourselves is whether or not an element is helpful. So, looking at each piece and asking ourselves whether that element is getting in the way of the shopping experience, or is it moving the shopping process along. An example of that for us on mobile is our in-cart recommendations. Instead of cluttering up the cart with multiple recommended products, we decided to surface a single system-defined product recommendation that is both relevant and gets our users across the free shipping threshold, since we know that is really important to our customers—free shipping is life.

The last piece is, which I kind of mentioned, the secret sauce of the Lime Crime mobile experience: we ask if we can make an otherwise mundane UX element magical. Without a doubt, my favorite part of our site, both on desktop and mobile is the experience our customers get when they meet our free shipping threshold. We really wanted to build this particular feature out because we know free shipping is a really big deal for our customers, so why not make hitting that threshold extra special? Once fifty U.S. dollars is added to the bag, a unicorn takes over the screen with the messaging that says, “O-M-G, you’re getting free U.S. shipping!” It’s a really creative way to bring some whimsy to the site without obstructing the shopping path.

So, for anyone on the verge of embarking on a site redesign, I would say always ask, “Is this intuitive? Is it helpful?” and then throw in whatever that piece is that makes your brand special and filter all those decisions through that lens.

Linda:

Yeah, and I’ll add here there’s definitely an internal process that every team needs to have, and it’s important to map that out and educate your content team on the things that really impact responsive content. So, these are things like even going all the way back up to the photo shoot in the process, right? So, if you’re a brand and you’re creating assets for your home page, and banners, and these kinds of things, and taking photo shoots and taking shots, thinking about how those content assets need to scale or need to be modified to fit a smaller screen or be optimized for a smaller screen.

So, one thing that Lime Crime does really well if you check out their site is their banners flow really, really nice to mobile. We give a style guide to all of our customers that will give kind of the, you know, “These are the image sizes you need so that they scale down well for retina display, but here’s where your focal point should be, here’s best practices for text, images, buttons,” and that kind of thing. So, what I see a lot on even some of the most popular online retail sites is their banners will be looking great on desktop, but as soon as you squeeze them down for mobile, you can’t read that skinny text anymore; call-to-action buttons layer over top of the controls for the rotating banner… All these kinds of things just become so less usable, even though the site checks all the boxes for being technically responsive. So, I think that’s really important, is to not just think about what are the design and development things that you need to do, but what about the site administration, and even all the way back up into the creative process, making sure that things look good across all devices… And fuzzy images are just not okay. We’ve all got really high-end phones, or a lot of us do, and the experience just impacts your brand when images are fuzzy or aren’t working properly. So yeah, that would be my recommendation, just to make sure that the team is educated on things like that.

And also page load speed, right? You can add as much as you want to a home page or to a landing page or anything, but one of the downsides of responsive is that it’s a little bit of a performance hit compared to having an adaptive site. So, just making sure that a page load speed, when you preview it… Within Workarea, you can actually preview exactly how it would look, because we kind of cut out the whole staging process. But you can preview exactly how the page that you’re building is going to look, and test it. So, if it’s taking longer than three seconds for the perceived page load speed, or all of your basic content to load, then it’s too big and you’ll need to cut things out or optimize, or take a different approach to make sure that you stay within that sweet spot of performance.

Karen:

Well Chrissie, Linda, this has been just a delight to talk to you today. I think this is a beautiful site, it is definitely very sparkly, and I hope our listeners have enjoyed it. And if you need some unicorn makeup, now you know where to go. So, thank you.

Chrissie:

Thank you so much.

Linda:

Thank you.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near 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 podcast episode at responsivewebdesign.com.

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