Shure Design Studio

Design Studio

Challenge
Help musicians turn their microphones into an extension of their personal style.
Solution
Develop a web platform that would allow musicians to create unique designs for their wireless microphone handles in a 3D environment.
Results
A virtual design studio, used by musicians in 150 countries, capable of handling customization, printing, and shipping.

Microphones are personal. As a world-renowned manufacturer of iconic audio products, Shure, Inc. has been producing quality microphones for decades. They wanted to offer customers the opportunity to add a little of their individual style to their microphones. We worked with Shure to bring this idea to life by developing an all-in-one design studio where musicians could create unique designs for their microphone handles before purchasing them.

Technology

Development in the Spotlight

We used WebGL to create the 3D rendering of the customizable mic handle. This allowed us to target graphics cards to create superior images, and let us leverage Three.js — a JavaScript library used to create animated 3D graphics on browsers. We also took 360 degree photos of the microphone heads to make sure that the heads looked great from every angle.

3D Rendering

Like a Natural Mic

We wanted the mics to look and feel just like they would in real life. To do this, we created three maps for each mic — a spectral map, bump map, and texture map — which allowed us to control the way the handle’s skin and texture looked, and to simulate the way light interacted with the design as it moved.

User Interface

A Futuristic Feel

The studio's interface 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. Day and Night mode help users see their unique design in its best light, no matter how light or dark that may be.

Design

Pre-Loaded Looks

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. Shure gave us a great deal of freedom in creating the designs, allowing us to use our illustration skills to their full potential.

Designing for Microphones
Blair Culbreth, Director of Visual Design

Development

Watch it Live

We wanted to let users to see the changes they made reflected instantly on the rotation of the mic handle. When we discovered that real-time 3D rendering would be possible, we adjusted the UI to take advantage of this "live preview" capability.

Summary

Our Design Studio for Shure makes it easy for any vocalist, whether amateur or pro, to design their own personalized microphone from one of the top manufacturers in the world. The intuitive UI and live 3D rendering lets users add a touch of style to their microphones via an uploaded illustration, a selection from our library of pre-designed looks, or a new design conceived from scratch in the Studio.