Your Personal Remix!

you hello everyone. My name is Facundo. And today we're going to talk about remix and personalization. First of all, I want to introduce myself as I said, my name is Facundo fagundo. Juliani. I'm a developer relations engineer at storyblock. I'm also one of the organizers of react Buenos Aires the the biggest react community in Argentina, and we also organize monthly in-person meetups in Buenos Aires the city where I live in and I'm also on OTC rambassador prize Ambassador and culinary media developer expert you can find me on Twitter. My user is fakundo suro. so Housing company to you that sometimes you go. Well not sometimes but you go usually to the same coffee store and the waiters refer to you by name or they already know what you are going to order or probably you go to look at breweries and and the people working at the brewery. They recommend you a new beers that are on top based on other beers that you ordered in previous visits if that happened to you then in those scenarios, you were experiencing what we call personalization which is the ability to offer exclusive experiences to personas based on existing data. Probably the term data sounds kind of technique, but the truth is that based on on things that we see things that we can learn about the people things that we can discover about them. We can offer these exclusive experiences to them to to satisfy their needs. Let's say we will talk about the benefits of personalizations later But as we are talking about web development, we are going to talk about web personalization, which is this ability to deliver content granularly and offer this exclusive experiences well in websites and web applications and again based on existing data data that we are able to collect from the users and the people that is visiting our websites. So examples of web personalization would be online retailers that are providing Target offers to the people that is browsing their websites based on the behavior to give you an example. You can go to Amazon and you will see a section on the home page of Amazon with suggestions of articles that may be interesting for you based on previous purchases or for instance. You can go to news and media platforms and you can get specific content that may be interested for you based for instance on where you are living an example of that would be Netflix where you get the top five TV shows and movies in your country. I'm I live in Argentina and these are the shows that are trending right now as you can see the top one is related to soccer. That's because the the soccer World Cup is just about to start but you receive these suggestions and these specific For you based on a different details that the the website or the developers or or the product designers were able to get from you from your behavior and from your environment? So we talk about personalization. Be why we want to personalize our products why we want to offer personalized experiences to the users. So first of all, we want the people that is visiting our websites to get great user experiences. If we offer personalized experiences to them we are going to have them I mean make them happier. They will get a better time when using our products. I'm visiting our websites for instance. And that will also help us from the sales perspective because if we want to sell products if we want to offer services, we will get better qualified leads because the people that will be clicking on our call to actions or visiting or catalogs will be people that this actually interested on the products and the services that we offer or the ones that we actually want to offer to them. Also, as I said, we can optimize our landing pages and our call to actions on our website because the people that is clicking on them. We have a way of identifying them and offering what they are looking for or what we think that it's interesting for them. And finally, it will help us our brand to have a greater affirmity because as a brand we are going to be offering best experiences to the users and our users will recommend us our services and products and they will enjoy being part of the experiences that we offer. We have different types of personalizing and experience based on the way that we show the personalized content or or how we personalize the experience of the users and on the other hand on the way on how we retrieve the information or the data that is going to help us to offer these personalized experiences. For instance we can talk about explicit personalization when this experiences that we offer are based on data that was provided well explicitly by the users and visitors of our website to give you an example when we ask the users to fill the form or we ask them about their interests. We are getting explicit details of their interest on the other hand. We talk about implicit personalization when we get these data or these details based on the behavior of the users previous purchases where they are browsing our side from I mean where they live Etc. We are talking about an interruptive personalization when this experience is that we want to offer to the users. They are like some kind of interaction or offers that they are not expecting to to mention an example an example of this interruptive personalization would be a model in a website or a push notification on the phone offering for instance special products or offers based on where you live or the restaurants that you prefer to go or you usually go on the seamless personalization is the experience when it's a part of the whole application or the whole visit of your users when they are well actually visiting our website or they are using our application to mention an example of seamless personalization. It will be for instance when you are using spotify and you have the section with recommended music based on your interest or what you were you listening to the the last week or the last month. For instance. That's something that you are expecting from the product and you expect it to be personalized based on your interests. So let's say that we want to implement a personalization strategy or a personalized experience for our users. We have some steps to follow. The first step would be collecting data from the visitors. We have different ways of collecting data. We can explicitly ask the visitors about details that will help us to offer them better experiences. We can map the customer Journeys. We can track information with cookies or with marketing emails with URL parameters in the leagues in the links that we include on our emails and we also can use company records. I mean records that we have on our company from the different customers that we are having or that we have contacted in the past. The Second Step would be creating customer profiles. We are going to define the customer personas. This personas are going to be individuals that we are going to a name an age description and interests and on the other way that will help us to identify how to personalize their experience. I mean what will be the best way of offering them a personalized and custom experience when using our product? The third step would be setting our goals. I mean what we want to get from this personalized experiences. We can for instance want to increase our conventions or reduce our bounce rate or probably we want to improve our cells or we want to increase their retention of the people talking about our product or our website itself. And finally, we need to plan an implement this strategy that we are taking. We need to identify the involved areas of our product and the beside the ones that we are going to modify or that will be involved in this process in this campaign that we are going to create we are going to draft a campaign to launch this personalized experience. We are going to prioritize the different campaigns that we make came up. I mean for instance we can think about different ideas on how to personalize the experience of the users. This ideas. They will have different different impact. I mean, some of them will have a bigger impact, but probably they will take more time to implement. So that's something that we can use to prioritize them and think on what would be the the best the best strategy or the best campaign that we can go on and we can Implement at this time. And after we Implement one of these campaigns we are going to test it. We are going to measure the success of the campaign and then we are going to iterate to see how we can improve this campaign. I will show you a quick demo how to implement a personalized experience on our website. Well, of course using remix because we are in remiss conference. So what I wanted to show you now is this simple website when where I have my home page in this homepage. I'm offering some generic content and I have a banner with discounts of the products that I offer. As you can see on the top of my page. I have a toolbar with different links to the catalog which would be the general catalog of my website. And then I have the sportswear category and the elegant closing category. If I visit one of these categories you will see that I can see the products for that category in particular sportswear. If I go to the general catalog you will see all the different products that I offer on my website. And if I go to elegant clothing, you will see only the products from the elegant clothing and category, but what I'm doing in this website is Considering that the first category that the user is visiting which in my case was sportswear is the my preferred category. I mean the products that I like the most from the website. So what we are going to do to offer this personalized experience is change the home page and change the banner that we were displaying in the homepage. And now as I visit this category and and I showed interest on the sportswear the banner that I'm getting as you can see is different and it's not the generic one that we display before it's a banner about discounts and offers related to specifically sportswear which is the the type of product that I prefer right because that's the criteria that we Define for the users. So for this simple demo project, I used storyblock story block is a headless content management system that will help you to create and manage the content for your website. The cool thing about store block is that it has to Main benefits. Let's say one is that it offers a real-time visual editor. So the users and the content editors can well enter to this visualizer and have a real time preview of how the content is going to look like before they publish the content and on the other hand the users can interact with the content that they are creating and the components that are part of these content that they are creating because surblock also offers a component approach you will be able to create reusable components that are called blocks and these blocks you will have them in different pages and in different parts of your pages and you can reuse them as different content entities. The cool thing about Starbucks as it's a headless content management system is that we can use it with any framework any programming language any particular programming language that you prefer. In our case, we will use remix for our example and all the different features that remix offers us. The cool thing is also that we are going to use react components to link to this story block components. So we will have the visual representation of our store block components using react components in the front end of our application. So let's go now to the demo again. I want to show you first store block visual editor that I mentioned before as you can see. I have the page. I mean my page inside this real-time visual editor. I have the possibility on clicking on the different components or blocks of my page and I have the possibility of editing this values and seen in real time the content that I'm creating an editing. I can't for instance as you can see I can add some text here and it's up here in real time because this is the real time visual editor of storyblock. What I wanted to show you is the structure of my page. I have this Rich Text block or component that is displaying some generic text. But on the other hand I have this personalized content that is a block that has other components inside of it and we have the different variants based on the type of user that we want to identify and this type of user will be based on the interest that they are showing So we will have a generic content variant which has the banner with the call to action for the generic the generic case. I mean the the user that didn't show any interest on any particular category. So we have here the headline that takes and the image that we are showing and the link to that page but we also have some variants for the sportswear and the elegant closing. So if I go to sports where you will see that I have the user type of this variant and then I have the call to action, which is a headline a text an image. I'm the link to the actual catalog page for the sportswear with the discounts that we want to show. This page is the home page where we are. Well displaying the logic the personalization experience that we want to actually show to the users. If I go to the catalog page, let me go out of the visual editor and I wanted to show you again that in my personalization example, I can go to the content and I can show you the catalog pages that we have here what we are doing in the catalog. I will show you the sportswear as an example. We are displaying all the products from a particular category. So this category I mean the page that we are showing for the catalog we have only the body of this page and the body has one block of type catalog this catalog. The only thing that we are storing is the category of this catalog and then in the front of our application, we are implementing the logic that we want to use to only display the products from that category the same happens with elegant clothing and in the case of the general cattle, we're going to show all the products from our website. Speaking about the products. I will show you that we have a folder in my space in a story block with all the products that I'm offering this product. They don't have a particular visual representation. But if I show you for instance this snow jacket, you will see that I'm storing all the information related to the product. I'm storing the image the price and the category and this category is the one that we are going to use to filter them based on the catalog that the user is visiting. So this is the content structure of my project that I have in storyblock. And this is what I'm going to use and I'm going to consume from the serblock API from My remix front end. So if I go now to My remix project as you can see on the left hand side, I have the the typical structure of a remix project. I have two routes basically one is a generic route at the other room. I mean at the top level of the route folder and then I have a catalog group for the actual catalog page. I want to show you first the catalog page because here is where the the magic of identifying the users is happening. What we are doing is getting a cookie with this react use cookie Library. They are installed for this purpose. We are going to see if the user already has a user type. This user type will be identified the interest of the user if if the user didn't visit any catalog page before we are going to set a new cookie based on the category that the user is visiting. So if we are visiting the sportswear page and the user doesn't have any user type cookie on their browser. We are going to set that as the user type and we are going to consider this user as interested in to sportswear products. And here we are actually rendering the content of my page. We are going to display the title of the category and the list of products based on what is coming from the server block API. I will show you later. I don't want to go super into details of the different react components that I created. What I wanted to show you is how to implement the actual personalization strategy. In the loader function of my root of my catalog group. I'm going to get from the URL the category because it's I mean we can identify the type of catalog that we can see in our URL. We are going to set some filter queries to call the store block API. You can see that we are going to filter products and the products that we are going to filter them bring to this catalog are based on the category. If we are visiting a particular category, I mean not the generic component the sorry the generic catalog. We are going to filter the products and bring only the products from that category. I know that we created all these filter query object. We are going to add that as the paramed to the parameters that we are going to send to the store block API to retrieve all the products from the storyblock space that we have connected and then we are working on and we are using for our product. So as you can see, we are initializing the connection with the server block API and we are getting all the stories which are the items from Surplus based on the products that we can we want to retrieve and the category that we want to we want to display and based on that. Well, we will get all the products from our category and the category title that we are using to render the page. The generic sorry the home page for the home page. We are using this other route as you can see. We are loading the data. We are showing the story which is the page that we want to display on the information that is coming related to that item from storyblock. We are using this short block component, which is a generic react component that will help us to render all the content from our page based on the blocks and components that we are adding on Store look so we are going to render the page and we are going to offer to the content editors the possibility of editing the different components are part of the page. And then in our Lord our loader function, sorry, we are going to actually call to the server block API to get the page that we are visiting probably in this example as it is super simple. We are only two we are going to only show the home page with this route and following these logic but in the case that we are more pages and at the top level of our website the same route will render any page no matter the the content that we are displaying on that page no matter the blocks or the components that we have on them because we are using these surblock Dynamic component to render the page itself and we are using the same rendering Logic for all the pages of our website that we are managing on store. Finally, I wanted to show you this react component called personalized content which is linked to the personalized content blog that we have here in store blog that has the different variants when we are rendering this personalized content. I mean when we are rendering a component of type personalized content, we are going to identify the user type from the cookie using the same react used cookie library that yeah install. And then with that user we are going to only display the banner that we want to display for that type of user. So if we don't have the cookie or the cookies the generic catalog we are going to display the generic Banner if we have the category, we identify the category and we created the cookie previously. We are going to display one of the other banners that we have here based on the category of the user that we identify. And this simple example is what I wanted to show you on how to offer personalized experience to our users. I follow the steps. I mean, I collected the data from the visitors which was seen which Pages they are visiting which catalog they are visiting. We created the customer profile in this case would be Facundo that is interesting in sportswear and soccer t-shirts. Let's say we set our goals. What we want to do is offer promotions and discounts to fakundo to so they sofakundo buys more soccer teachers and other sports were and then we prepare the strategy which was showing the banner at the home page. So whenever facunda is busy in our website, he will see this offers and this discounts on sport words, and he will direct go to the sportswears catalog. so thank you very much. I hope that you learned something new and please feel free to contact me on Twitter. We can discuss about personalization and other topics. And again, thank you very much.