Your Personal Remix!

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, Facundo Giuliani. I'm a developer relations engineer at Storyblock. I'm also one of the organizers of React Buenos Aires, 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 an Auth0 Ambassador, Prisma Ambassador, and Cloudinary Media Developer Expert.

You can find me on Twitter. My user is Facundo Surdo. So, has it happened 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 local breweries and the people working at the brewery, they recommend you new beers that are on tap based on other beers that you ordered in previous visits? If that happened to you, then in those scenarios, you are 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 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 and to satisfy their needs. Let's say we will talk about some of 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 these exclusive experiences in websites and web applications. Again, based on existing data, data that we are able to collect from the users and the people that are visiting our websites.

So examples of web personalization would be online retailers that are providing target offers to the people that are browsing their website based on their 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 interesting 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 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 soccer World Cup is just about to start. But you'll receive these suggestions and this specific content for you based on different details that the website, or the developers, or the product designers were able to get from you, from your behavior and from your environment.

So we talk about personalization, 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 are visiting our websites to get great user experiences. If we offer personalized experiences to them, we are going to make them happier, they will get a better time when using our products and 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 our catalogs, will be people that are actually interested in 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 call to actions on our website, because the people that are clicking on them, we have a way of identifying them and offering what they are looking for, or what we think is 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 experience based on the way that we show the personalized content 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 these 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 user to fill a form or we ask them about their interest, we are getting explicit details of their interest.

On the other hand, we talk about implicit personalization when we get this data or these details based on the behavior of the users, previous purchases, where they are browsing our site from, where they live, et cetera. We are talking about an interrupted personalization when these experiences that we want to offer to the users, they are like some kind of interaction or offers that they are not expecting. To mention an example, an example of this interrupted personalization would be a modal 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.

And 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 actually visiting our website or they are using our application. To mention an example of seamless personalization, it would be, for instance, when you are using Spotify and you have the section with recommended music based on your interest or what you were listening to 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 interest.

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 links that we include on our emails. 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 will be creating customer profiles. We are going to define the customer personas. These personas are going to be individuals that we are going to 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 these personalized experiences. We can for instance want to increase our conventions or reduce our bounce rate, or probably we want to improve ourselves, or we want to increase the retention of the people talking about our product or our website itself.

Finally, we need to plan and implement this strategy that we are taking. We need to identify the involved areas of our product, and 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 may come up. For instance, we can think about different ideas on how to personalize the experience of the users. These ideas, they will have different impact. 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 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 on how to implement a personalized experience on a website. Well, of course, using Remix because we are in Remix conference.

So what I wanted to show you now is this simple website where I have my home page. In this home page, 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 will be the general catalog of my website. And then I have the sportswear category and the elegant clothing 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 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 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 homepage and change the banner that we in the homepage. And now as I visit this category and I show 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 displayed before, it's a banner about discounts and offers related to specifically sportswear, which is the type of product that they prefer, right? Because that's the criteria that we define for the users.

So for this simple demo project, I've used Storyblock. Storyblock is a headless content management system that will help you to create and manage the content for your website. The cool thing about Storyblock is that it has two 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 visual editor 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 this content that they are creating. Because Storyblock 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 Storyblock 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 these Storyblock components. So, we will have the visual representation of our Storyblock 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 Storyblock 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 of clicking on the different components or blocks of my page and I have the possibility of editing these values and seeing in real-time the content that I'm creating and editing. I can, for instance, as you can see, I can add some text here and it's appearing 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.

We will have a generic content variant which has the banner with the call to action for the generic case, the user that didn't show any interest on any particular category. We have here the headline, the text 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 clothing. So if I go to sportswear, 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 and 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. Then in the front end 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. In the case of the general catalog, 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 MySpace in a store block with all the products that I'm offering. These products, 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 store block, and this is what I'm going to use, and I'm going to consume from the store block API from my Remix frontend. So if I go now to my Remix project, as you can see on the left-hand side, I have the typical structure of a Remix project. I have two routes. Basically, one is a generic route at the top level of the routes folder, and then I have a catalog route for the actual catalog page. I want to show you first the catalog page because here is where the magic of identifying the users is happening. What we are doing is getting a cookie with this React use cookie library that's been installed for this purpose. We are going to see if the user already has a user type. This user type will identify the interest of the user. 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. 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 sportswear products. 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 serve log 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 you can see that we are going to filter products and the products that we are going to filter and bring to this catalog are based on the category. If we are visiting a particular category, I mean not the generic component, sorry the generic catalog, we are going to filter the products and bring only the products from that category.

And now that we created all these filter query object, we are going to add that as the param to the parameters that we are going to send to the storyblock API to retrieve all the products from the storyblock space that we have connected and that we are working on and we are using for our product. So as you can see, we are initializing the connection with the storyblock API and we are getting all the stories which are the items from storyblock based on the products that we want to retrieve and the category that 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.