Moog Music came to us for the redesign of their website with an aim to spark curiosity in the younger generation and make it easier for Moog to connect with their audiences on a daily basis. The goal of the new website was to highlight the products themselves while bridging the gap between the analog and the digital world of Moog. We wanted to create an inspirational hub filled with functionalities like live video streaming, instant chat and in depth articles all helping to, once again, establish Moog's position as a true pioneer in the world of synth.
An instrumental navigation
The vision and goal was established early in the process - create a website with a clear nod to the iconic instruments and embody the aesthetic and heritage of the brand. We established five guiding principles that the website and Moog instruments should have in common; modular build, subtractive synth, filters, left to right exploration and most importantly no hidden interactions. These became our guiding principles throughout the project.
The structure of the website was inspired by the equalizer with a horizontal scroll and a modular system with flexible heights. Navigating Moog.com should feel like playing an instrument.
Design inspiration
The Moog instruments not only inspired the concept, navigation and interactions but also became the foundation for our visual exploration.
We wanted the website to share the qualities of the 60’s paired with the characteristics Moog are known for - streamlined design, high-end/quality build and impeccable analog sound. So we took our inspiration from a diverse range of mediums; electronic music posters, original Moog ads, product visuals, music scores and of course the products.
The controls on the Moog synthesizers have a very characteristic look and are used for both high level navigation and style inspiration.
Vintage posters and Moog original ads
We started to mood board based on our guiding UX principles and using visual references mentioned. We wanted the site to feel like you were in the studio or at the club. If a site could wear shades and smoke cigars we would have gone there.
Below is a small selection of style explorations we did and how we evolved and simplified the concept. Starting with a literal translation and ending on a simplified and more sophisticated design direction.
Photography with a music feel
In addition to branding and website, we also worked on image style to set the right tone and mood of the site. We wanted to give the products personality but still keep the sophisticated style and simplicity we were looking for. To achieve this balance and to ensure the visual process was iterative, we also set up a small photo studio in our office.
We started by drawing sketches for a couple of photo style concepts. Some were in very clean and modern environments experimenting with the natural materials of the products - woods and metals, some static and some cinemagraphic.
However, after a couple of tryouts in the photostudio the style didn't resonate with our vision for the photostyle. It was cool but it felt too dark and wasn't highlighting the quality of the products. We not only wanted to ‘feel’ the music in the products we also wanted to show the hand built quality and craftsmanship of their synthesisers.