Design Studio

Microphones are personal. But when it comes to choosing the right mic, most audio pros and enthusiasts look for quality, not personality. Shure, Inc. — a world-renowned manufacturer of iconic audio products — knows a thing or two about quality. With a reputation for setting the standard for superior music equipment for nearly a century, Shure wanted to raise the bar by raising a simple question: What if your wireless microphone could be as unique as your voice? We worked with Shure to bring this idea to life by giving musicians an all-in-one design studio where they can create their ultimate microphone look, and then get it purchased, printed, shipped...and ready to rock.

  • Challenge

    Provide musicians with the means to turn their microphone — the tool they trust to amplify their voice — into an extension of their personal style.

  • Solution

    Develop a cohesive web platform that could power the start-to-finish process of personalizing, purchasing, and shipping a custom wireless microphone handle from start to finish.

  • Results

    Over 20K people across more than 150 countries have used the custom application to design one-of-a-kind wireless microphone handles in a 3D environment.

How we did it.

  • Development-First Strategy

    Our development team chose WebGL as the software to create the 3D rendering of the customizable mic handle. This allowed us to target graphics cards to create superior 3D images, and also let us utilize Three.js, a JavaScript library used to create animated 3D graphics on browsers.

  • Designing a Design Environment

    The interface we created has the feel of a futuristic workshop: sleek and glassy, with chrome and neon effects, and a subtle grid paper background. These details keep the atmosphere inviting and interesting, but their ultimate goal is to support the user’s microphone creation.

  • Usability

    To create a seamlessly rotating and realistic mic image that feels natural to the user, we created three maps for each mic that control the handle’s skin and texture, that tell it what spectral light should be reflected as it rotates, and how high off the material the light should bounce.

  • Creating the Perfect Mic

    While we were satisfied with our 3D handle customizations, rendering the detailed mic heads proved more complicated. We decided to photograph the mic heads and merge those images with the rendered handles.

  • The 45 pre-designed illustrations available in the Design Picker were custom-created by our design team — including transparent images and patterns users can combine to make a variety of color combinations. The freedom Shure allowed us in creating these images gave our team the opportunity to experiment and utilize their illustration skills.

    Designing for Microphones
    Blair Culbreth, Senior Designer
  • When we discovered that real-time 3D rendering would be possible — allowing users to see the changes they make reflected instantly on the seamless rotation of the handle itself —  we adjusted the UI to take advantage of this “live preview” capability, shifting the Design Editor to the right and keeping the 3D mic front and center.

  • We had to develop a solution to transfer the design from the screen into the user’s hand. We used ImageMagick to recreate the user's design on the server, so we could hand it over to the sleeve manufacturer.  We integrated a purchasing module using the e-commerce platform Shopatron that lets the manufacturer access the design file for production and pull customer shipping information.

    Pixel Perfect Text Between HTML5 Canvas and ImageMagick
    Nate Hunzaker, Senior Developer