{"id":21332,"date":"2015-11-25T14:17:38","date_gmt":"2015-11-25T14:17:38","guid":{"rendered":"http:\/\/building_creative_content_on_the_fly_for_a_b_testing_and_1_1_personalization"},"modified":"2024-06-03T13:19:32","modified_gmt":"2024-06-03T20:19:32","slug":"building_creative_content_on_the_fly_for_a_b_testing_and_1_1_personalization","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building_creative_content_on_the_fly_for_a_b_testing_and_1_1_personalization","title":{"rendered":"Building creative content on the fly for A\/B testing and 1:1 personalization"},"content":{"rendered":"

Content Optimization and Personalization programs can deliver tremendous ROI to an organization but tend to be very resource intensive, requiring developers to build the code for alternate experiences and creative folks to generate the content. Many of the content optimization\/personalization tools out there today (Maxymiser, Optimizely, Adobe Target, Ensighten etc.) have created WYSIWYG (What You See Is What You Get) editors to help relieve the code\/development bottleneck but the creative bottleneck stubbornly remains.<\/p>\n

Often you\u2019ll have a great personalization or A\/B test idea but can\u2019t execute it because the creative team doesn\u2019t have the time or resources to create what\u2019s needed. Anybody on an optimization\/testing\/personalization team has dealt with this before and it\u2019s been an intractable problem for years. \u00a0<\/p>\n

It\u2019s a bit of a catch 22<\/a>: the more successful you are in your optimization program, the harder and more resource intensive it is going to be to maintain, especially as you get into personalization which requires more and more content catered to the individual user. How does one scale-up such initiatives going forward without hiring an army of creative folks? \u00a0<\/p>\n

Transforming your media to fit your requirements<\/h3>\n

Often there\u2019s already creative content on your website somewhere or images from past campaigns that you can reuse; it\u2019s only the wrong size, needs rounded corners, or just needs specific text overlayed on top of it. Let\u2019s take Williams-Sonoma\u2019s website (a retailer I love) as an example.<\/p>\n

If you go to williams-sonoma.com<\/a> and scroll down on the homepage you\u2019ll see a section titled \u201cJust for You!\u201d. This section is used for displaying personalized content based on your browsing behavior. If this is your first time at Williams-Sonoma and you\u2019ve yet to browse, you\u2019ll see the default content. At the time of writing, it looks like this:<\/p>\n

\"Williams<\/a><\/p>\n

But if I start navigating the site, Williams Sonoma learns what sort of products I\u2019m interested in and will show me relevant content, making my experience better. I navigated around the \u201cCutlery\u201d section and now on the homepage I\u2019m presented with the following:<\/p>\n

\"Williams<\/a><\/p>\n

This is very cool, now I can see relevant content with less clutter.<\/p>\n

But how does this look from Williams Sonoma\u2019s end? Clearly they have to maintain additional content, about a dozen or so different versions for each main product category. This of course puts an additional strain on both the development and creative teams.<\/p>\n

This might be why we only see the dozen or so different versions and then only on one spot on one page. If they wanted to expand their personalization initiatives they would have to weigh the benefits against the additional effort, and while the benefits are linear, the effort becomes exponential.<\/p>\n

When I was navigating through the cutlery category to build up a category affinity, I was actually looking at the \u201cR\u00f6sle Cheese Knives<\/a>\u201d. But when I returned to the homepage I was shown \u201cShun Cutlery\u201d content. Same category (cutlery) but still probably irrelevant to me, perhaps not personalized enough. As we discussed, it\u2019s probably impossible to get to this level of personalization (true 1:1) as it\u2019s just too much effort to create all the resources that would be needed as I\u2019d guess Williams-Sonoma has in the area of 1000 products or more.<\/p>\n

Can you imagine what the response would be if you went to your creative team and asked them to create 1000+ different images for each spot you\u2019d like to try personalized content (on top of their normal job)? I\u2019m guessing there would be laughter followed by an invitation to get out of their office.<\/p>\n

With Cloudinary we can actually create all of these images dynamically, simply by changing the url of the image, applying custom parameters right in the image URL and building an image on the fly. The following images were created with absolutely zero use of image software and built to mirror the creative style of the images currently on williams-sonoma.com:<\/p>\n

\"Creative<\/a><\/p>\n

\"Creating<\/a><\/p>\n

<\/div>\n

Here are the details showing how these images were created:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Dynamic<\/a><\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Alternative<\/a><\/p>\n

Let\u2019s take a look at what\u2019s going on here a bit more closely. There are really two key parts to the URL. What the background image should be, denoted by<\/p>\n

'https:\/\/res.cloudinary.com\/demo\/image\/fetch\/https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg'<\/code>.<\/p>\n

And what the text block should say, denoted by 'l_text:Helvetica_14:ROSLE CHEESE KNIVES '<\/code>.<\/p>\n

All the other parameters define the size of the image, the text style, and things like that.<\/p>\n

You can read up about all of our on the fly image (and video!) transformations in our documentation<\/a>.<\/p>\n

You can play with this yourself, use this widget to build your own images!<\/p>\n