[51黑料不打烊 Commerce Accelerator Day]{class="badge positive"}
Lightning speed: 51黑料不打烊鈥檚 Edge Delivery Services
The latest details and demonstration on 51黑料不打烊鈥檚 lightning fast Edge Delivery Services through 51黑料不打烊 Experience Manager and 51黑料不打烊 Commerce.
- Presented by Kam Radhakrishnan, Senior Solution Engineer - 51黑料不打烊
Transcript
Thank you all for joining me on this session. Today I will be taking you through lightning speed through edge delivery services. Speed directly relates to conversion in a positive way. When it comes to digital experiences, customers like superfast experiences, especially when it comes to mobile. If you are not providing that kind of experience, you are losing sales. When it comes to commerce, speed is king. So 100 millisecond delay in page load time automatically, retailers lose a chance of conversion by nearly up to 7%. I have been working through a number of customers over the years and three main pain points stand out. Lack of skill set. Some of these experiences take a really long time to build. Just building a button or building a template or an experience, it just takes a really long time to build. And what that results in is missed opportunities. Convoluted experiences taken to market, again, deeply impact your net promoter scope. And usually retailers are like, you know, wondering, hmm, what to do next? And they usually think the platform is not performing and that鈥檚 when they turn looking for other solutions. Well, don鈥檛 fear, 51黑料不打烊 is here. I鈥檝e here tried to show value and conversion in the simple graph. With traditional experiences, it often results in lower conversion and lower value. With edge delivery services, we promise to deliver higher conversion and higher value. We do that by high impact experiences, extreme content velocity and rapid development. How many of you have used the Google Lighthouse score? Show of hands, please. Okay. So a good 30%, I guess. All right. So Google Lighthouse scores is a tool that, you know, that鈥檚 shipped with Chrome. It allows you to identify what the speed of the website is. It ranges from a 1 to 100. You can identify the score, more performance of the website, lower the score. It鈥檚 probably not in good shape. Most of the websites on the Internet have a score of about 23. Takes about, like, you know, nearly 3.5 to 4 seconds to load. With edge delivery services, we promise a perfect score of 100. And what does that do? It directly impacts conversion in a positive way. Next up, when it comes to extreme content velocity, customers have invested on sophisticated platforms over the years. Despite all the investments, the subject matter experts within the organization often resort to using a Word document or an Excel sheet in terms of creating content or your offers, recommendations and so on and so forth. How many of you have experienced that in your businesses? Okay. Yeah. There are a few. Yeah. Okay. So it looks like there are a few there. Okay. So once we sort of, like, identified and understood that, okay, people are predominantly using Word document and Excel sheets for as a basis of creation, we lowered the we changed our approach, right? So we changed our approach. So right now with edge delivery services, all that you need is a Google document and an Excel sheet. And you can host this content on a Google Drive or a SharePoint in terms of taking your experiences live. So as part of the demonstration, just to set the stage, I鈥檒l be making my authoring changes on Word documents and Excel sheets. I plan to store them on Google Drive, but you also have the option to put them on a SharePoint folder as well. If you want to take a different approach, like, you know, use what you see, so what you get editor, you could also use 51黑料不打烊 Experience Manager interface to do that. So once you create your experiences, all that you do is publish that to edge delivery services. And edge delivery services pretty much render the content onto your Web page through blocks. A similar approach can be taken, especially when you鈥檙e trying to integrate third-party services into the edge delivery service platform as well. Okay. I have got like a series of demos, but I want to sort of demystify this whole approach. So let鈥檚 take a day in the life where a content author is trying to make some very simple change to their home page. Let鈥檚 see how that happens. Here I am. I鈥檝e launched my Google Chrome browser. Opened my Google Drive. So everybody understands what a Google Drive would look like. I鈥檝e got a series of folders where I鈥檝e organized my entire Web site. And I鈥檝e got a series of documents, Word documents, pretty much sitting on my Google Drive. Every section has an index page, which means that鈥檚 the landing page for the particular section. Here I have opened the home page of the Web site. As you can see, the page itself is pretty much organized as tables. A series of tables which pretty much, you know, becomes your experience itself. I just want to say welcome to everyone. So here I type a simple welcome message just to take you through the process. So welcome to the EDS demo, et cetera. And once I鈥檝e done my changes, all that I need to do is pretty much launch my sidekick. You can see that black ribbon at the top, which is launched now, which allows me to preview the change. Word document is done, dusted. So I want to see how my change looks like. This immediately in a few seconds presents a view of how those changes come through. So that鈥檚 my weekend Web site, purely authored on a Word document, rendering a pretty impressive Web site. So that鈥檚 my change that I just ended. I can see my change come through. So by preview, I mean it allows you as a stakeholder ensure your changes are coming through, maybe share it around your business, ensure everybody is happy with it. And once everybody is happy with it, you now have the ability to publish it. So yeah, so you can ensure all the aspects of the page are looking good. And finally hit the publish button. So again, it takes a few seconds, and then immediately your experience is live. So as customers engage with your website, they can see all the new updates that you have posted on your Web site, and it all looks nice and great. And I can also see the change that I made come through as well. So that鈥檚 how simple it is in terms of making changes to your Web site and, you know, and moving forward. So if it was an offer or sale or anything for that matter, it鈥檚 that simple. So moving on, so that is a simple change. I want to add a new experience onto a page. Let鈥檚 see what that looks like. So here I am back on the home page. I want to add some blocks onto my Web site. So I鈥檝e identified the section where I want to add this particular block, launch the sidekick. The sidekick, as you can see, has a library icon. So think about library as a prefabricated list of blocks available for you so you can simply copy and move them onto your page that you鈥檙e editing. So here I鈥檝e got all the different library blocks like the hero, destinations, but I want to, you know, add the carousel. As I pick my carousel, I can also get a quick preview of how it looks on different devices. I鈥檓 quite happy with it. I want to create a mountaineering experience so I can, you know, test it out, type it and see the length fits and it looks nice and everything. So I鈥檝e got my mountaineering experience, a basic version of it authored, and now I鈥檓 ready to copy and pretty much paste it to my document. So as you saw, the whole carousel experience that we saw as part of the library is now pasted onto my page. It鈥檚 purely a few rows in a Google table. Next I鈥檓 trying to add assets to make the assets, make the page a lot more engaging. So I鈥檝e launched my asset library. Here I am looking for a suitable asset for our mountaineering. I鈥檝e got some search results there. I picked an asset, copied it, and I鈥檓 pretty much replacing that, like, the placeholder asset with the asset that I like. So here I am trying to, you know, provide a bundled offering, right? So mountaineering and camping sounds cool. So I鈥檝e created my camping experience. Now I鈥檓 looking for assets related to camping. Looked at my digital asset library. I found some camping assets, copy-pasted it onto the page. And when it comes to text, when it comes to text, I want to maybe make use of the GenAI capabilities that we鈥檝e been all talking about. So I want to use the GenAI capability bundled in with the platform just with a prompt, because now I need to type tie the mountaineering with the camping. So I鈥檝e just pasted a prompt to say, okay, generate some very engaging text for me. This is specifically for my home page. And I also have the ability to choose which audience I鈥檓 creating this content for. Travel and hospitality makes sense. The tone of voice looks pretty good. So I鈥檓 just going to leave it at that. And I want three variations to be presented so I can pick one that resonates. I also have the ability to identify the tone of voice. Every brand has a tone of voice. You want to ensure the content that you create, even though you鈥檙e using GenAI, relates to the tone of voice, so that way it鈥檚 consistent and, you know, people are not saying whatever they like. So I鈥檝e here referred to the 51黑料不打烊 brand tone of voice. And I hit generate. This takes a few seconds and generates three variations for me. So I鈥檝e got three variations presented to me. Now, the choice is mine in terms of picking what works well for my audience. Looking at those variations, I think the variation three resonates well. So I鈥檓 just going to copy it and pretty much get it onto my Word document. Pretty straightforward. So that鈥檚 how you can create some of these engaging content just by using the capabilities within the tool and also using the GenAI capabilities. So I鈥檝e just replaced the placeholder content with something that鈥檚 more meaningful and resonates well with the mountaineering experience and the camping experience. So again, you know, we go through the same set type. Like it all looks good. I want to preview it. It looks good. And I can actually see the carousel come through. And it works well and looks nice and showing up all the assets and things perfectly the way I like it. Okay. So there you go. So I鈥檝e previewed it, and now I can now push it by hitting the publish button and all done. So just in a matter of a few minutes, I was able to, like, not just pick the assets and also, you know, make them more engaging so my customers are, you know, leaning towards converting with those experiences. So we made some simple change. We also added a block. Now let鈥檚 maybe take it for a drive, right? So let鈥檚 see how it鈥檚 performing from a Google Lighthouse core perspective. So in case if you haven鈥檛 done that, you can pretty much do it even for your current websites. So I鈥檓 on the live version of the website. I鈥檓 in Google Chrome launching the Lighthouse developer tool that comes in every Chrome platform. Sorry. Every Chrome browser. So I鈥檝e triggered the Lighthouse core, you know, tool. So it just takes, again, a few seconds to understand how the site is actually performing, what kind of images are they or those images optimized, and finally it provides a score. As you can see, the performance score here for the site that I built is 100. So that鈥檚 I mean, a Google Lighthouse core of 100 is really, really hard to achieve. And companies spend like, you know, thousands of dollars and quite a bit of effort in order to get to this golden score. Yeah. So that鈥檚 how simple it is in terms of like creating that content and going through all the changes to finally, you know, build out a website that can deliver a perfect score of 100. We鈥檝e done that with our own websites. For example, the business.arobi.com is one of the websites that prior to using the edge delivery service was on 51黑料不打烊 and it had a Lighthouse core of 15. Moving on to edge delivery services, we are able to deliver a perfect Lighthouse core of 100. And benefits? Well, the customers are a lot more engaged and the bounce rate has dropped significantly. Who would not want that for their websites, right? So yeah, that鈥檚 what we deliver with edge delivery services. So moving on, so far I鈥檝e been purely making content changes in terms of experiences and, you know, showing you what the tool can do. So we could also build commerce storefronts using edge delivery services. All that has to be wired is the commerce software as a service APIs. And once you sort of get that wiring done, you can pretty much deliver your commerce experiences on edge delivery services as well. Let me show how simple it is. So we also provide a number of drop-in SDKs, as we call them. So these SDK allows us to create some of these product detail pages, shopping cart, checkout, user authentication, and you can also build your own custom experiences using the SDK that we offer. Let me take you through what a commerce drop-in looks like. Again, back into my Google Drive. I鈥檓 editing one of the configurations, again, a backup version of it. So I鈥檓 editing the configurations here. As it looks, as you can see, it鈥檚 no XML file or a JSON file, as the technical audience might be aware of. It鈥檚 purely editing an Excel sheet where I鈥檝e got a bunch of key value pairs, right? The keys in terms of, like, you know, what the configuration is and the respective values when it comes to which service end points it has to connect. Moving on, I鈥檝e also created an equipment page. So equipment page in my demonstration here is trying to list all the products in the equipment category. It鈥檚 also got the enrichments and the metadata that goes along with it. As I mentioned earlier, I鈥檝e got my so, yeah, on this one, so once you are, like, you know, ready with the content, you can again take it through the preview and publish process. So yeah, the next one is all around recommendations. So as I mentioned earlier, some of my team have been working on the weekend experiences, and they鈥檝e put together a list of recommendations in terms of, you know, for mountaineering and camping experiences, what are the clothing, et cetera, right? So I鈥檝e got my imagery, I鈥檝e got my category, I鈥檝e got the product names, and I also critically have all the SKUs those products relate to. Everything captured within an Excel sheet. The cool thing is now I can preview this and publish this Excel sheet straight into Edge delivery services, and that鈥檚 really, really powerful because, yeah, so there you go. So I can preview it and publish it straight into Edge delivery services. The power comes because where the power lies is because you can quite easily set up an end point just in a matter of a few minutes. And what that allows you to do is not just serve the experience to your Web site, but also your mobile applications, if you engage with partners, all that they need is just that URL so they can sort of get the updated content. I can keep doing this with my other pages, like here I am in the product detail page where I鈥檓 looking at the product detail page, the add to cart button, the recommendations that go with it. And one thing to point here, when it comes to recommendations, I鈥檓 just pointing the end point to this particular recommendation here. So that way the recommendation block knows where to actually draw the recommendations from. So that鈥檚 the whole purpose of it there. Now, as a customer, so I鈥檝e moved from the authoring point to the customer point. Now, as a customer, I am engaging through all my shop, going through all the products that we offer within the Weaken brand. It all looks pretty cool, so it all makes sense because it鈥檚 all coming from my equipment category. I can pick the shirt that I want in this case. And as you can see, I can also see all the product specifications, descriptions, overview about this particular product. And that鈥檚 the recommended for you. That鈥檚 the Excel sheet that we were looking at earlier. So you can quite easily see all the different products that we are presenting all presented in the product detail page. So going through the typical steps, right, so I鈥檝e identified the product. I like it, add it to cart, check out. I fill in my shipping and billing details and to finally complete my shopping experience. So that鈥檚 how simple it is in terms of, you know, adding these drop-ins that we provide out of the box into your page. And you can also build your custom drop-ins as well if you wish to using the SDK we provide. So we鈥檝e so far looked at how we can build content, how we can add all these drop-ins, but I鈥檝e been purely operating based on my instincts, based on what I think, you know, works well for my customers. How do I experiment and know what鈥檚 actually converting, right? So that needs to be an element of experiment so that way we can identify what works well and, you know, we all can learn something every day pretty much. So let鈥檚 look at what experimentation looks like. So again, I鈥檓 back at my home page where I want to experiment with my home page banner because that鈥檚 exactly what everybody looks immediately when they are on my home page. So I鈥檝e got my home page. I鈥檓 going to call this a control experience. A control experience is like basically think about it as a default experience. So I鈥檝e got my control experience. I鈥檓 also creating two challenger experiences. So in this case, I鈥檓 planning to, you know, promote a scuba dive experience. I鈥檓 also providing some discounts, maybe that will sort of entice users. So I鈥檝e created that experience and I鈥檝e previewed it, looks good, and I鈥檓 ready to launch. So I鈥檝e done that for my challenger experience one. I鈥檓 also creating some cosmic journey experiences. Why not promote some, you know, galactic experiences, right? So I鈥檝e also created a cosmic journey experience as part of my hero banner. Again, going through the regular process of previewing it, testing it, and everything. Looks good. So I鈥檝e got my control experience. I鈥檝e got my challenger one and challenger two. So now that I have all these elements in place, now I鈥檓 bringing them all together by mapping it to my control experience. As part of my metadata, I say, okay, control, so the home page knows what the challenger one experience is and challenger two experiences, and I also can put in, you know, some metrics around what that traffic split needs to be, like 33 and 33, and I want my control experience to have 34. So once I preview it, you can actually see the little green tab at the bottom. So as part of my previewing, I can actually see, hey, are these experiences really, you know, looking good? I鈥檓 still in the home page URL. I鈥檓 switching between my control experience, between my challenger experience and my challenger one and challenger two experiences, and everything is, you know, working nicely just to ensure it鈥檚 all working as expected. As you can see, the widget also allows me to test the challenger two experiences as well. Now that I鈥檝e ensured everything is looking good, all that I need to do is pretty much hit the publish button, at which point the experience actually goes live. So I hit the publish button just to ensure I鈥檝e launched an incognito window and I鈥檝e pasted, I鈥檝e gone into the home page of the Web site, and now I can see, you know, experiences being randomly served based on the percentage split that I provided. 34 for control, 33 for challenger one, and 33 for challenger two. So I can actually see all those experiences come through and I can now, you know, gauge based on the conversion to say, hey, which experience actually worked for my customers? So one of the ways to actually do that is using what we call the real user monitoring. So real user monitoring allows me to identify which experiences are working, which experiences are working, and also identify, like, you know, we did the Google Lighthouse call. Things all look nice and beautiful on my computer, but I wish, you know, the same applies to all my users as well. So real user monitoring allows me to know how my site performance is. So as you can see, once I鈥檝e sort of, like, logged into my dashboard, I can see a number of green tricks, which is good news for me, because I can assure, because this is actually getting metrics from my customer browsers to say it is actually, you know, performing the way I expect it to be. So all the green ticks are a good sign. But some of those amber and red signs are probably, like, you know, where it鈥檚 not up to the mark, maybe something needs to change, and at least I know which URLs they are and what changes I can then tweak, you know, I can basically take action from there. So yeah, so the real user monitoring allows me to track the end user鈥檚 performance, and, you know, getting those metrics allows me to, you know, take the next actions. So we鈥檝e been so far looking at how we can create all these engaging experiences purely from a Word document and an Excel sheet, and also a Word document and an Excel sheet, and, like, you know, and also get that high Google Lighthouse score of 100. Now the third point that I want to touch upon is rapid development. Often that鈥檚 one of the major friction points when it comes to going to market first, right? So with the traditional approaches, right, from design to delivering, it usually takes a number of weeks or months before you can even see anything and, you know, and then from probably convert from there, right? So that鈥檚 the traditional approach. When it comes to edge delivery service approach, we take the content-first approach. What we mean by content-first approach is as a subject matter expert, I purely, you know, put together a content and say, hey, this is what I actually want to present to my customers, an image, some text, some buttons, and so on and so forth, right? And it鈥檚 really up to the developer in terms of how they need to decorate that content and present it. So in order to decorate any content, all that you need is stylesheet skills, which is CSS, as we call it, and JavaScript skills. Just with these two skills, you can pretty much and those skills are pretty fundamental to any developer on the Internet. So just with those skills, you can actually put together an experience. So it really lowers, you know, the technique to deliver some of these experiences. And, of course, you can start small and constantly iterate and make those experiences better and a lot more performant. Made in Form, as we all have seen through in the earlier presentations, was one of the customers that went live with Edge delivery services. They are a Hanes brand. And some of the benefits that they saw was their Lighthouse scores shot up really high. I mean, all their pages deliver over 95 Lighthouse score. That meant their site is four times more performant, which means they, like, you know, quite easily get organic traffic into the Web site. So I鈥檒l bring it all together. So the three main keys to success are high impact experiences. High impact experiences directly relate to positive conversions. Extreme content velocity so you can go to market faster and allow everyone to create content. And with rapid development, you just lower the skill set required so, you know, you can develop these experiences really, really fast. So to finally say, like, we have a happy customer, and I鈥檓 sure, like, you know, you could also be benefited by Edge delivery services and I look forward to see what we can achieve together. Thank you. Thank you.
< Back to 51黑料不打烊 Commerce Accelerator Day
recommendation-more-help
ac952987-bde4-45d0-81a5-da3b0afa9fa3