ZaneRay Designs and Builds the Crusher Microsite

ZaneRay Designs & Develops Skullcandy Crusher Wireless Headphone Microsite

Nov 15 2016

Skullcandy is well known for their quality audio products—headphones, earbuds, speakers. But the biggest challenge for marketing these products online is that you can’t try them on and experience the superior sound quality they offer.

With the pending launch of their new Crusher Wireless Headphones, Skullcandy asked ZaneRay to design and create an online user experience that provided an impression of the awesome sound quality of their new headphones. Since the users of the site would not be wearing the headphones, the focus of the site would need to give visual cues that put the user into an immersive experience, with an audio theme.

The ZaneRay design team was up to the challenge and set out to work closely with Skullcandy to create a unique user experience equal to the brand and product. Based on the high quality imagery provided by Skullcandy, the ZaneRay design team came up with an immersive design concept to visually convey an explosion of sound as the initial user engagement on the microsite. ZaneRay created animated SVG borders that mimic sound waves from the Skullcandy motion graphics. The concept involved creating a unique hero area that tracks the mouse movement and scrolling to simulate a dimensional explosion of sound. On mobile devices this is handled with device orientation/movement. To further the visual experience, scrolling the page reveals additional imagery, product features, a full video that culminates the concept of “Stereo Haptic Bass”, and the ability to pre-order the product.

The ZaneRay team worked closely with the Skullcandy marketing team with a tight deadline to release a micro site to coordinate with the product launch. “We focused on a mobile-first approach to take advantage of what we could do with the orientation of the device so the user experience was an interactive discovery”, says Jeremiah Martin, ZaneRay’s Interface Director, and lead UX developer for the project. “Development involved going to a prototype early to experiment with our ideas and rapidly developing our concepts, which saved us quite a bit of time.”

Check out the Crusher microsite on Skullcandy.com.