Can you imagine producing over 200 million images to sell one product? Well, that is precisely the problem many retailers are facing. As Amazon continues its domination of ecommerce and encroaches into more and more categories, finding ways to differentiate the customer experience and offers has never been more important.
Customization and personalization of products is one strategy that not only provides real differentiation from marketplaces but increases margins and reduces returns. There are three high-level areas to consider with product customization: logistics (e.g manufacturing), transaction (ecommerce integration), and merchandising (visualization). In this post I will focus on how you can overcome the challenges of visualizing a customizable product that could be configured to have millions of variations. Why is this important? If your customers can’t see what they are buying, they are much less likely to buy in the first place, and more likely to return the product if they do buy. Remember that in ecommerce, customers are effectively paying for an image.
Although I have many examples for visualizing the configuration of custom products such as furniture, room sets, apparel, and accessories, I thought Pokémon a bit more fun. I will show you how you can take a simple Pokémon ball and create hundreds of millions of custom configurations that can be personalized with messages and names.
See the Pokémon ball bulder /configurator here http://jw.demo.amplience.com/monogram/pokemon.php
This configuration provides over 20 million ball variants when you consider just the 4×64 color combinations when you add the Pokemon images, decorations you soon approach the 100s of millions variants, and if you personalize each one with two text fields, the number of combinations goes up even further.
With this many variations, generating customizations is fun and engaging but does mean for the experience to work you need a dynamic way to quickly assembly each customization. I’m going to use the Amplience Dynamic Imaging system as the method to generate the Pokéball variations as it can simply generate images for any ball configuration using a URL with parameters to set each variation.
To make this work I’m using SVG (Scalable Vector Graphics) as an image template for the Pokéball and Amplience to dynamically drive the template settings from parameters passed on the Pokéball image URL. I would also recommend using Inkscape to create your SVGs – Inkscape is an Open Source graphical SVG editor.
Using SVG we will build the Pokéball using of series of layers which apply effects and add content representing the configuration parameters passed into the Amplience imaging template.
The first effects we are going to apply is to colorize the top and bottom of the ball. Although in SVG you can represent a globe using circles and gradient, I have gone for colorizing a photograph of metal ball to get a realistic and high quality final output. To colorize an image in SVG use a filter (filters are custom effects that can be built by developers and applied to SVG elements) – I adapted the one that is supplied with Inkscape. To set this up I first converted my photograph of the metal ball into a greyscale image as the colorization filter uses the greyscale values to calculate the RGB value. I then cut the ball it in two and saved the top and bottom halfs as separate images, each with its own colorization filter.
The decoration is the effect that applies an image to the top half of the ball. This could be a transparent motif or an opaque image like a country flag. As we don’t want to spend huge amounts of time producing decorations that are designed specifically for a ball shape we will use an SVG filter which applies a displacement map to make it appear spherical. A displacement map is an image which uses Red and Green as values to distort an image on its X and Y axis.
In this layer we will add the band around the ball that separates the colorized halves of the ball, the Pokémon image in the center and the text on the band.
We will draw the band using standard SVG paths and use the drawings fill parameter to customize the background color.
Once the band is in place we can add the text placeholders. To make the text look like it is wrapping around the ball we’ll first create two curved paths in SVG and then add the text fields to the path. The color and values of these text fields with be set dynamically by Amplience from values passed in the image URL.
Now for the final piece of content – the Pokémon image in the center circle of the ball. As the Pokémon images we will use will have different aspect ratios and they will certainly not be round, we will apply a round clipping path in SVG to the image before we place it in the center. Now we can place any Pokémon image into this placeholder using Amplience.
At this point we have all of the configurable effects in place but before we finish there are a couple more treatments we need to do make the finished product look more realistic. The first effect is to put more depth by adding shading to the image that gets washed out during colorization. To do this we apply a monochrome filter to the image using the greyscale image of the ball to define the level of shading.
The final effect to apply is the mask. I use the mask to tidy up the image, apply some further highlights and to place a shadow. Now for some wizardry
Once the SVG of the Pokémon ball is ready we add the additional metadata to the SVG that Amplience can use as parameters to apply the effects dynamically (i.e. change the top ball color, bottom ball color, text and Pokemon Image automatically). In Amplience this SVG metadata is termed as substitution rules. For more details see: http://playground.amplience.com/personalization/#/intro.
Now we simply upload the SVG into Amplience, publish it to the imaging service and now we have the ability to generate 100s of millions of possible Pokémon Ball configurations on the fly.
With this hugely powerful product image configurator the next step is standard web development that wires the product image URL with your product options. For this demo I built an example which comes with color pickers for all colorizations, Pokemon Images and 10 decorations.
As any product configuration is an image, it’s easy for me to share any product configuration I like – I have used the AddThis plugin to allow sharing to Facebook, Pinterest and email, allowing customers to share their personal product designs with their network.
For more information on Dynamic Imaging and product configurators go to our Product Customization page.
Call toll free 866 623 5705
or +1 917 410 7189
Call +44 (0)207 426 9990