Bad Guy Goes Interactive with WIREWAX Studio
January 29th, 2020
Our creative team is behind the scenes, powering the best interactive content ever seen on planet earth. Gain inspiration for your next big interactive masterpiece by checking out our series on recent WIREWAX in-house creations, and read on for a sneak peek into how they came together.
Our creative team has done it again; reinventing the music video as a complete lean-in experience and celebration of music and artistry. Fresh off Billie Eilish’s five-Grammy sweep, watch as her now-iconic Bad Guy music video gets elevated through the use of eye-catching hotspots and overlays, leaving fans hungry for more.
The custom hotspot uploader in WIREWAX Studio means giving our creators complete artistic freedom over style and brand of their interactive videos. Our creative team, well-versed in graphic design and animation programs alike, knows how to take full advantage – letting their creativity soar with their use of hotspots and overlays perfectly suited for each video.
In Bad Guy, custom created interactive hotspots appear throughout the video, giving insight into everything from tracklists to shoppable Billie Eilish merch – bringing context, commerce. Hoverable hotspots throughout the video pop up with tidbits of Billie trivia for die-hard fans to devour.
One key strategy for Bad Guy interactivity is the use of overlays that don’t pause the video; rather overlays can appear on screen while still letting the viewer keep watching the main content.
When designating an overlay to appear as non-pausing, first create your hotspot and designate the hotspot to ‘open an overlay’. To the right of this field is a toggle for ‘pause video’. Toggle this option ‘off’. Then, design an overlay that optimizes both for the content in the overlay, and the main video. In this video, the creative team employed the use of overlays on the left-hand side of the video to display info on the tracklist and available merchandise for browsing, without covering the whole screen.
Another strategy employed in this interactive music video is the use of ‘hoverable’ hotspots which reveal fan trivia just by the viewer hovering over them – no clicking involved.
To create these show-and-tell tidbits, first the Creative team created two SVG’s – one for the initial state (what appears on screen) and one for the hover state (what appears when your mouse is placed over it). This allowed them to cleverly reveal facts and info on Billie without the use of overlays. After the two SVG’s were designed, the creative team created a new Custom hotspot (when choosing the hotspot style, click the first option labelled ‘custom’). When creating a custom hotspot, two tabs will appear at the top – initial and hover. Under each of these tabs you can upload the separate images for each. Try playing with the size of each image to create a grow or shrink effect – or, as seen in this video, keep them both the same size to allow the hover effect to be the star of the show.
The last tactic – but certainly not least- employed by the creative team is clear and literal calls-to-action on each hotspot. Whether clickable (“Click to see Billie’s merch) or hoverable (“Hover for the answer!”) the hotspots leave no doubt as to what action the viewer should take.