In depth

Bridging the gap between analog and digital

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.


Type:

Experiences

Platform

Client:

Moog

Deliverables:

UI, UX, Concept

Moog - A platform for the godfather of synthesizers

Moog’s mission is to design tools that inspire creativity and joyful experimentation. Their products are known for their streamlined design, high-end build quality and impeccable analog sound.

Despite this, a rigid, specs-focused website posed a spiritual and cultural disconnect for the brand. It also inhibited their marketing team from leveraging the large amount of rich content they had at their disposal. As Moog prepared to release a new and exciting line of innovative products, they wanted a website that embodied their mission and reflected their values.

We created a modular system that’s cohesive yet flexible enough to support an array of content types. The site encourages exploration and provides users with enhanced customer service via features like live chat and custom integrations with Zendesk. The look and feel is inspired by the brand’s legacy and the linear, minimalist product design that puts usability before all else.

In depth

01

An instrumental navigation

02

Design inspiration

03

Photography with a music feel

Concept

We made the website scroll horizontally and a modular system with flexible heights to create the feeling of an equalizer.

Related projects

Something something
We creates joyful digital ideas, products, brand identities and experiences that connect the hearts of brands to the hearts of their audiences.