Visualizing Website Page Component Performance

Earlier this year, I did a bit of work with an analytics team working on an e-commerce site. The site allowed for a wide variety of layouts, which gave the retailer a lot of flexibility to experiment in finding the optimal page composition to maximize conversion. One of the challenges was how to evaluate the performance of components based on their page placement; some solutions included a dashboard placing numerical data on top of illustrative page layouts, but a limitation of this was that you could only see the performance for components of a single page layout at a time.

After thinking about the challenge, I came up with this potential visualization:

It color-codes components based on their relative performance (green = good, blue = average, red = poor) and places components in their relative spot on the page. For example, the layout in the top left shows the performance of five components of varying widths and height that were positioned in the top left section of the page. By distilling detailed numbers down into colored boxes representing performance and placement, one can visually identify the areas and component sizes that tended to outperform others (e.g., larger components in the top left corner outperformed components in the top right corner).

Had fun with this exercise, maybe at some point I'll get a chance to put it to use.