Headless for Commerce and PWA Studio

Please welcome to your screens, Bethan Williams-James. Hi everyone. Thank you for joining this Skill Builder session this morning. My name is Bethan. I am a solution consultant here at Adobe specialising in Adobe Commerce. And for the next 45 minutes, we are going to be looking at how Adobe Commerce is continuing and improving its support for headless implementation with a particular focus on our PWA studio. If you have any questions as we are going through, please pop them in the chat and we will endeavour to get back to you ASAP. We may also have some time at the end for some questions. So don’t be afraid to pop things in the chat and we can have a discussion. So for those of you who perhaps are fairly new to the idea of headless commerce. What is it? Now, some of you may already know, in which case that’s absolutely fine. But some of you might not. So what is it? Essentially, headless commerce is the technical separation of the front end experience, also known as the head, from the rest of the commerce application. So by decoupling these things, the user experience essentially from the back end tooling, you ensure that you have all of your business logic in the right place and you have an element of flexibility to then build whatever kind of head you want. So a lot of businesses will have just one shopfront, so to speak, or one head. But there are obviously growing needs as businesses digitalise all of their commerce journeys to have lots of different heads. And this is why understanding headless commerce, understanding what Adobe Commerce does to support that will really help you innovate and think about what is in your future for your business. So Adobe Commerce is a fully headless platform. It has a decoupled architecture that essentially allows you all of the commerce services and data via GraphQL API layer. So all of those features and functionalities that are available can then be leveraged through that GraphQL API layer onto whatever front end you may have. This essentially allows you to develop your user interface independently from Adobe Commerce. And you can essentially have more agile, quick to market new touch points with emerging technologies. So, you know, you see more often now when you go into store and you’re shopping tablets and things that you can interact with. And, you know, it may be that you’ve got an application. It may be all sorts of things that are providing an additional head, but you’re having all of the commerce functionality in one back end platform. So we kind of started to delve into this, but there are lots of different types of heads. And these are three examples. You can have progressive web applications, experience driven architecture, which essentially is a CMS or building a completely custom head. For example, if you were building a native iOS or Android app, you may need that to be completely custom. But you can also integrate, as I was saying, within store screens and technologies or even provide experiences for customers like customer portals. This is especially relevant within the B2B industry, providing that portal type experience for the customer, depending on who they are, where they are shopping from or what kind of profile they have with you. So the focus for today is going to be on progressive web apps or PWAs, as we will refer to them. And the reason that we are focusing on this today is because if you weren’t already aware, Adobe Commerce has what we call PWA studio. Now, we will be getting into what that is and what it provides. But before we do that, let’s cover off what PWAs are. So what is it? Is it a website? Is it an app? Well, the answer is kind of a combination of the both. Essentially, they are websites that operate similarly to a native app like the ones you would download and have on your phone. But they are delivered directly through the mobile browser. So how I like to describe it is you’re getting an app like experience, but you are shopping in your mobile browser. So you get almost a best of both worlds, the kind of app like capabilities. And we’ll talk about what some of those are shortly. But you also get the reach and the accessibility of the web rather than an app store, for example. So continuing this, we’ve obviously discussed they operate very similarly to a native app and delivered directly through the mobile browser. They actually use the same code across multiple devices. This actually reduces the need for device specific development efforts like you would have if you were developing an app for iOS and Android. And this app like experience obviously offers not only kind of ease of creation, not meaning to be. It doesn’t have to be device specific, but it also offers fast performance without needing to get your app on the app store and engage in customers to download it and make room for it. How many times have you downloaded an app and then you forget you have it and you go on the website anyway? I do that all the time when I’m shopping, at least probably the only the only app I don’t do that with is Amazon. But that’s that’s it. All the others, I just still go on the websites. And so even though it’s delivered through the mobile browser, unlike a traditional responsive website that is essentially just taking your site layout and rendering it for the device, PWA is actually leverage smartphone functionality. So these are the things that you typically only see in native apps, things like geolocation, camera access, push notifications, things like that. And in addition, PWA can also support delivering some parts of the experience in low bandwidth and offline situations. So this can be really particularly useful for customers who are perhaps looking for a way, you know, if you’ve got, for example, a B2B business and you have delivery drivers out or you have various workmen or contractors that are out in in the field and they’re moving in and out of areas with poor data coverage. Or if you’re supporting markets, developing markets where internet connectivity is is not always reliable. What PWA is allow you to do is to kind of have something in between of that offline or low bandwidth situation and see a browser experience which allows you really very little at all. As it just won’t just won’t load. But really excitingly, case studies are also showing that PWAs deliver higher engagement than responsive websites and higher adoption than native apps. Now, this is hardly surprising. Adoption for a native app is getting a customer to do several more steps than just typing in a address in their URL bar. But responsive websites maybe don’t have that look and feel and touch that we are used to with apps or that we get used to or have gotten used to with the apps. So why consider a PWA? Well, we started to touch on it just there, but actually we ourselves gathered some data around smartphone usage back in 2020 using Adobe Analytics. And while smartphones provided over 50 percent of the traffic to retailer websites, they were actually only making up for about 40 percent of the sales. However, we have seen this trend growing and that change in behavior is said to contribute by September of this year to the behaviors around smartphone usage, contributing from more than 50 percent of online spend. So going from 40 percent to 50 percent in two years or over 50 percent in two years. So essentially the adoption of smartphones, the interconnectivity we are beginning to have with our phones and our whole lives. They’re no longer just communication devices. They’re tools that we use to check how much electricity we’ve used for that month. Or booking an online doctor’s appointment or, you know, it’s it’s it’s the smartphone adoption is is a lot more so than. Yeah, just just some new thing to communicate with. But also the creation of more smartphones available at more affordable prices in various markets has also meant that. Essentially, the use of smartphones is taking precedent. I don’t think any of what I’m saying should surprise any of us here today. If any of you’ve got that notification that tells you how much time you spend on your phone each week, then, yeah, you will you will know. But essentially, how do we then. Consider implementing a PWA with Adobe Commerce. Well, because of all this data, because of the prevalence of these in the market, we built a suite of tools to essentially help you with that. Now, some of you may already be familiar with these tools. But to give you a little context, when it came to creating PWA studio, we didn’t mess around. We collaborated with Google from the early days of PWA, along with our strong developer community to build the studio. We talked about how PWA’s marry the convenience and familiarity of websites access through a browser with the performance and engaging functionality of a native app. And part of this is enabled by the fact that a PWA is a headless storefront decoupled from the commerce backend. So it is one of those headless implementations that we we were speaking about at the beginning. And with PWA studio, merchants can build high performing, reliable, cost effective PWAs on top of their Adobe Commerce, existing Adobe Commerce platform to deliver best in class web experience, both on mobile and desktop. So what you’re doing is really catering for both of those from your one platform. As time goes on, as I said near the beginning, we expect that headless will take over the coupled storefront as the default option, be it through PWAs, be it through having a CMS integrated such as AEM. Essentially, though, when we look at the architecture that you’ve got on screen now and those core services, Adobe Commerce core services are in the middle and how this is working is our rest APIs are handling back office integrations. But now the Adobe Commerce page builder CMS tool is actually able to extend into the PWA studio via our GraphQL API layer. So what that means is business users can continue working with those native Adobe Commerce tools page builder in this instance to drive that mobile and desktop shopping experience. While reaping the benefits of a headless deployment. So, you know, for you and your team, your team who already know page builder, if that’s what you’re using today, your team are already used to the WYSIWYG drag and drop page builder. They don’t have to learn any new skills because you are using that existing page builder module in order to serve up that PWA experience. Essentially, with PWA studio, we are offering a best in class headless commerce platform and a first party preferred head with PWA studio. This naturally accelerates your time to market. It lowers your total cost of ownership. You don’t need to get necessarily another third party in and it helps future proof your investment. So you are able to leverage very quickly and easily based on your existing Adobe Commerce store and app like experience without having to invest in large amounts of development to create a native app.

You probably have all been using PWAs without even realizing it. I know that when I shop on websites now and a lot of them are PWAs and you don’t even notice because you’re just so used to the app experience. And. But really, what what what are those key benefits? Well, first of all, performance and your building storefronts that are optimized for performance. So you’re using those tools and those frameworks that are designed for a mobile first experience. As we said, it’s not just re rendering and making it responsive. It’s actually giving it a mobile first design that is based on that experience. So, you know, examples of this where you will go to a website on your mobile browser and actually you will have a toolbar at the bottom that will have your individual, you know, a button for your account. This is something that we are very used to as an app experience, having this kind of toolbar at the top or the bottom, which doesn’t usually exist on necessarily a responsive mobile site. Additionally, we’re able to create immersive and engaging web experience. So we’re talking about those native app best practices. So being able to look at geolocation and say to your customer, you know, the nearest store to you has stock of this. Being able to push notifications to your customer and say, you know, we have a discount on and really reminding them of that. But also you are able to with our newest release of 2.4.4, we are now able to personalise all of those experiences. And I’m sure you’ve all heard this a million times, but personalisation is key. So really performance, personalisation and then finally, lower development cost. I’ve said this already, but the PWA studio essentially takes all the hard work that you’ve already done in building an Adobe commerce store and allows you to use all the same tools to push a app like experience on the front end. And it’s going to make it quicker to market. And it’s going to unify your storefront to a single application. So you’re going to be able to manage that head fairly seamlessly without interrupting, as I said, much of your team’s existing processes. So. Where does this fit in? And. More broadly, shall we say, to kind of other strategies and trends that we’re seeing out in the market? Well. We are seeing more than ever a growing trend for those seeking what is called composable commerce. For those of you who are not familiar with this term, this is a current market trend where independent microservices can be called upon to deliver specific experiences or features. In effect, a PWA would act in a similar way. And essentially what we at Adobe Commerce are really kind of focusing on is introducing more SaaS based services with new features as part of our key upgrade strategy. So for those of you who are just on the upgrade session around two point four point four, you will have already heard me say this, but we have new features and we are really focusing on this composable commerce. And how does that play in with PWA studio? Well, what it shows you is that our API first strategy and methodology is here to stay. And it’s actually it’s part of our heritage to have open and robust, rich API is. But it’s really a part of our core future as well. We will be having more of these decoupled SaaS based microservices. And as you can see on screen now, how that PWA studio fits in to your overall Adobe experience, if you are a customer that has multiple Adobe products, is that that API first nature, that composability is going to allow you to use our products in conjunction with each other, in connection with each other and leverage headless as one of those services or decoupled elements. What this obviously allows you to do is just have more control over what the customer experience is on the front end. And as I said before, you might have you might might be considering new touch points and some good case studies are coming up. Shortly. But I think it’s it’s always good to talk about potentials for PWA. How does this fit into your business? OK, well, you can develop a PWA that is for your B2C customers and deploy that. And that would be a very simple, simple project, so to speak. But for B2B customers, PWA is providing a real insight into how you can you can provide an app like experience to perhaps distributors or anybody who’s coming in to kind of distribute your product. I was mentioning earlier that idea of a man in a van who is going around the country. He needs something to integrate with if you are perhaps in an industry or in a in a company that needs support like that. But also that install customer touch point that could be a PWA. You might want an iPad on the wall. You see it all the time now, even at McDonald’s, their whole screens are essentially ginormous apps. So. What accolades do we have? It would be remiss of me to not mention our current accolades from Gartner and Forrester. Really. Bond to this trend and how we are continuing to invest, as I said, in this API first headless commerce future. We have been very lucky to get these these accolades and probably even more exciting are the numbers around our customers. So classic slide with lots of logos on. But you can see here where we have had adoption for PWA studio and Venier, which is essentially a theme for the PWA studio. So we developed not only the tools and the services to provide you, but also we have a theme that you can use out of the box. So you’re not having to develop a custom theme as well. But you can see here we’ve got six hundred and fifty plus stores using PWA studio and fifty plus known extensions and themes. So that means extensions and themes in the marketplace that you can add to PWA studio to enhance. And we have two thousand nine hundred plus Adobe members in our PWA community. That is the community that is dedicated to developing and pushing PWA strategy forward. And we’ve also had a huge number of contributions from the open source market as well. And you can see on the logos there, we’ve got a lot of big names there and we’ve got a lot of names across lots of different industries. And that’s because PWAs aren’t just for retailers. And a really good example of where, you know, they’ve they’ve been good with retailers, but also moving towards Cellco are considering this for B2B as well. They we just released, as I said before, B2B support for PWA. So I see this I see this use case coming up more and more that we’re going to be dealing with B2B PWAs a lot. But talking about Cellco specifically, for those of you who don’t know, Cellco Builders Warehouse, it has sixty eight branch locations and sells over fifteen thousand building materials and tools to contractors and tradespeople in the UK. So seven years ago, they moved from a WordPress site that couldn’t actually process any transactions at all to Adobe Commerce. So they were going from zero to one hundred. But not only that, but they really wanted to digitise their sector and gain competitive advantage. They wanted to make the lives of tradespeople, the man in the van that we were just talking about easier. And this is where, you know, they were thinking, OK, well, what if my man in a van is in the middle of the countryside and can’t get signal? And how can we make that digital? How can we make that easier for him? And by making it easier, naturally, you obviously engage that customer more and get more transactions. So you can see they upgraded to a PWA site on Adobe Commerce and they deliver that fast performing site to contractors working from job sites on their smartphones. They have had a plus ninety four percent in transactions, plus eighty two percent in revenue and plus three hundred percent in performance. Now. Obviously, those numbers are amazing, and I think it goes to show that this is not necessarily just a trend for B2C, but it also is really allowing businesses such as Cellco who operate on a more B2B level, that functionality. Now, it’s also where some of those numbers, they they upgraded PWA in late 2019. So it’s worth saying that, you know, getting those numbers, I think these these this data was taken in 2020, so it was probably only about a year. The TCO and the ROI on that is is looking pretty good, too. But let’s let’s have another look at another example. Elemis, for those who are not aware, Elemis is a skincare brand and so does fit into that B2C market, although they also do have spas and some parts of the business that are that are B2B. But essentially, they wanted to again disrupt the market, the beauty market and take a really digital technology forward approach. That’s because as a brand, they are kind of very the products are very scientific and they they work very hard on the branding to ensure that the products they’re creating are cutting edge and using the best technologies. So they wanted the website and the experience for the customer to represent that, too. And you can see here, this is just for B2C, but this is where they have had 137 percent increase in mobile transactions since they implemented a PWA site. And the mobile conversion rates up 85 percent so we can really start to see. Some of those numbers in action and really start to see and understand the impact that progressive web apps are having across the market. Now, we have plenty more examples of of this in action, and I would encourage you all to visit the Experience League page where there are examples of this and our customer case studies pages. Where there are additional examples of this, I encourage you to go to the LMS site, for example, and use their PWA and see. See how you feel it’s working, but. More and more of our customers are getting in touch with us to say this is what we want. This is this is what we. Need for our next step and the fact that we are committing to that API first services approach with GraphQL and API support across all of the features. You know, we’ve really, really ramped up that availability with the 2.4 point four upgrade, so I really highly recommend if this is something that you were looking into that you consider the upgrade first, because especially in the B2B area, there is a huge amount of additional functionality that is now available for headless and PWAs. Now I have come to the end of my content. Do we have any questions, Craig? Hi Beth, thanks for that. We do have a question and I guess this is, I guess, more around the performance. So if we look at a PWA versus a native experience and Paul Mcgee had a question around whether we had, I know you just reference some some stats there for Selco and Elemis, focusing on the uplift, which is which is great. But if we do, we have anything around the comparison between a native versus PWA performance wise that you think we can share? Or do you think those those customer case studies that you mentioned would include something like that as well? Yes, I am almost certain we have some performance metrics as well. And I don’t have any to hand, but I will absolutely follow up with that and provide you with that. Essentially, it’s not only the performance metrics, I suppose, around versus a native app, but it’s also the adoption. And that adoption piece is is probably the key part. As I said earlier, I know the amount of times, especially because I shop online a lot. Guilty as charged. I know that I download a lot of apps for fashion brands, let’s say, but forget that I’ve done that and actually just go on their website and shop with them on there. And the adoption of PWAs versus the native apps is significant. I think we did have some figures around that within the presentation, if I can find them. Yeah, there weren’t some specifics, but I’m sure I can find them. It’s a higher adoption, essentially. So there is a performance piece for sure. And obviously there’s a. Sometimes it’s it’s more difficult to get someone to go and download the app and search for it or find it in the app store, or you pay for it to get boosted in the app store or whatever it is. Or you might have to incentivise app downloads with discount codes and so on and so forth. These are all things that you see customers, we see customers doing who have native apps. And don’t get me wrong, there is obviously a lot of benefit to native apps as well. But I think the the PWA provides businesses with a essentially a really strong mobile experience. If that customer is not able to download an app, they don’t have enough memory. They maybe don’t have the opportunity to download an app because it’s, you know, a pull on the data that they’ve got left. There are lots of reasons why adoption of apps. And I’m probably telling you things you already know. But we will absolutely follow up with that. That was a really good question. And I can I can get some stats on that and follow up with Paul. Thanks, Beth. And I guess it’s just providing more context around, I guess, the baseline prior to moving to PWA and understanding the direct impact of that transition to PWA. You mentioned a number of benefits there. And I guess for anybody considering this, what would you say are the key considerations to implementing or converting to your current web, current mobile or web experience to a PWA? So I think I think thinking about what your current experience is, you know, is it performant? What are the what are the what are the what is the analysis looking like? So I used to be ahead of e-comm, so if I was if it was me on the other side thinking, OK, am I going to implement a PWA in this situation? I would first of all, look at my analytics. I would go into my analytics dashboard. I would be looking at mobile behaviour versus desktop behaviour. I would be thinking about some of those stats I shared at the beginning around smartphone behaviours and how obviously important they are in considering a mobile first experience. And I would personally think that a trial of a PWA studio with a site that provides customers with all of the ability that they need and with the. This is something that’s probably more easily done for a B2C customer, but not out of the realm. You could you could implement a PWA experience fairly easily and using obviously the same tools if you’re using page builder. Absolutely. This is something that is a lot easier for you. And I think. That’s how I would approach it. And then I would have a look back those numbers and have a look back at those numbers once you’ve implemented that app like experience and and and see what the growth is. I think that. It’s definitely something that we see our customers moving towards, but some are a bit more cautious than others. Of course, it is an investment and there will be some development costs, of course, as a part of it. But if you were looking at a typical B2C journey, you would be able to use the GraphQL support as is. You would be able to use page builder as is. So it would be a good it would be a good test and trial. And in my opinion, that would that would be what I would be looking at, and that would be the decisions that I would make. Great, thanks, Bethan. You mentioned page builder and GraphQL, so if my team are using Adobe Commons today, is there any extensive or additional enablement that the team would have to undergo to leverage PWA studio studio? No, so this is the great thing, right? Page builder is directly linking to that PWA experience. So no additional training needed. You’re still using the same tool. It will be just rendering the experience for your customers in the theme. And as I said, another reason why this is good to have a trial or a test is because we are also giving you an out of the box theme that obviously you can add your colours and your logos and your flair to. But you’re not necessarily, you know, to do a trial or a test. It wouldn’t require you to to to do a huge design where we’ve got a we’ve got a blank theme you can use and trial, which has which is what a lot of our customers are using. It’s worth saying a lot of those customers that you saw on the 650 plus. We go back and get those logos up so you can see it again. Yes, the 650 plus logos and a lot of those logos that you’re seeing now and using that Vennia theme that we that we provide and. All that all their commerce and content teams are doing is the same as they were before. The one thing, as I mentioned before, that we have improved is the availability of some of the features across the product in terms of what’s available through the graph QL. So B2B functionality is enhanced with two point four point four update, as is customer segmentation and personalization. So now you can you can do all of that personalized content to. Thanks, Bethan, we do have two more questions from Paul. I think based on time we’ll just go pick one and Paul will certainly come back to you on, I guess, the mobile first experience that you’re looking to convert. How easy is that? We’ll get back to you directly on that one. But I guess you had another question around PWA complementing or competing with a native app commerce experience. How how would that fare? Any comment on that? So in my opinion, it’s slightly different strategies. You know, if you are providing a native app to your customers and you know, you’ll be to see customers, but PWA to B2B. I’m not I’m not sure you know what what business models we’re talking here, but there are different use cases for each. And as I said earlier, this is we’re not saying a PWA necessarily. Cases native app, and especially when you’re looking at the at the breadth of having multi heads, there are situations in which you will need, you know, customers might need an off purely offline mode that can only be delivered by a native app. But what PWA, the beauty of PWA essentially is you can match the experience that customers have on the mobile and the and the app. And you can you can create that. Again, I’m going to say it again, the app like experience. And the reason the reason I think this is really important is because I think we’re all so conditioned to understanding the format of apps now that actually when a web page is delivered to you in an app like format, you don’t necessarily realize. And you’re not necessary. It doesn’t it’s not necessarily obvious to that it’s you’re not in an app. And I think that is the beauty. We are so used to using apps and there are definitely a place for them in the market. But a PWA allows essentially complements and a native app or for some businesses, it’s their only option. Perhaps they don’t have the budgets to develop Android and iOS and all of the additional heads. We’re saying as well, PWA is fantastic for install and kind of experiences. I know that when I’ve gone into store and you can browse online and order to store and it feels like you’re you’re browsing an app. It’s it’s a lot more slick and experience. And so I think each have their own place and I don’t think they necessarily compete against one another all the time. So I think we are at time now, and I know that there were a couple of other questions that were unanswered, but we will get back to you. I just want to thank you very much for your time this morning. And if you do have any other further questions, please reach out to your CSM and let us know how we can help. And I hope you all have a lovely rest of your day.