Shoppable Video: How We Built It At Omnia

As we prepare for the launch of our native mobile iOS and Android app to coincide with the Lake Fork stop on the Bassmaster Elites Tour, I wanted to take you through one of our most exciting new features, Shoppable Video.  We've had shoppable video as a part of our site for over a year now, but we are taking it further by doing our first live version.  We are simulcasting the broadcast of the Lake Fork stop on May 19th and 20th from 7am to 2pm CDT each day.

What's cool about doing this for live fishing events is that we will be able to add context as the angler is in their boat fishing.  We will be breaking down the products they are using from rod, reel, line, and bait along with which techniques they are using at that time.  Our team will be adding comments to each item that is mentioned to help viewers understand what's being used and why.

Here's an example of a non-live version of the shoppable video concept we did with Seth Feider last year before the final swing of the Bassmaster Elites tour.  Seth takes you through several different setups he had rigged and ready for the final derbies of last year.

Now that I've explained the concept and given a few examples, I wanted to take you through how we built this experience.

UX Considerations

The overarching goal was to keep the user in the flow of watching the video while serving up annotated pieces of content (lake info, species details, technique info) in addition to the specific product variant being mentioned on camera.  The user is able to scroll the page while the video minimizes in the corner and stays out of the way of the other content on the page.  Likewise, a user can tap into a product to learn more about it and decide to add it to their cart while still staying in flow of watching the video.  Additionally, if a user wants to jump ahead to see where a product is mentioned in a video, they can do that by tapping on the "jump to" link within each product listed.

CMS & Video Administration

We built a proprietary CMS that allows us to compose standalone videos and articles as well as create embeddable components for things like products, lakes and fishing reports.  Shoppable Video was a new first-order CMS object we created that incorporated a backend admin system that lets non-developers annotate the video with products at specific time stamps so that the product is highlighted as it is mentioned.  In addition to products, elements such as lakes, species, techniques and brands can be annotated at any timestamp on the video.

We'll Do It Live!

Join us on May 19th and 20th as we'll be simulcasting the Lake Fork event.  This has been an exciting build-out and Bassmaster has been a great partner in helping us test the live functionality over the past few weeks.

More To Come

This entire thing is homegrown and I couldn't be prouder of our team who built this out.  Nearly every member of our team from our buyers, merchandisers, CSRs to our marketing, product and engineering teams have been involved in iterating on this feature for over a year.  We're excited to see where this goes.  We have big plans for building out more capabilities around video and commerce.  Stay tuned!

Join us as a React Native Engineer or Lead Product Designer.  Or if data science is more your thing, we're looking for an ML Engineer.