Translating physical into digital through design

Robert Moog was an inventor and pioneer in electronic music. The company carrying his name has been inspiring musicians and pushing the boundaries of technology since the 1970’s, creating the market of analogue synthesizers and releasing legendary products such as the Minimoog. Moog’s synthesizers have been widely used ever since by musicians like The Beatles, David Bowie, Prince to modern acts as Deadmau5 and Dr.Dre.

Now if we fast forward to today, the Moog’s analogue synthesizers are back in vogue as many musicians are trying to seek out some of Moog’s iconic synthesizers. In early 2015, Moog came out with the surprising news that they are releasing limited and newly manufactured versions of three of the most popular modular synthesisers ever created – Model 15 from 1973 being one of them.

Model 15, which was only manufactured in 150 units and took three whole years of research and design to develop. It contains of 14 handcrafted modules and is designed to focus on speed, creativity and simplicity.

In result, Moog approached North Kingdom with a design challenge to transform this iconic synthesizer into a digital product.

An original Model 15 was shipped to our Stockholm office to ensure the highest fidelity in every detail, from scratches on the panels, to rusty and distorted screws.

Because visually, it was all about the random details – such as stress artifacts and variation on the lettering. Not a single label from the original modules are perfectly printed on to the panels. The labels are made by scanned assets from the handcrafted panels and remade in photoshop with perfect care to keep the original look.

The metallic dividers that separates each module had to be different to the ones next to it. Scratch marks and rust are added to the physical components, which let to three stages of “aging” were made throughout the process when making all necessary assets.

This was needed in order to make a final decision of the aging state that the model 15 would appear like. Since it’s based on a 40 year old maschine, these randomly (but well thought through) aging effects were very much needed in order to resemble the original synthesizer as it would look today. The effects also make a huge difference in realism and makes the finished product less static as many of its competitors that appears in the app store today. And to take it even further into realism, NK lined up all necessary elements that exists on the Model 15 in a horizontal line to create variations based on the light source. Apart from this, NK also made variations of each light source and made variations from that. Which led to a huge amount of assets in order to make the skeuomorphic realism even more correct.

Assets had to be delivered separately as well as a compositional file due to the fact that future modules will be released as ‘in app purchases’, moog would need all assets mapped out separately and well documented for future use in order to create new modules.

The design of the future in app sale ads were very much inspired by print ads from the same era as the Model 15 came out – gradient background with focus on beautiful type and vintage colors, with a photograph of the module and rough edges as the paper ad aged from its early years.

Since the main interface of the app is surrounding the synthesizer itself, using skeuomorphic design was crucial in order to resemble the classic maschine in detail. However there are elements within the app that doesn’t go well in skeuomorphic appearance due to interactions and logic physics. NK needed a main interface that consists of controlling main features of the app, such as presets, bpm (tempo), settings, and shortcuts to quickly access keyboards etc. These functions does obviously not exist in the physical model. By UX standards these functionalities should be easily accessible from any point – which lead us to a sticky top and side bar, always visible and accessible when interacting within the synth interface. Since these elements are sticky and appears on the same places even though the user pans around the modules, it would be illogical and awkward as an experience to keep this skeuomorphic as well – floating on top of the modules. There’s also popups & takeovers that would have the same problems if designed in a skeuomorphic style. This led us to the conclusion to design the physical synth itself, together with keyboard controllers and sequencers with a skeuomorphic design as close to reality as North Kingdom could. But then also use a flat design as a contrast for the features that doesn’t work as a physical object / interaction. However NK didn’t want to use too much of a flat style since it would potentially be risky in terms of being “boring” next to the realistic looking synthesizer. Placing your mind back 40 years make you think back at the classic CRT monitors that would work great in combination with an old vintage machine like the Model 15. That’s when NK started to play around with dark, dimmed down backgrounds and single colored type and glossy overlays. To take one step further back to the 70s, NK added details such as glitch defects within the flat elements (think Alien Isolation & the Fallout games), which worked wonders when creating realistic transitions for overlays and popups. In this way, weNKunited the skeuomorphic, realistic looking knobs and buttons that have aged years, together with a ‘non boring’ flat interface without the awkward contrast.

What could look at first like a heavy skeuomorphism exercise – recreating in digital form a replica as close as possible to the real machine – was in reality a much tougher challenge.

In fact, physical elements like knobs and cables had to be integrated and balanced with digital additions like tutorials, the digital store where users can buy extra modules to their synth, demonstrating once again how the borders between the digital and the physical world have become more and more blurred.

What is more, physical behaviors had to be translated towards an appropriate digital interaction, one that wouldn’t interfere with the user experience and expectations. For example the action of adding or switching cables between ports had to recall the physical behavior and visual rendering of a cable, while taking advantage of the digital medium (highlighting available ports and snapping into place interaction).

After many hours of design, this is the result: an experience optimised for tablets but also suitable for smartphones for a truly mobile and portable tool. It’s a fully responsive musical experience that our insight driven design process makes possible.What once occupied a considerable wall space now fits in a pocket.