Samsung Music

Samsung have teamed up with Bang & Olufsen for the speakers in their new phones. The Microsite highlights these attributes, but beyond the obligatory slick brochureware we were asked to create an interactive component that would engage visitors and reinforce the association between Samsung and Music.

In order to facilitate the rollout into 30 territories the solution needed as little copy as possible.

What better way to create the association than let you compose music. Taking the Japanese Zen Garden as a reference, we imagined a minimal, interactive music tool enabling you to compose and create personalized music in a 3D soundscape. Fly through it, Then save it to the gallery or export it to your blog.

Instead of Zen Garden’s stones we use coloured blocks that dance to the sound and rhythm of your music. All controlled by code with an infinite number of possible combinations, the site gives a unique experience every time. A space to be filled with your imagination.

UNIT9 – The Making Of Samsung Music

As said, Samsung had teamed up with Bang & Olufsen for the speakers in their new phones. The Microsite highlights these attributes.

Beyond the slick features overview we were asked by Mather to create an interactive component that would engage visitors and reinforce the association between Samsung and Music. The brief required us to create a concept that would work globally, and not rely too much on copy that would have to be localized.

We approached this task by addressing the product benefit on a very fundamental level: Why would you read marketing copy about music related product features? Instead experience the joy of composing and playing music! Engage with the world of 3D sounds.

Our vision was to build an interactive music tool enabling you to compose and create personalized music. Taking the Japanese Zen Garden as a reference, we imagined a minimal, simple environment, which would allow you to express yourself by combining a few shapes in the way you like.

Instead of Zen Garden’s stones we planned to use coloured blocks that would dance to the sound and rhythm of your music, as controlled by code. With an infinite number of possible combinations, the site would show give a unique experience every time, a different room to be filled with your imagination. Save your composition to the gallery and export as html to embed in your blog or website.

Storyboard & Animatic

In order to convey the idea clearly for the pitch, Interactive Director Takayoshi Kishimoto created a frame by frame story-board of the user experience.

He then developed this into an interactive animatic to further communicate the essence of the
interactive experience.

Interactive prototype

To continue forming a clear idea of the future site we coded a working prototype. As the vision of a rich interactive experience cannot be conveyed by Photoshop comps alone, the combination of story board and prototype helped forming a clear idea of the future site, shared by UNIT9, agency and the client.

Air App – Interactive Design, Animation and Development

As the Samsung music is all about harmony, we wanted to use colours that would harmonize into a relaxing experience, colourful music blocks to elicit your play instinct and smooth movements to generate organic equilibrium of sound, shapes and colours.

In this context, our interactive designers and animators had a tricky task to solve – creating a premium look which almost entirely depended on experimental code: What would the sound shapes look like when created by the 3D engine? How could they dance to the music? How could the code-driven music equalizer evolve?

In order to facilitate and expedite both the design process, and the design approval process we placed as much control as possible with the creative team.

We developed an Air app. An editor that allows a creative (with a mild Geek-streak) to create a huge breath of sound shape gizmos and really taylor the interactive experience. The levels of sound are the driving impulse. They affect the frequency and amplitude of the fluctuations. Import a sound for the sound shape to move to, import an animation xml file to edit and away you go. Change numbers in a control panel until happy with the desired result.

Sound Design – How to make the Soundscape unique for every user, every time?

When entering the Soundscape you choose a phone, and with the phone you pick your music style: Ambient, Rock or Trip-hop. You can grab 30 sounds and combine them any way you want into soundscapes of up to 6 sounds. This adds up to more than 40,000 possible combinations, and that’s not even taking volume variations into account.

Making all these sounds work well together was a challenge. If tempo and pitch could have varied, it would have been easy. However in our case, we needed all sounds at exactly the same tempo, cut up into loops that harmonized with one another. We were able to plug the sounds straight into the prototype, so we could try several settings to balance sound levels before going too far with the actual development of the Soundscape.

Specification

In parallel to story boarding and interactive design, we developed specifications of information architecture, localization engine, XML and CMS. In addition to that, some time and energy was spent in developing working prototypes.

To roll the website out over 30 countries as smoothly as possible, the client required the localization process to be partly centralized, partly local. UNIT9’s solution enabled the agency to centrally upload fonts, product imagery and additional animations (in SWF format).

In the various markets, local country managers would choose from the assets provided by agency and use the CMS to translate the UK template, adjust font size and alignment. Yates Buckley, Technical Director:

“This type of preparation is key. The site is actually quite complex – connected to special server functions, and fully content manageable, supporting a large amount of languages. It was very satisfying to have such a controlled production for this complex site.”



Quality Assurance and Deployment

Usability testing outside of the project team contribute to keeping the website handling intuitive.To ensure maximum level of quality, UNIT9 used a multistep QA process based on detailed test plans – ensuring that all site interactions were checked across all agreed browsers at high and low bandwidth, prior to the live push of both website and MySpace widget.