Earlier on in our journey through creating shoppable video interfaces, we used “dots” on the paused video directly over the product they represented. This made it very explicit which product was which, but we eventually shifted to an interface that centralizes all the products to a side interface.
There were several problems with the “dots” approach. The colors in the video could change to just about anything, so there were some contrast/accessibility issues. When representing makeup, the dots over lips or skin sometimes would look like wounds. The biggest issue was that the video had to be paused to shop it – this requires the user to dedicate even more time to this content they are consuming.
When I first joined the company, one of the first things I suggested was moving the products to the side. Even in complex scenes it should be straightforward which products match the person on screen. We A/B tested it and found no drop in engagement. In fact users were 38% more likely to finish the entire video with the products off to the side AND able to interact while the video was playing.
I created the “bubbles” interface to group products by character. The information architecture made it natural to stack the data, preserving a clean interface: characters > products > product + similar products. Keeping everything over the video but not spilling out to the sides allowed the interface to scale easily with the display, giving a nice responsive experience. The subtle animation gave it a springiness that users identified as playful.
