Revolutionizing E-commerce with Headless Commerce by Astha Tiwari

Summary

Astha Tiwari from AC Online Design Studio delves into the transformative impact of headless commerce on e-commerce. She sheds light on the evolution of e-commerce platforms from traditional monolithic architectures to headless systems that leverage API-driven interactions for enhanced flexibility and scalability. With headless commerce, businesses can easily adapt to market changes and improve their time-to-market, effectively outpacing their competition. This method separates the front-end and back-end, allowing for easier updates and integration of new technologies like augmented reality.

Highlights

• Astha Tiwari, a senior business analyst, explores the impact of headless commerce on e-commerce. 👩‍💼
• Headless commerce separates front-end and back-end, enhancing the flexibility of e-commerce platforms. 🔄
• API-driven interfaces allow faster deployment and integration of new technologies. 🛠️
• The approach helps businesses to swiftly adapt their e-commerce offerings, meeting modern demands. 🌐
• Headless commerce benefits include better SEO and reduced time-to-market, outpacing competitors. 🚀

Key Takeaways

• Headless commerce is transforming e-commerce by separating the front-end from the back-end, allowing flexibility and scalability. 📈
• Traditional e-commerce platforms are rigid, making it hard to implement changes, whereas headless systems tackle this with ease. 🔧
• API-driven architecture makes headless commerce secure, fast, and able to integrate with various third-party applications. 🔍
• Businesses adopting headless commerce enjoy faster time-to-market and better SEO, keeping them competitive. 🚀
• With headless commerce, there's no need to refactor existing systems, thus saving time and resources. ⌛

Overview

In her engaging presentation, Astha Tiwari discusses the evolution of e-commerce platforms from traditional monolithic systems to advanced headless architectures. These new systems allow for better flexibility and easier adaptation to changing market conditions due to their decoupled structure.

We've all heard of traditional e-commerce structures where the back-end and front-end are tightly coupled. These old systems faced challenges with scaling and adapting rapidly due to their rigid architecture. Astha points out that headless commerce provides a solution with its API-driven connections.

Businesses can now seamlessly integrate new technologies and customize their platforms on-the-go. This not only saves time and costs but also enhances security and improves customer engagement. Moreover, it elevates a business's competitive edge by enabling quicker time-to-market and superior SEO results.

Chapters

• 00:00 - 03:00: Introduction and Speaker Introduction The chapter introduces the session on revolutionizing e-commerce with headless commerce. It highlights the relevance of the topic as it compiles knowledge from previous modules, specifically modules one, two, some parts of the latest module, and elements of module three, focusing on user experience
• 03:00 - 06:12: E-commerce and Headless Commerce Overview This chapter introduces the speaker, Asthatevari, who is a Senior Business Analyst at Yoruba in Ottawa. The focus of her role is aiding researchers at the University of Ottawa with research software development. The chapter sets the stage for the upcoming discussion on e-commerce and headless commerce.
• 06:12 - 11:00: Content Management Systems (CMS) The chapter discusses the role of a team responsible for deploying various types of applications, including research software, web applications, and mobile applications. It highlights the educational background of a team member, who holds a master’s degree in digital transformation and innovation from the University of Ottawa. This education has sparked a significant interest in application development.
• 11:00 - 15:00: Traditional E-commerce Architecture Traditional e-commerce architecture primarily revolves around web and mobile applications. The digital journey encompasses these technologies and how they evolve within the digital landscape. Emphasis is placed on inclusive and human-centric design, which is considered central to the foundation of any technology application or web service.
• 15:00 - 18:00: Challenges of Traditional E-commerce This chapter, titled 'Challenges of Traditional E-commerce,' examines the human factor in e-commerce design, highlighting the significance of the end user for whom the service or product is designed. The content reflects the speaker's interest and expertise in web application development trends, having contributed as a subject matter expert. The chapter emphasizes staying updated with technological advancements and how these dynamics affect traditional e-commerce practices.
• 18:00 - 23:00: Transition to Headless CMS The chapter titled 'Transition to Headless CMS' begins with the speaker discussing their side hustle, which involves contributing to non-profit organizations focused on the recognition and advancement of women in STEAM (Science, Technology, Engineering, Arts, and Mathematics), including digital humanities and mathematics. The speaker expresses a desire to assist these organizations alongside their regular day-to-day work. The chapter then transitions to the main topic of discussion: the move towards headless CMS (Content Management Systems).
• 23:00 - 27:00: Benefits of Headless CMS The chapter introduces the concept of e-commerce web development, providing a foundational understanding for further discussions. It aims to revisit essential points about e-commerce to set a foundational context for exploring topics such as the benefits of headless CMS. This recap helps to ground the audience in the basics before delving deeper into more advanced subjects in the digital landscape, particularly focusing on the innovative aspects of web development in e-commerce.
• 27:00 - 33:00: Microservice Architecture and API-driven Technology This chapter discusses the impact of the pandemic on online platforms, particularly those facilitating buying, selling, and service provision. It highlights the significant increase in domain activity and stresses the importance for businesses to establish a solid online presence.
• 33:00 - 38:00: Conclusion and Audience Q&A The chapter titled 'Conclusion and Audience Q&A' discusses the rapid adoption of digital technologies by businesses. It highlights the significant shift of operations to online platforms, including social media and e-commerce, driven by the need for better customer engagement and increased sales. The conversation underscores the comprehensive impact of this digital transformation on business operations and customer interaction.

Revolutionizing E-commerce with Headless Commerce by Astha Tiwari Transcription

• 00:00 - 00:30 so hello everyone um today we are going to talk about revolutionizing the e-commerce with headless Commerce um this particular topic is uh being chosen because this kind of compiles a lot of knowledge that you have gained throughout I would say the module one module two and as well as like the last module that you have dealt with also some of the bits and pieces of module 3 considering the user experience side of
• 00:30 - 01:00 things so um just before uh heading towards the content of this uh presentation let's just uh I'll just talk a little bit about me so uh I'm asthatevari and I'm a senior business analyst at Yoruba it uh at Ottawa obviously and um my role basically involves uh uh helping researchers at the University of Ottawa with their research software development
• 01:00 - 01:30 needs to so anything that they have in terms of deployment of a research software application research web application mobile application anything around that me and my team are responsible for that um uh from my education point of view I have finished my masters in digital transformation and Innovation from you Ottawa and I would say that this particular degree that I did has triggered um kind of an interest in me to my app
• 01:30 - 02:00 the digital journey of basically web applications and mobile applications in particular and I'm more intrigued into how things transform in the digital landscape I would say um I am also an advocate for inclusive and human-centric design um and uh uh basically I what what I feel is like uh the core of any web application and Technology lies at the
• 02:00 - 02:30 uh you know human factor that it has like the end user the human who are who for whom this is being designed so uh that's one of my interests I would say and then um yeah as uh talking about this particular course current trends in uh web application development and I have been fortunate enough to contribute to this course as a subject matter expert uh kind of you can see but that's my curiosity about being updated with the Technologies uh
• 02:30 - 03:00 uh I call it side hustle for soul but like this is something that I'd like to do apart from my day-to-day work is contribute in non-fore-profit Organization for recognize basically recognition and advancement of women in Steam pay also that includes uh digital Humanities as well as mathematics engineering area everywhere and I try to be kind of a help to this organizations now um moving towards our topic so uh I
• 03:00 - 03:30 would like to start with one of the base of uh this module four that you have already gone through uh that's basically e-commerce web development and I want to draw that picture again with you in terms of uh what e-commerce web development looks like in the digital landscape so let's revisit couple of points just to kind of set the ground uh for ourselves um so what is e-commerce basically is when you are developing and building an
• 03:30 - 04:00 online platform wherein your users can buy and sell products and facilitate any services around that uh now you you all have been aware that during the pandemic this particular domain uh was kind of like it it saw a huge rise and um that kind of uh enabled businesses to kind of create a strong online presence so whoever was online
• 04:00 - 04:30 was kind of boosting their uh you know um digital technologies that you were using and whatever wasn't online was moving online be through social media platforms be through e-commerce platforms that they were creating but everything uh kind of saw a huge rise in that domain uh now um if we if we look at like these businesses how they benefit from e-commerce in that domain was like through increased sales improved customer engagement and uh operations
• 04:30 - 05:00 were streamlined so one example to take is like we all shop a lot and uh we know that uh facilities like being able to purchase something online let's say from h m uh you're able to return it to uh through your off offline store even if you have purchased it online and vice versa so search operations and tracking all of that has been streamlined thanks to e-commerce technology um but like as you can see there is a
• 05:00 - 05:30 lot of competition so for business uh businesses it's very important that like an effective e-commerce web application basically is uh kind of something that to deploy that we require a deep understanding of user Behavior Uh technological Trends and business needs you have to be updated with what's going on in the technical uh domain um and a high quality e-commerce web applications would be mostly succeeding in this uh this area and a better
• 05:30 - 06:00 position for a longer term growth um so now uh there is something that e-commerce application has been facing a challenge and let's look at that through this particular graph so um uh I was I was going through some of the uh you know resources and I found this interesting to kind of like we are talking about Trends so why not just look at that one Trend that kind of has led to the advancement in how these
• 06:00 - 06:30 e-commerce applications are deployed um so if we talk about that one Trend uh and if I were to plot this graph this graph you can see is like an uh a comparison between the efforts required to put anything on the web let's say uh including e-commerce web application content already uh and uh what how it has changed through the years like how things have been kind of plotted through
• 06:30 - 07:00 the years and you can see the red line basically talks about the efforts as Oppo as compared to the time through over the years like the efforts take into uh to put any e-commerce web application uh into the market so that's called time to Market and um as and and that's and again like comparing it to the technical knowledge required so now let's talk about several years ago uh when if you can see here uh like uh the several years ago the
• 07:00 - 07:30 technical knowledge required to deploy anything on the web was very high so like you had to know coding languages you had to know uh you know nitty-gritty details about the tech Stacks to put anything on the web even putting a video on the web was not easy uh but actually if you see the time to Market as opposed to that it was like fairly simple for such applications because if I was to build a game gaming application just putting it on the web and
• 07:30 - 08:00 being like being able to send it to my market like people being able to access my web application was fairly easier because there was less competition not everybody was on web so I could actually like when I when I marketed it it was easier for them to find my product it was easier for them to find my application now moving through the years fast forward to today we have so many Technologies where you can actually drag and drop things to build your own
• 08:00 - 08:30 website uh for example Wix as uh like that's one of the trending ones uh that you can see and you can easily build anything and deploy anything on the web you can easily publish videos on the web now with that uh we have started facing One Challenge because now that everybody is on web now the social media is huge uh the time to Market takes that that particular uh range takes actually it takes a lot of time because
• 08:30 - 09:00 um now that everybody is accessing it indexing your web product or indexing your website takes time just just so that people know it takes time so uh so what our goal is basically if you if you again go go through go to this graph what the goal is to kind of like bring both these to balance right so let's look into how content management system a CMS came to the picture and how it rescued it tried rescuing us through
• 09:00 - 09:30 this problem so uh basically these are some of the advantages that a Content Management Systems system kind of brought with it uh through content management system people started like they had the Liberty to create and manage their own content uh and that kind of gave more options for you know customizability to the user in terms of uh development costs so the technical efforts kind of reduced
• 09:30 - 10:00 because uh a Content management system is some something that you can basically that can be that is like a low code platform wherein the back end is handled by uh you need a high knowledge to manage the backs back in but the content and the pages the static Pages could be update updated by your content management team easily um content Management Systems offered scalability in terms of you know uh just adding more templates to it and just
• 10:00 - 10:30 adding a layer of menu into your system or a website was much easier in content management system as opposed to traditional static websites where everything was hard-coded um again that kind of ties to the easier content update as well as maintainability of code that doesn't mean that the code was not written any anymore but the code is still written in content management system but you can easily manage it because now you have
• 10:30 - 11:00 one uh platform where you're like trying to kind of you know deal with uh different functionality from one place um so what did the content management system do but what it did not was it does it did solve a little bit of like it did reduce the curve in terms of solving the uh you know the technical efforts required right uh but content management system was still facing the problem of giving like reaching with reaching to
• 11:00 - 11:30 the market with your product so the time to market rate is still high for the content Management Systems because uh what you're basically uh doing here is you're able to put anything on the web easily but you still require like the SEO process and the indexing process still takes time so um moving to uh just kind of like diving
• 11:30 - 12:00 more deeper into this concept let's look at how the traditional e-commerce platform structure looks like so what I'm trying to do here is I'm trying to explain how content Management Systems have been adapted into the e-commerce uh picture and just kind of like look into why why we are talking about like since we are talking about e-commerce how the traditional structure looks like so um Let's uh let's look at this this
• 12:00 - 12:30 particular diagram here so in the traditional e-commerce architecture and as I say traditional going back to the module one wherein you learned about monolithic architecture uh a monolithic architecture is something which has every functionality of a particular system very closely coupled to each other so as you can see here I have a green box that you might be seeing and inside that green box you see the UI storefront that just consider an
• 12:30 - 13:00 e-commerce application where you can see all the product pages you have got some templates that you are using to kind of design develop some of the UI elements on the UI side of things you have a checkout option you have user profile these are all on the user interface side of things by the way the menu that you use to navigate through this particular store and there are forms maybe contact this form or you know any forms that that your user would use to interact with your business
• 13:00 - 13:30 um and then there is like underlying functionalities which are the gray boxes so as you can see in the center is the content management system and I as I was just telling you the the responsibility that we have put on the content management system has been increasing Through The Years so originally it's supposed to be a system that allows you to update images texts roles and you know scheduling all such stuff on your web platform but you also have features
• 13:30 - 14:00 like uh just to offer more customizability now you have started involving HTML JavaScript CSS kind of front-end coding languages as well as uh you want your systems to be responsive so that again is like a Content management system is supposed to be responsible for that um uh so this is like now since this is an e-commerce platform you might have a separate uh functionality or a system that manages the product information so
• 14:00 - 14:30 that's the Pim that's product information management system wherein you manage all the backend information about your product so all the product images product inventory any information what's the cost and stuff like that all of the back end of it is managed by this particular system and then then there is shop so shopping cart shipping tax calculation all of that now again remember all of this is tightly coupled in this particular architecture and everything is linked so your UI
• 14:30 - 15:00 front end the yellow box is linked to all of these particular systems now let's say I want to uh like my my client gives me a requirement wherein I have to engage uh I have to create a UI separate for the retailers or resellers let's say and um that kind of is another UI component that requires all the coding and development and then you have uh you you kind of get to get to deploy your con customer relationship management
• 15:00 - 15:30 system and then there is a payment management system and then there is a UI for customer service your customer service department wants to separate UI where they can see the different information about the clients or the users so here you can see that this is now a web the the basically now what you're seeing is like all these functionalities which are already in a box are all interlinked because these all need to communicate with each other for sending information to the front end
• 15:30 - 16:00 um so actually let's now let's look at what kind of challenges this particular traditional e-commerce platform offers that's again use using content management system as a space so uh we saw that it has a rigid structure again the green box that made it difficult to scale and adapt to change in Market needs because now that everything is linked just to sum up all the challenges in one example I would say uh if you were to update any data in
• 16:00 - 16:30 your backend database uh let's say about a customer and uh the format of that data is changed let's say you deployed this particular web application five years ago and you used to use uh the format of storing the data as uh you're asking your user to input first name and last name and this goes into the database um so what happens five years later you
• 16:30 - 17:00 changed the format in one of your forms or this and you or you have got the content uh customer relationship management system where you're now asking a username as first name and surname instead of last name you're using surname as the attribute so basically to make that change you have to go back to all these systems let's go back to this diagram so you have to literally change everything where these were actually involved so the links
• 17:00 - 17:30 because of these links these styles that they have so now there is a lot of complexity in those terms your code is basically like a spaghetti now it's like so all all interlinked and cumbersome to uh kind of manage uh and one of the other other things is integration with other Technologies so we have seen in this particular module in module four that the trending Technologies like augmented reality inclusion of augmented
• 17:30 - 18:00 reality in e-commerce as well as voice enabled search features like that are again trending and as we discussed scalability is a problem so that creates a problem for us to include that in our in our uh web platform so uh now let's go back to this particular diagram and now in three steps I'm going to explain you how this particular structure moves into and like kind of
• 18:00 - 18:30 takes a shape of a headless content management system and by the end of like this demonstration that I'm doing here you will be able to get a gist of what headless content management system is all about so to to help us out with this problem let's do one thing is let's take like this is the basic structure again let's take it out of that green box so the green box disappears now what we'll try to do is the problem was in this these links that were there so let's try to get rid of these links as well
• 18:30 - 19:00 uh now what I did is apart from that links let the content management system do its core job that is to be able to manage the content so what we are doing is we are trying to manage the content here so I took out the technological stack I'm putting that out here and now what we are doing going to do is add another layer so what I'm doing is I'm moving all the technology into an uh additional layer that's in included in
• 19:00 - 19:30 my front end so all the technological stack for my fronted is separate and what I do now to make these lines these red lines disappear is introduce the application programming interface API layer between these so you get rid of these lines and what are what it's this that means is basically all these systems now communicate through API with each other so this is essentially what a mic uh what basically
• 19:30 - 20:00 um headless CMS or a headlet I would say a headless e-commerce platform would look like what you're doing here is your decoupling the front end from the back end architecture and you're giving them a common communication through API so anything that happens now is done through the apis so what are the benefits behind this uh let's say you were to add a new service to this again going back to our example let's say
• 20:00 - 20:30 there was a CRM that you wanted to add to this adding a CRM in our traditional architecture was a mess because there you had to interact with all the different functionalities here what you do is you just make it interact with API and then the API gives the information to the others replacing an existing data or service we took the again revisiting my example of the username as first name and last name any update that you have to make in this platform you're just
• 20:30 - 21:00 gonna update it on the API and there you go all all the uh different back-end structures would be kind of updated because they are all entering interacting with Central API system and so this kind of API driven uh technology allows you with more additional benefits so let's talk about time to Market so that was the challenge that we saw in the line graph that we had so the time to Market essentially becomes really low
• 21:00 - 21:30 now why I'm saying that is because you're able to deploy a technology faster and uh quicker and that kind of allows you time to uh get a better search engine optimization on your particular web platform so you go into the market quicker and sooner uh again as I said it's fast and present so that means uh basically if you if you were to kind of deploy a headless CMS you what
• 21:30 - 22:00 you all all you need to do is just select the right pieces and bring them together and there you go like you can choose to custom code everything or you can choose to buy third party applications to implement it that is again related to the best of breeds what I mean by Best of breeds is since it's API driven technology like if you if I was to go back to my previous slide again for a bit uh since it's API driven
• 22:00 - 22:30 all of these systems can actually be different third-party applications that you use and you make them interact with the API so a good CMS a shop uh you know shopping platform that allows you to kind of integrate uh to your UI front end kind of gives you that benefit of best of Dreams it's much more secure because all these elements that you're using is secure in their own way like they are they are in a shell that's much more secure
• 22:30 - 23:00 um so what a question that I often ask myself as a web developer or a professional in this field is what's in it for me as a as we know uh as we are learning headless uh you know e-commerce so microservice architecture and API driven architectures are very fast and they are more in demand at the current uh Market um you don't have to rebuild anything
• 23:00 - 23:30 you you're basically reusing a lot of things so if there are existing you know templates that that that comes in the CMS you're just going to use that and quickly deploy everything same goes with the CRM system same goes with your front end you have a lot of Liberty in terms of using your front end so that goes to like the wide range of technologies that you have like let's say you are a good JavaScript developer you don't have to go learn in PHP uh language to deploy
• 23:30 - 24:00 something um and uh scale easy and pass it over easily to your new developers in the team so because these codes are not interlinked anymore it's much more easier for others to adapt to your technological stack so with that um I think that's it about this particular trending uh headless architecture in the e-commerce domain thank you so much
• 24:00 - 24:30 I have a question can you recommend an example or two of a Content management system that you would use for shopping and and uh can they be improved upon oh for sure uh Casey so one of the best examples and that's kind of the the one that offers a lot of customizability in the front end is WordPress uh WordPress actually comes with particular themes that allows you to have e-commerce of
• 24:30 - 25:00 features inbuilt especially on the front end so it has a theme and a plugin called woocommerce that's very common to to deploy a e-commerce website along with WordPress a lot of the uh you know uh major e-commerce platform that is being used by a lot of organizations right now is Shopify and actually Shopify does provide a headless architecture too so it's easy to deploy
• 25:00 - 25:30 and again it kind of overcomes the challenges is