Chase: Brian, thank you for joining us.
Brian: Thank you for having me.
Chase: So give us a little bit about who you are and about Nacelle.
Brian: Yeah, I've been a Shopify fan boy for the majority of my career. I actually ran a shop five-plus agency for a number of years before starting to sell. I really believe in e-commerce. I think this is a radical change in the world from traditional retail to a world of online shopping. A lot of this is of course boosted by COVID right now, with everything going on it's sort of been accelerated, maybe we're 10 years forward from where we were previously.
Brian: And I also really believe in Shopify. I think the idea that you could empower the SMB to build a really robust storefront with otherwise limited resources is brilliant. And I think what Toby did here is really commendable. When I was at my agency, I was working with stores that had started small, but then had grown up and were scaling. And one of the big problems that they started to run into as they scaled was this idea that their mobile experience shopping wasn't quite as good as the desktop experience. And because of that, conversion rates suffered, cart sizes suffered when you would compare the desktop stats to the mobile stats.
And when I started in e-commerce, I think 35, 40% mobile was about normal. And so it wasn't as big of a concern. It was notable, but not a huge concern. Now for these DTC brands that grew up on Shopify and are scaling really fast, they see 80, 85% of their traffic mobile, and so it's become a more pressing concern. And that really started my journey into figuring out, "Hey, how can we solve that problem? What can we do around it?" And very much started at my agency where we would customize the Shopify storefront to do all these things. Some ideas worked, some ideas did help the problem, some ideas didn't necessarily help the problem, but that was very much the start of my journey around e-commerce and mobile shopping and getting the customer experience right.
Chase: So we're going to dive into all things headless today. I think that intro about where e-commerce lives right now, how it's evolving over time, it goes without saying COVID's impact is trackable, but somewhat unclear on where things are going to be when the dust settles. But headless is very much a term that's been thrown around that some people don't really understand what it is, but also people kind of understand that this is the future, this is the direction we're moving towards. So give us kind of a high-level overview, what is headless commerce? And I'll give you bonus points if you don't use the word decoupling.
Brian: Decoupled, right, everything's recoupled. Yeah, so then I suppose the formal answer is there's a separation of front end components and back end components.
Chase: There you go.
Brian: Now, why is that desirable, right? Before you could even approach that question, I think you have to think about what the problems are that happen, maybe as you scale up, with a system that doesn't have this separation. So the first thing that becomes really apparent is this isn't for the SMB e-commerce brand that's getting started. This is for a brand that has a particular pain point, probably associated around latency issues, so page load speed issues, probably associated around dev workflow issues. They're not necessarily relevant for the SMB that's getting up and running, and in fact probably not needed, and in fact it probably just adds confusion to the conversation.
And this, again, just to emphasize what I said earlier, this is what I love about Shopify, right? I mean, Shopify does this so well out of the box. You don't even need to consider headless, it's not something that's going to solve an immediate problem for you. And when you cross a certain threshold and you do start to look at performance around ads, you start to look at conversion rates and you start to get really concerned around, "Hey, what's going on with our mobile traffic?" That's where you might want to start to consider the separation between a front end system and a back end system.
In the case of Shopify, Shopify becomes your back end system. You're still logging into your store every day, you make product updates in the Shopify admin, you control your collections in the Shopify admin, and your checkout is also generally done through the Shopify admin. And even apps like Recharge might be done to the Shopify admin. But the front end is separated in a way that allows you to bring new technology, and that is more focused on solving the mobile experience specifically. Now, the consequence to having that separation is that you really need a developer involved. It is a fancier stack, if you will, there's some more complexity around it. And that's why it's really only appropriate for a certain part of the market.
Chase: That's pretty clear. I think it's definitely a technical build and it's a technical force to make sure you understand all this going into it, but it's pretty clear that it's a separation of the front and the back ends, and it's very base level. How customers view your site coming in, that data, whatever decisions you're making on the front end of a site, that can plug into different back end systems, they're almost traditionally able to be hooked up and able to be transferred back and forth. Is that pretty accurate?
Brian: Yeah, that's good.
Chase: From my non-technical brain, that's a fair assessment, I would say at least. So now let's jump into this idea of progressive web apps. So where are the similarities, where are the differences? Is it entirely different? Do they work together? How does that work?
Brian: Yeah, so I would make the argument that you can have headless without a progressive web app, but you can't have a progressive web app without headless. So that's the relationship between the two. So headless is very much the infrastructure that you put in place in order to empower something like a progressive web app. And we should probably take a minute to define what that is.
Chase: Let's do it.
Brian: Both these terms, headless and progressive web apps, are probably really watered down, and the thing that adds confusion on top of already these strange terms is the fact that there's no super clear definition. To me, or to the e-commerce merchant, they should be most focused on the features of the progressive web app that make it feel more like a mobile native app. And what this means is if you have a progressive web app storefront, you get pretty darn close to this feeling of it being a mobile native app. It's very intuitive, nothing has to reload, it's very easy to scroll through and browse the product catalog, it's really easy to add things to your cart. It feels almost as if you were on Instagram or Facebook somewhere, tech companies that have spent hundreds of millions, if not billions of dollars on their mobile experience. But the brilliant thing is you don't have to download anything onto your phone in order to get that. You would just go to www.merchant.com and you would get that rich mobile experience.
Chase: So they work interchangeably, one can't exist without the other, in some circumstances. Again, I think that's pretty clear definition wise. So let's move into a couple ideal candidates. I know you kind of touched on a handful of things, maybe not for the SMB, maybe for [inaudible 00:08:11] certain kind of pain points. Dive into those pain points a bit more. So I know that speed is one of the big things that comes out of a headless build and a PWA build; how is that possible? Why does it become faster? And I mean, obviously it goes without saying, faster page loads are better, but dive into maybe why that's so important.
Brian: Yeah. I mean, I think the why behind it is that there's a very proven inverse correlation between latency and conversion rates. So essentially the faster the page load speed, the higher the conversion rate. And it might not be immediately obvious until you start to get into the psychology of a customer, a potential customer and a buyer. So let's walk through the journey. You're on your couch, you're browsing through your Instagram, and it's really easy to do. It's almost mindless. You can kind of just scroll through the feed, see some images, see what your friends are talking about. And then you scroll down and you come across a cool ad for a merchant's product. Maybe it's a pair of socks or something. And you're like, "Ah, this is interesting. I'm going to click on the ad."
And what happens in that moment is very subtle, but significant for the psychology of the buyer. They now get transported to the web browser, and in the web browser they're clicking around, they're trying to browse the product catalog, and instead of an experience where things are really seamless and just flowing, as it was in the Instagram feed, everything has to reload. Everything is a little frustrating and a little hard to use on the mobile device. And so it's subtle, it comes to the psychology of the customer, but it's so much easier to scroll through your Instagram feed than it is to navigate this store and learn about the brand and really figure out what products are relevant to this customer. And so they often end up X-ing out or kind of bouncing a few [inaudible 00:10:03], saying, "Hey, that's a cool brand. I'll check it out later when I have more time," even though you're just sitting on the couch with nothing to do.
Chase: And then you never do.
Brian: Exactly, yeah. And of course, you're sitting on your couch, you're not doing anything anyway, right? You're on Instagram. But so that's kind of the psychology that you're up against. And I do think a progressive web app, what it does is after that initial page load, you don't have to load ever again in that buying experience until you get to the checkout. And that's really significant, because again, there's not as much of a gap, there's not as much of a discovery deterrent when you get into the store, transferring over from, say, a Facebook or Instagram,
Chase: So are we linking this back to the front end part here? You're flipping through Instagram, you open that site, it's still quick, it's still fast, and you can, to use my own word, you can decouple that front end Instagram experience, poking around the website, from your back end. So you don't have to worry about all that back end page load stuff, it's just going to load, it's just going to work right in front of your face.
Brian: Yeah. And I mean, this is slightly more technical, but I'll keep it high level. If you think about the infrastructure of the web, we've had the same response for many years, it's been you go to a webpage, your computer generates this HTML magically on your screen, but it's sending out a request to a server somewhere. The server has to do all these calculations and all this work, and it sends the response back. And what a well done progressive web app lets you do is basically pre-generate the response from the server before you even hit the website as the customer. And that's really the radical change, and that's where you're getting a lot of the speed and the power.
Chase: So I did some physiology through college, but it's like a reflex, essentially. So instead of having input into your body and having your brain figure out and think about what's going on, it just hits, your spinal cord reacts right away, and you have this reflex. So it's a much faster experience. Never thought I'd translate a spinal cord to an e-commerce solution, so that's plus one for me, I'm excited about that one.
Cool. So I think speed is pretty clear, let's talk about design a little bit. How is design able to be shifted and manipulated and create a better user experience?
Brian: I love this. I'm going to start with the point of view of the designer, the UI/UX e-commerce designer. I think the traditional monolithic e-commerce platforms never did a great job of being able to break things out into components. Now I will say, again, just a head nod to Shopify here, the liquid snippets speaks to this and starts to get into this. There is a system called Storybook that Nacelle integrates with, and it actually gives designers and developers a better interface to communicate with each other. So you kind of build these components of your front end, like, I don't know, say a shopping cart or something in Storybook, and the designer can actually go in and turn certain knobs on that component and change the design, or figure out what's mutable within the design and what works and what doesn't. And it's based on components instead of the whole page, which means the designer could then roll this out to other experiences. And it's just a whole framework for communicating between the developer and the designer in a way that's really special.
So that's in the development process. Now, once the store goes live, the other nice thing is Nacelle, our version of headless, pairs in a content management system like Contentful, for example. And what this lets you do as a merchant is you can now drag and drop to create pages, you could build landing pages on the fly, and you can manipulate the front end in preview mode and then hit publish all without a developer getting involved. And so I think that's a really big deal. It's not how sections works on the homepage, Contentful kind of lets you drag and drop and move things around on every route or every page of your store.
Again, to Shopify's point, I think they'll eventually roll sections out on all pages, but I love the idea also that you could publish content for the future. You don't have to stay up until one or two o'clock in the morning because there's a new drop or a new release, you can actually just schedule the date and write it in and then hit publish and your headless CMS will take care of the lifting of deploying it on time.
Chase: So that's how you kind of build the back end, all that design stuff makes perfect sense. What does that mean for the customer? So when they're walking through this page, we talked about speed, I think that's pretty clear, that everything's just going to move faster, it's going to load on the spot instead of having to ping the server; how does the customer experience really grow from that?
Brian: Yeah. Yeah. Again, back to the psychology, my brain has been ... the pump has been primed and everything's instant as I scroll through. And so as I navigate a PDP or product listing page, I can start to get information out of it that's just more congruent because I'm not having to reload from site to site. I think this is another problem. There's a lot of patterns that we've had in e-commerce, like on a product listing page you have this whole notion of a quick buy where you'll see a product and you'll click on it and a modal pops up. So it prevents a reload and a modal pops up. And it only has a limited amount of information about the product. It's like, "Hey, pick your size and your color and then hit Add to Cart." And that's really great because it's increased conversion rates and average order values, but I always felt like the merchandising team felt disconnected from the customer in those transactions where, "Hey, we built this whole really robust product detail page to tell the story about this particular product that the customer's interested in, and by having this quick bi-modal, aren't we losing some of that? Aren't we losing a lot of this rich content that we've spent so much time and money creating for our customer to speak to our customer?"
And so if you think about the idea of a progressive web app, that's a bit of an anti-pattern. Not that you can't have a quick buy, you most certainly can, but why not just send the customer to the PDP page? There's no drag and load speed, it loads in 20 milliseconds, 30 milliseconds. And so now I can add this thing to my cart, this product to my cart, but I can also read about all the rich content associated with this product and really, as the customer, really start to consume that content that they've created, that ideally is right for who I am as a buyer and as a customer.
Chase: You don't necessarily need to have the company's life story on the product page to get you to ... you know, "Here's why our product is so great." You don't need to understand it was built from this type of products and exported from this type of region, and here's all these things. You can just pop around on the website and all that stuff exists on its own in its natural place. But it's still as fast as something like this kind of modal pop up.
Brian: Yeah. And actually you bring up a good point. I think because there's a nice separation between content and product on the back end, but on the front end these two notions are sort of blended together, you can have things like a blog where maybe a blog is talking about a certain product. And actually some of our mutual merchants, Chase, have this feature, where you can add right to the cart from a blog. So you could be reading about a blog, you could be consuming maybe a podcast or a video, and they start to talk about a certain product and you can actually just add it right to your cart from a blog, you don't have to get transferred or moved around or something like that. So it really does enhance the customer buying journey in a lot of different ways. And at the same time, from the marketer's point of view, you're able to inject branding, if you will. You're able to really show the value proposition and speak directly to your customer in a way that maybe was rushed before in a mobile experience.
Chase: And unless you're watching on YouTube, you can't see me, but I'm smiling throughout this because you say from a marketer's perspective you can add in branding, you can control that customer experience to an extent, you want to show, "Here's the awesome content that we've written, but also here's how it relates to an actual product that we sell." All of that stuff is wrapped into one clean, concise user experience. And you can check out essentially from a blog, which is unheard of. And again, I'm still smiling because that's something that's ridiculous that you'd never have thought of before before this headless thing is possible. So, super powerful, really, really cool.
Right on cue actually, talking about a blog, talking about how you can check out using audio or something like that, omni-channel is one of those buzz words that everyone's talking about now. Your store has to be omni-channel, you have to be everywhere. It kind of goes without saying that that's the point of headless, you can disconnect all that stuff and have every channel pull into one back end, but why is that benefit so massive? I would argue that's potentially the biggest benefit of all of them.
Brian: Yeah. I think as you grow into a brand, I think your customer wants to interact with your brand in different ways. Maybe it's Alexa or Google Home, maybe it is a mobile app, maybe it's an ad that they see somewhere. And so the ability to merge content and commerce in different forms is really important. Different mediums is really the right word. But it's a little hard to do this and approach this if you don't have that separation between the front end and the back end, like we originally discussed, because in systems where the front end and the back end is together, coupled, the back end assumes that the front end is a certain medium already. And so when you don't make that assumption and when those two things are separated, it opens up the world for different mediums, like buying with voice or something like this.
Brian: I think another area to look at is the content management system. There's these well-known CMSs now that have differentiated themselves from WordPress and from Drupal by calling themselves headless. I think Contentful is certainly one to look at, as is Sanity. I think this new one called Strappy is doing some really interesting work as well. And they've really become the central hub of an organization's content, not just for their e-commerce store, but also for everything like internal documents or for different employee messages, and even something as simple as your footer in an email that you send out with your logo on it and your picture on it. That's all being managed by these headless CMSs. And so isn't it so nice that you could pair that also with your e-commerce data and your content and there's all one central hub, but it could live through very different mediums and very different channels. I think that's really important. And as COVID accelerates, everything that's going on in e-commerce, I think that's going to be a really important trend that brands that are growing quickly need to keep their eye on.
Chase: I would totally agree. I think there's a lot to take in there. That would be a spot in this podcast where I would take a break and go back a little bit and listen to the last couple of minutes and hear that again. But that's kind of the point, in my mind, of this whole omni-channel thing, is that you are allowed to be everywhere, everyone wants to be everywhere. Something like a headless stack will allow you to actually be everywhere. And there's really no limit on where you can be. We talked in this podcast earlier with Aaron Quinn about voice commerce, about ordering through these digital home things that I can't say out loud because the one next to me is going to ask me what question I want, but you get into this arena of, "How can I order things through that?" And it's a realistic possibility and that's exciting.
Brian: Yeah. If omni-channel was the buzzword that presented the idea, headless is the buzzword that executes it.
Chase: That's very, very well said. Yeah. So let's get into your actual headless stack. So when you're building this thing, like you mentioned, you can't just do this straight from a WordPress site or straight from Shopify. So go ahead and talk through coming to your headless stack and why each of them plays a critical role.
Brian: Yeah. And actually let me ... so I think there was this assumption that was made that when I started this journey into headless three years ago, it wasn't really headless in our world yet, but now it's called headless, the idea of being able to use Shopify headlessly, it was attractive to me because the API, I thought, could give me everything I needed to execute something like this.
And generally speaking, you can use the Shopify API to do this without a third-party system to help manage it, and I think there are even some case studies still on Shopify's headless page that talks about some of the work we had done in our agency. And we had merchants who were getting 65% increase in conversion rate. By the way, for anyone listening, that's not the norm. Actually most of our case studies now are plus 20, plus 25% increase in conversion rate. But for this particular merchant it was plus 65, and we had done some other ones that were in that range. The problem is, as an agency, so our merchants were doing well, as an agency we were not doing so well. It wasn't profitable, and it wasn't profitable because we had to build so much stuff on the back end to supplement Shopify for this sort of new world of headless that it just wasn't feasible or profitable for really anyone involved. If the merchant had to pay for that cost, I think they probably would've opted out of doing it because it just would've been too expensive to actually offer a positive ROI.
And so what Nacelle does is it's supplemental to your Shopify instance. It sits in parallel, if you will, to Shopify. It pulls in data from Shopify, it pulls in data from maybe Contentful or the headless CMS that you choose, and then it sends all that down in one stream of data to your front end that you choose to build. And that's really the value of Nacelle.
The other value of Nacelle is we take care of a lot of integrations. So we build and also manage a number of integrations. I think another great thing about Shopify is the ability to add third party apps really easily. You go to the app store and you hit a button and it's done. Well, because there's a separation of the front end and the back end in headless, you lose that ability to just go to the app store and hit add an app, and that's really a bummer. So at Nacelle we're very focused on essentially giving that functionality back to the merchant. We have something like 34, 35 now, official packages that actually integrate with Nacelle out of the box. And yeah, we can run through a stack now, an example might be Shopify Plus, you're pairing that with Contentful for your CMS. And I think one of the first things that always comes up is, "Well, what are you using for your email service provider?" Klaviyo's a really popular one. So we have an out of the box integration with Klaviyo that takes all of a minute or two to get up and running.
It goes beyond just the form. So certainly it adds a form and the footer that you could fill out, but another important aspect about Klaviyo is the ability to send data back to Klaviyo so that you could use their interface to segment your customers, and from there you can send more strategic emails out at different times to different customer groups. I think that's a very important aspect of Klaviyo, and out of the box, our integration covers that. So that's a good start.
I really like what Attentive is doing with SMS. I'm really intrigued by SMS, especially since I'm big on mobile. I find Attentive to be really well done. And this is another one where we have an out of the box integration, you can just wire up Attentive in all of a minute or two, and you get the popups that they've created for you and the ability to collect SMS numbers. And then the other side, it's just wonderful to be able to send SMS campaigns to your customer base and then have them land on a mobile optimized experience, like a PWA. There's some real synergy there and some great benefits.
And then of course Recharge. So we do have a good ... never heard of those guys, but we do have a great out of the box integration with them. I think what's really important is the idea that there's complexity around the checkout, we have to route to a different checkout when there's a subscription item in the cart. So it intelligently detects, "Okay, is there a subscription item? Okay, great, let's redirect this to Recharge's checkout." But it also emphasizes things like subscribe and save, and that works out of the box. So you'll go in and you'll set up everything in Shopify, then you'll set up your rules in Recharge, and when you're done with that, Nacelle will actually read from both of those services to determine what needs to get shown on the front end in terms of subscribe and save. And then when the customer goes to checkout, it automatically uses the Recharge checkout API suite to execute that checkout.
Chase: So there was a ton to take in there, and that was a lot of really, really good theoretical examples of how things may work. Let's get into an actual example. So I know a merchant that both Recharge and Nacelle work with is Ballsy. So give us a little bit about Ballsy and then maybe walk through from a customer perspective what the value of this is. So how do they get into this? How do they tell that it's a headless build? And how does that benefit them in the long run before they checkout?
Brian: Yeah, I think the interesting thing about a good customer experience is that the customer doesn't think about it. The customer only thinks about it when it's a really bad customer experience, right? So I think what's really important is the flow. For Ballsy, they're a men's skincare brand, very brilliant tongue in cheek marketing. If you don't know the brand, definitely check it out. And they do a really good job, they're also great people over there. If you don't know Adam and Brock, they're just awesome people.
So yeah, the customer might come to the site and I think probably the first thing they want to do is just consume some of the content, because it's so amusing and memorable and remarkable in and of itself. And at Ballsy they have something called the Ball-scription, where you can click and browse and find a product that's relevant to you. Right on the Balls-scription collection it tells you, "Hey, if you subscribe and save, you'll save this amount." And so, me as a customer, I can click on that. I go into the product detail page and I'm hit with some more interesting tidbits of funniness, if you will. And then I'm interested in this, so I could select my variant, so there's a couple of different sizes to choose from, and I could add it to my cart, and I hit checkout. And when I hit checkout, I do get redirected to the Recharge checkout, and that's where I'm able to put my credit card in and proceed with my subscription buy. And it's quite seamless. In fact, we have a video that compares, maybe in the show notes or something we could add it, but it compares and contrasts the before and after from the customer point of view, and it's quite remarkable. So I'll send that your way.
Chase: We can certainly put that in the notes here, and I've seen it, it's awesome to see the similarities and differences of what you would expect from a normal checkout versus some sort of a headless build. But Brian, you said it right at the top there, that a good customer experience, customers won't be able to tell what's going on there, they just want a good experience. And it's a psychology thing, you don't think about it until it's terrible. So effectively the checkout is still normal, the whole process is still normal, but you can land on a blog, you can land on a product page, you can land on any kind of social media, anything, link it back to wherever you're trying to go, hit a product page, experience some of this content, pull it all together, send it through a checkout, have it go into a back end processing system. The customer's none the wiser, but for them it's faster, it's more efficient, you can gather data better, ABC, all of the above.
Brian: Yeah. Yeah. And I also think for the customer it's ... like it's funny, because we're in e-commerce, but my girlfriend and I are generally frustrated e-commerce shoppers. And it's always so nice when a new build goes up and I'm able to show it to my girlfriend and be like, "Hey, what do you think of this?" She's like, "Oh yeah, I checked out." And I never get the complaint like, "Oh, that was so frustrating," but with every other store, maybe even Amazon included, it's like, "Oh, this is so frustrating." So I think that's really the problem that it solves. If you don't hear the complaint from the customer, that's what we want to get to. And if you're able to portray some of your branding and show that you can speak to this particular niche of the market, that's what's most important to the DTC brand.
Chase: It's an odd way of calculating success; as long as there's no complaints, then we're okay. But it's true, it's what it comes down to.
Brian: Yeah. And I think the KPIs of conversion rates and AOV show themselves.
Chase: Definitely.
Brian: Like Ballsy, they increased their conversion rate by 28% after implementing Nacelle, and it was a pixel/pixel change, there were no radical design edits or anything like that. So I do think it ends up showing in more ways than maybe just customer tickets coming in, I think the KPIs to focus on are really conversion rate and average order value.
Chase: Right. So, wrapping this up here a bit, a lot of talk about headless, a lot of pros here, a lot of things that people may see and think, "That's perfect for me." We touched a little bit up front about that this is really only good for a handful of selective merchants. If you're a small SMB, it's not really going to work. Where are some other examples that this may not work very well? Not to dissuade you from going to headless, but more to caution you that this is a specialized system, this is not something for everybody.
Brian: Yeah. Look, I think if you have an extremely wide product catalog, to the tune of a hundred thousand products and up, maybe you might not want to statically generate everything. So that's a more dynamic system and probably a more traditional system might be right for you. I don't know how many stores are out there with that product catalog size in the Shopify realm, I suspect there's only a small handful of them, but I do think they're another one to kind of ... you know, if they go the headless route, fine, if they go the stack regenerate PWA, that's really fast, that's probably the trade-off there. You probably can't get as much performance.
Chase: Got you. Very clear. Last question for you, something we ask everybody, every guest we have on here; what are some physical subscription products that you subscribe to?
Brian: Okay. So my new obsession, this is such an easy one, my new obsession is Bite. Do you know Bite?
Chase: The toothpaste?
Brian: Yeah. So Bite is super cool, I'm obsessed with it. I got it to try it, and it's funny because I got it and I tried it right around the time COVID really started to happen, I committed to wearing a mask. You really don't want to eat a lunch sandwich and then wear your mask, right? So I find myself brushing my teeth all the time, and I find myself grabbing the Bite jar because it's just so convenient and so easy and it makes it really easy to do. And I did notice that the brand recently released a mouthwash, which I'm definitely going to try. So that is hands down my favorite physical subscription right now.
Chase: And it relates perfectly back to a customer experience. To see what's going on in the world, you develop a new product and you release it right on time.
Brian: Love it, it's brilliant.
Chase: Brian, thank you for joining us. Appreciate you coming on.
Brian: Yeah. Thank you, Chase. Appreciate it.