Migrate and Modernize Experiences with Adobe Experience Manager for User Engagement and AI-native Discovery

Transcript

So hello, everyone. Thanks for being here. My name is Giorgia and today we’re going to have, we’re going to go together through a little journey into a sneak peek into the future of AM. So let me start with a little bit of warm up. So I’m assuming that you all have like, you know what you all have heard over AM? How many of you have experience already with site migration to edge delivery services, like either directly or indirectly? Okay, perfect. So you all know how long it can take to migrate a site to edge delivery services. But not only that, also to create new content for a site. It can take weeks. It can also take months.

But today, we’re going to see how all that time spent on migrating a site and also creating new experiences, thanks to the integration with a conversational AI, can be reduced to a few minutes. Let’s dive into it.

This is a site that we have, and it’s a site that we want to migrate. So as you can see, very standard size, we have a few different sections. So we have this here section with a little gray background. We have two sections here with cards.

This one is without images. This one is with images. Then we have a tab section, which is with a dark background. We have an accordion with frequently asked questions and STTI. So it’s something that you can very easily see on an own page. And this is what we’re going to talk to. So instead of actually starting the migration manually as we’re used to, we’re just going to go to the conversational interface and ask it to migrate the page. It will start thinking, and we will see how, as a first step, it will start generating, outlining the list of all the tasks that it needs to perform in order to achieve the objective, which is for this first stage, the migration of the content. So we can see here, it will start by scraping the web page. It has a set of specialized skills that it will call depending on the task, that will take care of every single objective that we want to achieve. So right now it is starting to scrape the original web page that we have. And it will do so by taking screenshots, retrieving the HTML content. And the objective of this first phase is to understand the overall structure of our site. So as we were seeing before, we have a few sections with different backgrounds, we have a few blocks. So right now it’s, for example, completing the step one, scraping the web page. And in a few seconds, we will see how it will start analyzing the content structure.

So the content structure of this page, we saw it’s like we have like, we can go look back into it. So we can also double check once we receive the result. We have different sections, again, with different backgrounds, different set of blocks. And here we have the page structure analysis was performed. We have a hero section, I don’t know if you can read it, maybe I can zoom in a little bit. We have a hero section, two card sections that were distinguished, because they are different, one is without images, and one is with images, then we have a tab section with a black background, as you can see, it was also able to identify all the different backgrounds that we have in the different sections, then we have the accordion and the CTA. And these maps exactly the original content that we have in our original site. So this whole process is going to take a few minutes. So we’ll stop it here for now. But everything that you were seeing right now, it’s not staged, everything was being performed live by the agents behind AIAM. And the result that we obtain out of this first stage of the migration is the whole content of the page loaded into our document. So as we can see, we have the different sections with also their style. So we have the first section, which is the hero section, with a gray style. And we can see here that we have the hero with a couple of buttons, and we have the two column pictures that we also have in the original site.

And let’s go through that quickly. Then we have a light section with a lighter background, with the cards without images and a couple of buttons again. Then we have this other section with cards with images. And as you can see, it was also able to distinguish the two different variants of cards, one without images and one with images. Then a new section, which is a dark section with the tabs, all with their respective images, and finally, the accordion and the CTA section.

So now we have all our content imported to our document.

And the next step is to style the page because we want, as part of the migration, to preserve the original branding. So we will ask AM to now start importing the general design.

Again, it will outline a list of tasks, call it specialized skills, to collect the general design that we have on the original page. And thanks to that, it will be able to migrate the global color palette, so all the background colors, I will zoom in a little bit again, the typography system, so all the fonts that we need to reproduce the original site, the spacing system, section backgrounds, and also all the base component styles, so all the buttons and links, etc.

So let me pause here again, as this process might take a few minutes again. And I will show you, getting back to our original content, what the output of this exact random was performed earlier.

This is the result.

So we have a site, which is now on Edge Delivery Services, so with all the advantages of Edge Delivery Services, so a Lighthouse score of 100, very fast loading of pages and content ready for AI, which has the same look and feel of the original page. We have the same fonts, the same spacing, the same buttons, and all the blocks that were styled accordingly to the original. We also have the tabs here, we can also move around the tabs, the accordion also is working.

So we completed here in a few minutes, the migration of our web page. And the only thing that we had to do was to just chat with our conversational interface. But that’s the end here.

I mean, there is no limit we can, as Gabrie was also saying, there is no limit we can do with a conversational interface. So let’s try asking it something else. Right now we imported everything.

We have our design, but what if we want to do a little bit of tweets? So let’s say that we want to change the title of our page.

So the next query that I’m going to forward to the AI, to AM, is to change the hero title.

I don’t even need to provide the actual title that I want. I can just ask it to generate a new title, depending on that, based on a description that they give it. So let’s check now.

And it was changed exactly right now. So right now, the title is not the one that we had before. But it was also changed here in the content, and it was updated automatically by the AI. But the things that we can do, the things that we can do, we might want to do on a page, they don’t end on just editing content. We can also, let’s say, update the design, because we might want to do a little bit of refreshing every now and then of the branding that we have. So the next step will be to ask it to change the button background. So let’s go back to our original preview.

Right now, I’m asking it to change the background of the buttons to black.

It’s just going to take a few seconds. It’s going to go in the code, find the exact location in the style CSS, and there you go, the button color was changed. And it just took a single message in the chat.

And what it did as well, thanks to the integration with GitHub, it also went in the code to perform the actual code changes here. So we can see that in the style CSS, it went to change the background color of the general button from transparent to a dark color.

So right now, we’re going through migration of the page, rebuilding the existing design, changing a couple of items. So we change the title, we change the button background.

But we can be also a little bit more creative. So we can also generate a new page. So let’s say that Weekend wants to open a new store in San Francisco. And we want to create a new landing page for the store opening. So to do that, we might want to share with AI a little bit of constraint for pre-approved content.

I’m going to start the chat here and I’m going to show you in the meantime, what I’m talking about. So we have content that was pre-approved by marketing and legal, we have a content repository with a pre-approved copy. And as we can see here, we have some customer testimonials that also pre-approved content. We have the image catalog, with also pre-approved content for testimonials. And then we have the San Francisco opening briefing, which contains all the strategy that was outlined by marketing and all the goals that we want. So in this opening briefing, the strategy includes to add the customer testimonials into the landing page in order to ensure trust from new customers for the new opening.

So right now it is creating the new page. It’s going to take a little bit of time, of course, but I can show you already what was the result of this run, which is this. So here we have a new landing page that was generated by the AI. And if we scroll down a little bit, we can also find the customer testimonials. So AM was able, following the content, pre-approved content that we shared with it, to understand that the strategy for the new landing page had to include customer testimonials to build trust.

And here we have the testimonials added to the new landing page. So we can see that AM was able to follow the strategy that was outlined in the pre-approved content. But besides creating a new page, there’s also another integration that we can do, which is with Figma. So let me stop here in the meantime. If we go here, as you can see, I have a Figma frame selected.

And I want to import this Figma frame into our website so that I will have a block that I can reuse into different page. But to do so, I want also to reproduce the block content and to have all the design imported.

So what I will do here, I will ask AM, I will tell AM that I have a Figma frame selected and AM will be able to connect to Figma thanks to the MCP integration. Find the Figma frame, and it will, in the end, generate a new block fully loaded on EDS. That I can also show you already while it works. So you can see also a little bit of the processing. So this is the content that was imported at the end of the run.

As you can see, you have the hero’s name, the first subscribe block that was divided into sections with a picture. And as you can see, it was able to connect to the MCP of Figma. And it’s right now collecting all the information about the block. So you have the background, the attribution text, the CTA and so on. And at the end of the run, the sample page looks like this. And we have the exact same block imported from Figma with the same design, but as an edge delivery service block.

Once we have all of this, what we want to do is integrate with our workflows. So if you remember before, we have our code changes here. We have our styles, and then we have this new block that was created. So I will just, as a developer, add this to my repository. So thanks to the GitHub integration, I can just push the new changes onto the repository. I will create a new PR and confirm. And if we go check the PR, we have our bot in our corresponding repository for our website that pushed the PR containing the changes that the AM added. And the next step is uploading to AM.

So we can now upload the content and let’s call it index DL25. It will take a few seconds. And right now, if we go into DA, we go into drafts, index DL25, and we have the content with our new title that was imported into AM. And from here, we can go on and preview the page. And we have the preview of our site that we, with all the changes that we did, and all the styling and all the content imported correctly.

And what used to take months, maybe, it now took 20 minutes.

Thank you.