VueStudio: Video Marketing In The Making – An Insider View

The growing culture of video marketing

 

Video marketing is taking over the web and is proving to be one of the most expensive forms of advertising. With 80% of all internet traffic being attributed to video (Cisco), imagine what you could achieve if you capitalize on even a fraction of some of your proprietary or fan generated video content. This doesn’t include only your website or blogs, but also includes publishing partners and media outlets. Imagine being able to connect your shoppers to the products they really wish to buy through their favorite TV shows, movies, or music videos– straight out of the videos without having to spend extra time navigating and searching on other sites for what they saw!

With this growing culture, the bigger question is how do you make the most out of the investment in the video content?

We, at Vue.ai took a stab at answering this question and a simple idea such as “Shop the Runway” led to the development of a new product.

The beginning of the journey

 

Does the phrase “See now Buy Now” seem familiar?

 

In 2016, Burberry revolutionized the  idea of shoppable runways that made the collections available for sale immediately after the show, giving fast fashion a run for their money. Burberry’s revolutionary idea struck a chord with us immediately. Most of these live runway shows are usually open only to a select group of viewers  and the rest of the world watches these shows via videos online. This led to the thought of extending the concept of “See now Buy now” from runways to videos. The more information a shopper has while interacting with a product, the higher the likelihood for conversion. After all, the best place to convert, is the place where the user has maximum context.

When a prominent “add to cart” button is presented conveniently as the video plays along,  shoppers can seamlessly add products they can instantly connect with to the cart directly, without having to leave the video screen and go through the navigational troubles of locating those products otherwise. In essence, the  path to checkout is shortened.

Painting the vision

 

At this point we knew we were heading towards creating “shoppable videos”. Usually a process like this starts with user and market research, but the best part of designing a product for a company that’s completely technology driven especially using  AI is that, the vision of the product drives the technology.

We started out with a simple concept of how a shoppable video experience can be implemented without looking at what was out there already in the market. We wanted to ensure that  we were not limiting our thought process or our tech capabilities to what was already being implemented.

Our first version of shoppable videos (Source: VueStudio)

A brainstorming session, picking up a few of our favorite videos and sketching some ideas on pen and paper helped us get some first level insights on how we ourselves shopped online and what we typically look for in fashion videos. With a better understanding of not just our requirements but also general shopping behavior, we wanted to transform interactive videos  into a journey that our customers can monetize. Starting from curated to real-time video content, we went about defining flows that could make sense across different platforms.

Idea 1 : Shoppable video ideas on brand channels (Source: VueStudio)

Idea 2: Search for any URL in a website and get shoppable video recommendations (Source: VueStudio).

Idea 3 : Shoppable videos on a Chrome Extension (Source: VueStudio)

Idea vs reality

 

An inspiration for a product can come from anywhere but, it’s more complex to build the small building blocks to turn that inspiration into reality. The success of a product is collaboration and in our case, it was about how well we could marry our tech capabilities with the vision we were setting for ourselves.

To get us closer to this goal, we initiated conversations with our computer vision team to give them an understanding of what our wants were from the technology and to evaluate the  the possibilities for building a viable product. The key takeaways from the conversation were that we would focus on building experiences for curated videos first, which would then set the base for building out a more real-time solution.

Choosing what not to do

 

We had a game plan, a vision and  the tech was shaping up, but was it sufficient to build a product? What were we doing to set ourselves apart from our competitors? In order to evaluate our position we set out to compare products that claimed to do something along the same lines of our vision.

What we saw were an interesting set of tools that helped brands manually curate their shoppable content with almost no automation efforts involved. We realized we were already a ahead of the curve in terms of offering. This whole exercise also helped us get a fresh perspective on how we could take our designs forward.

Pulling the weeds

 

Looking at the market, what seemed simple at first, proved to be more complex than what we had expected. We split the shoppable video design process into parts starting with where the products should be placed, as that would give us a better insight into the how the user would interact. The first version saw two different approaches to the experience:

  • Placing the product on the timeline and having it appear at the shoppable frame and disappear a few seconds before the next frame.
  • Placing a clickable pointer on the shoppable items as the videos play.

Option 1: Placing the product on the timeline and having it appear at the shoppable frame and disappear a few seconds before the next frame (Source: VueStudio)

Option 2: Clickable pointer on the shoppable items as the video plays. (Source: VueStudio)

We had the video mock ups, up and running and gave it a spin ourselves, the only objective being that we had to add a product that we liked in the video to the cart. Initial thoughts from the team were –  “Oh wait, that pop up on the timeline just throws me off.”, “How do i add the product to the cart if I don’t get to see it again?” or “Should i watch the video or try figuring out a way to click the hotspots?”. Clearly, this was not solving the problem we set out to solve, rather we ended up  repeating the fundamental problem – interfering with the viewing experience. This meant another round of breaking our heads to figure out a solution.

Making Vue.ai’s Shoppable Video solution happen

 

At this point two requirements were must-haves: You can’t interfere with the user’s viewing experience and the user must be able to access the products on demand. The solution was hiding in plain sight and when we did see it, it hit us like a brick on the face! We simply had to visually disassociate the video from the list of products while still retaining the interactions that informed the user as to which product was coming up in which frame. This time around we wanted a wider audience to try out what we put up and invited our entire office to give it a go and we had an overwhelmingly positive response with inputs on how we could fine tune our interactions. We changed the animations such that there will be a screenshot of the video frame which drops on to the product list. This was it! We had the missing piece of the puzzle! Just some final refinement and yes, we were ready to go!

Final version of the shoppable video (Source: VueStudio)

Moment of truth

 

The product is ready. We pitched it to one of the leading denim brands in the world and they loved the demo as we hoped they would. The icing on the cake was their feedback that “This was the best experience that they had seen so far.”

We’ll discuss more about designing the mobile experience and customizing based on client needs in the upcoming article. Stay Tuned!