EP045 Crafting Unique Omnichannel Experiences with Magento and React
===

[00:00:00] today I want to talk to you about seamless omni channel experiences. And this is kind of our roadmap of what we're going to talk about today. So, basically as you all know very well, as we've talked about omni channel, For so many years in our industry, customers have evolving and demanding, expectations now and retailers really have to keep up.

[00:00:28] so that was a challenge that was facing one of our clients and, at the same time, they also needed to replace their order management system. So we said this is pure Omni channel here and a lot of fun. So we combined Adobe Commerce Cloud, Magento multi source inventory, and a custom React app. to craft a tailored omni channel system.

[00:00:49] And that's the solution we built out. And then I'm going to talk a little bit about the results that the client saw. and I think I need to actually update this slide. This client's been growing very rapidly. but the client is family farm and home. at the time we started, they had about 65 stores.

[00:01:06] they're getting closer to 100 stores now, I believe. they are, as you can imagine from the name, a, farm and home retailer, and their stores are across five different Midwestern states here in the U. S. like I said, they needed to replace their order management system, and they basically decided that after looking at all the different off the shelf options, they didn't really find an order management system that would meet their omnichannel needs.

[00:01:33] so we went through all their requirements with the web process and we said, you know what, we don't think you need an order management system. We think that your existing Magento platform really is all you need with a little bit of React magic on top. And so, not only would this provide a better experience for customers and store employees, this was a lot more affordable than purchasing an off the shelf order management system.

[00:01:59] and this is the part that I am most excited about in my Magento Association role. So, we actually took Adobe Commerce Cloud that y'all are all familiar with, I'm sure. If not, there's Adobe Sales Reps right outside this room that'll talk to you about it. and then the power for Adobe Commerce Cloud there was that basically this client didn't have a very large IT team, didn't want to have to worry about managing and scaling servers.

[00:02:23] And so, that's where Adobe Commerce Cloud came in. And then we took, Magento multi source inventory, and that is actually what drove the, inventory and sourcing logic that might normally be in an order of management system. And we combined the two. And what's exciting to me about that is if you've been to any of the talks yesterday about the Magento Association, about the community, about the future, you kind of...

[00:02:47] Where does Magento and the Association of Adobe fit together? I'm just excited because Magento Multisource Inventory is a community open source effort. All right. None of the mics like me today. so yeah, it's a community open source effort. so it was built by the community, contributed to the Magento open source product, and then built into Adobe Commerce Cloud.

[00:03:13] So it, it combines basically the best of what the community can do with the Adobe product. And I think that's a good road map going forward. And then I'll get off my association, soap box. But that's a good road map going forward, for how Adobe and the community and the open source community can interact at VLI.

[00:03:31] So, this is complicated and hard to read probably. my slides will be available to download, but this is... The whole project, this is how we built the whole system, how we all talk to each other. We're going to talk about some of these pieces in more detail. some of it, such as the ERP, we won't get into because no one wants to talk about Epicor Eagle.

[00:03:54] If you have ever worked with it, you know that that's a talk in and of itself, and it's a talk that no one would necessarily want to attend. yeah, it really, comes down to using Adobe Commerce or Magento 2 as kind of the core of the whole project. Integrating in with the React app, which is what we called Harvester.

[00:04:15] There was a pre existing middleware we had written to connect the Magento. And then ShipStation was a big part of this project as well. and going into a little more detail on that, so the middleware, which we called Meadow, everything on this project has some sort of farming, Word or a tagline to it.

[00:04:33] So meadow was the middleware, and it bridged between Magento and Eagle ERP. And the really cool thing about that is when we were building the react app and building the omni channel experience, we didn't have to worry about how the ERP worked. we didn't have to worry about, Kind of any of that communication, we'd already built it out through Magento.

[00:04:55] so it really simplified the project. so I already mentioned Eagle ERP. That was the source of truth for inventory pricing and, basically all the in store processes. So this is also what powers their point of sale system for this merchant. and then we use ship station to process the ship to home orders.

[00:05:13] so we didn't have to build out a whole custom shipping, pricing, all that stuff. again, one of the reasons this project came together so well is because, we had already done the integration work as part of the Adobe Commerce build between the ERP and, Magento.

[00:05:32] And then we also already had the ship station integration since that's just a module you can install. So the real custom work, came through Harvester, the React app. so the React app is where a lot of the real fun custom work came in, into play. and so we called it Harvester, again, keeping that farming theme. so it communicated directly with Adobe Commerce, and it's actually the front end that all the store employees see. So the store employees never have to log in to Adobe Commerce, they don't have to know Magento, they don't have to use Magento.

[00:06:06] We were able to build a very custom, easy to use interface through React. it streamlined the process of picking up the in store. Pick up orders. So basically when the store associates go and actually pick the orders and then when the customers come in to collect them. and again, I already mentioned how we kind of already done so much of this work in the initial Adobe Commerce build.

[00:06:29] So the ERP integration was already taken care of. This is basically what it looks like. What harvester the react app does. So you can see, do I have, I think I have, ah, ha, ha, laser. so this arrow here, that kind of goes off screen because it's a very large diagram. This is where the customer interaction comes in.

[00:06:50] So the customer places an order, and it gets sent out to Harvester. Each store has their own unique login to the React app, so they can log in and see the orders they need to process for their store. And then there's just kind of your typical store pickup workflow here, where, depending on the status of the order, it can be marked as picked, it can be marked as collected, or it can be cancelled if for some reason the customer cancels it, the customer doesn't come pick it up.

[00:07:18] And this is what it looks like. And again, we wanted to keep the interface simple. we wanted to keep it easy to use. So if you've used Magento before, this interface probably looks pretty familiar. Kind of stuck to the same, user experience. And again, stores are such a fast paced, busy environment. We wanted to keep it really simple.

[00:07:40] So they literally have... Two buttons. That's it. They either decline it, saying, hey, I couldn't find this item, the item was broken, there was some problem, or I have picked this item, prepared it for the customer to come pick it up. Once that is done, and it's a little hard to see with this projector, but we color code the items to green or red, basically saying, hey, This one's already been picked up.

[00:08:06] This one was declined because it was out of stock. This one was declined because the customer canceled it. Again, just trying to keep it really lightweight and simple so that when the store associate's super busy, someone calls or comes by the customer service desk and wants to know the status of their order, they can pull it up and see it at a glance.

[00:08:21] So, results wise, it really, simplified order picking. And it simplified the process for the store associates. The previous order management system, being kind of an off the shelf system, was designed for any and every retailer. This system, by building it out in React, making it custom, it was designed just for family, farm, and home.

[00:08:43] So we're able to meet their needs without having any extra functionality, any extra screens that might slow the stores down. So, really increased the operational efficiency. Actually sped up the customer pickup process, made it a little more customer friendly. And then another piece is because of the way we architected all of this, they can actually very easily go in and say, okay, this product on our website is going to be available for, store pickup only.

[00:09:10] Or this product is going to be available to ship to home, or even this product is not available, for purchase at all, and it's a view only product. and really looking at this project, one of the, the big things, That we learned it was a good opportunity to kind of re evaluate omni channel experiences and design a better omni channel experience.

[00:09:33] and so there's three takeaways I wanted to share from that. The first is personalization. Again, personalization is the new omni channel. It's the buzzword that everybody's talking about. There's lots of systems that will do personalization for you. What I see go wrong with omni channel personalization is the personalization systems don't always account for the customer's local store.

[00:09:54] So they're going to show you, let's say that you bought a blue shirt. They're going to show you, Hey, here's other blue shirts you might like, or here's some shorts that might coordinate with your shirt. Well, if that, if you're someone that always orders from the same store, always picks up from the same store and the blue shirt's out of stock at your store, that's actually just going to frustrate you.

[00:10:14] So what you want to do is you want your personalization to take into account, we know this user always shops from this particular local store, only show them products that are available currently in that store. and it's a, it's such a small thing, but so few of those systems are actually thinking about that or doing it.

[00:10:31] Next thing, and this is a question that we get a lot from people that are considering, an omnichannel deployment, is do you separate out store pickup from home delivery at checkout? So do you have two separate processes, two separate workflows? I know a lot of places have a combined workflow now, and that's what we recommend.

[00:10:50] The one that I really like, probably because I buy too much technology, is Best Buy. And so if you purchase from BestBuy. com, literally every line in your cart, you can have a different store you're picking it up from, a different delivery method, a different ship to address. And it can get complicated fast, but that gives the customer the ability to do whatever they want.

[00:11:11] They can literally just decide per item, this is exactly how I want to receive it. and then kind of the last thing is just making sure that you're providing, the opportunity to choose their delivery method, whether it's, store pickup or ship to home or both. And this is where, another partner of ours that has been, very helpful in this area is Shipper HQ and even getting to the ability of being able to see, okay, you can order this for store pickup.

[00:11:40] And pick it up today, or you can order it for ship to home and through all the magic of shipper HQ, we can tell you this is the date you're most likely to receive it. So it gives the customer more information to decide. Do I really want to drive to that store? Or Hey, if this is something that UPS can have to me tomorrow for.

[00:11:58] cheap, would I rather do that? And, that's been interesting. One of the things we've seen with Omnichannel, post pandemic or wherever we are now is that people that used to drive maybe 10 miles to go to a store. They only want to drive two or three miles like that. We have all gotten kind of lazy and homebodies in a way.

[00:12:18] And so, if you don't have a store that is within two or three miles, all of a sudden now those customers that used to do store pickup may actually want ship to home. And if you're able to show them through something like shipper HQ, Hey. No, you're not going to get it today, but we can literally get it to you tomorrow via ship to home.

[00:12:36] that can help you keep that omni channel customer.

[00:12:39] So I'm going to get on my soapbox for a little bit. So among other things and all the other things I do, somehow I find time to podcast and We have a podcast called Commerce Today and it, we try to live up to the name, we try to keep it very pragmatic and things that you can apply to your e commerce business today, not for future things.

[00:13:00] I kind of rant sometimes about some of the trends in the industry and how people are talking about these things that, The average merchant can't afford or that the technology actually doesn't exist for yet. and so this was one where I felt like, by focusing on requirements and not buzzwords, we gave the client a lot better result.

[00:13:18] So, we didn't sit out there and say, we didn't even say we want a React app. We didn't say we want a Headless app. We just said, what are your requirements? What do you need and what is the most cost effective way to get there? And so we ended up building a headless system like this is a headless system.

[00:13:35] It follows composable commerce. all those cool buzzwords, but that wasn't the goal. And that's not even what the client cares about. That's not what emergent needs. results are what you need. And so this system, is awesome and it was really fun to build. And I think our team loved being able to work on a react project.

[00:13:54] But again, we didn't set out saying we're going to build a react app. We set out saying what's the best omni channel experience we can deliver. And that's honestly, that distinction is what allowed us to flex. And instead, I mean, we were very close to implementing on a off the shelf order management system and then we said, no way.

[00:14:12] We've gotten these requirements down to such a simple base that Adobe Commerce and Magento Multi Source Inventory already do 95 percent of this. So why go out, pay for another service, have another integration, do all these things when you're that close and can just add a little bit of React to it to fix it, or to finish it.

[00:14:31] So, yeah, we got a much higher ROI. it's been a great system. It's actually... for those of you that have worked with or deployed Omnichannel into a store, you know that when a store associate walks up to you and wants to talk to you about the website. You tense up a little bit. typically, you don't get a lot of positive feedback.

[00:14:53] you're changing their lives. You're changing how their job works. Nobody likes change. we have actually gotten a ton of positive feedback on this, and the stores have actually come to us through our, our contacts at Family Farm and Home and basically said, Hey, you actually made my job easier. I can serve our customers better, by building the system.

[00:15:13] They noticed, like a marked improvement in the customer service they were able to deliver. We're Simply because instead of it being that off the shelf system that was designed for all retailers, it's a custom system just for them. So that is pretty much I wanted to leave time for questions. that link will take you to a link tree where you can actually already download the slides.

[00:15:37] you can also find the podcast, LinkedIn, Twitter links. I do, you'll notice the, the underline there on some platforms, you have to find me as Joshua S. Warren instead of Joshua Warren. So you may just want to scan the QR code to make sure you get it right, simply because the other Joshua Warren is a very interesting guy that will tell you all about things you can buy from him that will help you manifest more money in your life.

[00:16:04] So, that's not me. if it's not talking about e commerce. You're probably on the wrong profile. I don't have a side hustle selling, money making machines. so yeah, with that, do we have any questions? I'll try to talk loud, So, can you tell me when you hear a React app and buzzwords and things like that, you think, this is so expensive, I can't afford this. So can you tell me a little bit, like, from a level of effort for both implementation, but then also a maintenance team? Mm-Hmm. because now we've got something custom versus, you know, off the shelf.

[00:16:39] Yeah. So it was a great question basically about. With a React app, what's the level of effort? And what's the, support required for that? Is it super expensive, basically? And the interesting thing, especially in the Magento world is that typically React development we're finding is less expensive than Magento front end development.

[00:17:00] and so that actually made this a lower level of effort than you would think. with React being kind of the hot technology right now, there's a lot of people that, a lot of developers that know it, that want to work on it. it's a bigger talent pool, honestly, than say Magento front end developers.

[00:17:18] And then as far as support, the way these systems were designed, there's actually not a lot of moving parts on the React side, so, if something needs to be updated with, say, how the ERP works, that's actually already done through the Adobe Commerce integration, so it keeps the, the support costs very low.

[00:17:37] Oh, you have a question already? It's on, I'll just see. No, no, we, you have a React app now separately and an Adobe Commerce cloud, I assume, with their own hosting. So you, then you have to basically have to have a separate server for all those React, infrastructure and management separately.

[00:17:56] Because I don't think Adobe Cloud allows you to host the React inside their cloud, right? All right. So very, very smart. Someone that has obviously worked with some Adobe Commerce Cloud projects. Basically the point was, the question was, you know, where does the React app live? Because you can't host React in Adobe Commerce Cloud.

[00:18:15] That is true. so we actually, we did one of the very first big Omni channel projects that was on adobe commerce cloud. And we realized then that you don't want to put this stuff on a Adobe commerce cloud that you want your core commerce experience on commerce cloud and you want your omni channel stuff living somewhere else.

[00:18:34] So in our case we actually have a. Hosting company we worked with really closely that they spun up and manage the infrastructure for both the middleware and the react app. So it does add kind of a separate contract, a separate relationship you have to have. but I think it's worth it because if you build all of this or try to build all this into your commerce cloud instance.

[00:18:54] And your ERP starts slowing down. Or suddenly it's Black Friday and there's a ton of people in your stores using the POS, using the system, then that can negatively impact your pure play online experience. So that's why we, we wanted to separate them anyway, but it's true that you have to separate them if you're on Commerce Cloud.

[00:19:11] It's a bit adjacent to my online pickup and store, but I'm just wondering. Do all the orders, are there phone orders? Do those flow through the Jinto? I speak from painful experience trying to create an ERP and having the dashboard screen to work on when you're at a call center or at the store.

[00:19:34] Yeah, so the question basically was what about phone orders? Where do those flow through? Because if they flow through the ERP that can be very painful and it can be for sure. So, we are in the process now of actually moving every special order process, every process into, they either purchase it on the website, or a store associate uses the React app to walk them through it.

[00:19:56] And so one of the things I didn't mention is thanks to it being a React app the way it's built, it obviously works really well on mobile devices and tablets. In Family Farm and Home's case, all their associates already had a store kind of, It's almost like a phablet. It's not quite full tablet size. So customer comes up to them, has a question about their order.

[00:20:14] They can actually pull up harvester right there, walk them through it. And so so we haven't done the credit card swiping yet. So basically in that case we're directing them and basically saying, Hey, we want you to do it on the website. And if they say, I don't want to do it on the website, the store associate actually, Goes to the website on the tablet, walks them through the process, punches in their credit card number, but not to the level of swiping yet.

[00:20:44] So, 100 percent of anything other than a normal checkout, like if you go to the store and you pick up an item off the shelf, go to the cash register, that still runs through the ERP, because that's what powers their POS. But everything else is going through Adobe.

[00:21:01] Great questions.

[00:21:02] On the React side you're processing, payments, heat and credit cards, in storage sounds like. So for that, if someone's actually doing something that requires a payment, they are actually flipping out of the React app and just going to the normal Adobe Commerce front end. We're looking at possibly doing that through React, but we haven't had the need to yet.

[00:21:22] This client, something I didn't mention, is we took a very phased approach. They didn't want to just do it all at once, which was A lot nicer and easier for our team than when we've done it all at once. So next year, there we go. Yeah, yeah, hopefully I'll be back on the stage next year telling you even more about what we've done.

[00:21:45] and if you do have questions and you don't catch me today, and definitely Reach out to me on LinkedIn, Twitter. even if you just have a general e commerce question, I'm always also looking for topics for the podcast. So, all right. I think that's about time. So thank y'all very much.

[00:22:02]