Do It Like Nike: Creating The Perfect Branching Experience From Start To Finish

Some of the world’s biggest brands have found success incorporating branching interactivity into their video content strategy. Hypebae, in conjunction with mega-brand Nike, has perfected an interactive formula that’s seen sky-high engagement rates – by combining well-shot footage with enticing interactions and graphics. Take home a few pages from Hypebae’s playbook to be well on your way to creating your own engaging branded experiences. From storyboards to interactive shoot to final product, learn how to navigate creating a complete video experience from start to finish, that’s perfectly optimized for interactive. 

Storyboarding

In order for your branching video to be a success, it all starts with the storyboard. Creating a choose-your-own-path video requires an organized and clear storyboard in order to accurately map out all the paths in your video. This could be a relatively simple process, depending on the number of paths and decision points in your video. 

While creating your Storyboard, this is a good time to roughly scope the timestamps and length for each path within your video, so adding the interactivity afterwards is a breeze.

Hotspot length

Keep in mind that viewers need ample opportunity to click on your product in order to achieve the best engagement rate. In Nike’s video, each decision point is filmed with the intention of giving the viewer at least 10 seconds to make a decision as to which item of clothing they choose. This starts with the storyboard – making sure ample time within the footage is baked in for the decision to be made. 

Custom Hotspot

In this video, custom countdown hotspots inform each decision point. The box-style hotspots surround each item of clothing, enticing the viewer to choose an option. WIREWAX custom hotspots can be designed any way you like – whether a box style hotspot around an item, an icon or logo; the hotspot is an opportunity for a call to action that spurs viewer action.

For hotspots that follow a person or object, create a Sticky hotspot around the item you want to track. In Nike’s Style It Yourself experience, though the items of clothing are moving subtly on the screen, the slight movement of the hotspot in conjunction with the item of clothing works to draw in the attention of the audience, enticing viewers to click.  

Uploading a custom hotspot with WIREWAX Studio couldn’t be easier. After designing your SVG or PNG file, create a custom hotspot by uploading your file and setting the size and hover style into the Custom Hotspot designer in the editor. You can set the same hotspot design for all hotspots, or customize each one individually.
Learn more about WIREWAX custom hotspots here

Video flow

What happens when a viewer reaches the end of a branch that they’ve chosen? Make sure your storyboard and subsequent footage take into account the transition from one branch to another. Each decision point will lead a viewer down a path; after that path ends, consider where you want to bring your viewer next. 

In this video, time triggers are used to jump the viewer to the next section after the viewer has completed a path. For example, after the viewer selects a shoe, they’re then taken to the next appropriate section for choosing a top by using a ‘jump point’ time trigger.

It’s helpful to record the timestamps of your paths within an excel file or similar document; that way, you can easily refer to your document when adding your time triggers in WIREWAX Studio.

At the very end of your video, you should consider whether the viewer has the option to replay the experience. At the end of the Air Max Dia film, the viewer has the chance to replay the video from the beginning. At WIREWAX we’ve found that once viewers complete a path, they’re more likely to want to go back and see what other path’s they’ve missed out on. Your engagement rates will skyrocket as your viewers return back to the beginning to explore each path. 

Shoppability 

The final element to the Air Max Dia shoppable film is, of course, the enhanced shoppability. Here the viewer has a chance to shop each shoe they’ve chosen after they complete a full outfit. Custom ‘Shop Now’ static hotspots are placed in the video frame as the model shows off the completed outfit choice. These hotspots then utilize a click out directly to the product page, meaning the path to purchase couldn’t be shorter. 

The entire experience was elegantly housed on Hypebae’s owned website, driving traffic and elevating content impact for both brands.

 

Interesting in understanding what interactive can mean for your brand?
Start the conversation with our WIREWAX Studio experts now here.

TAGS:

interactive

shoppable

WIREWAX Studio

SHARE: