Connected World

Our Mission

As part of the launch of Sony’s new anthemic campaign - Sony Connected World - Fi created a companion website complete with entertaining product demos and information that served as proof points to the campaign. The site debuted at one of the world’s leading consumer electronics trade shows called IFA in Berlin, and then expanded for the main launch at CES 2013 in Las Vegas.

Create

Mobile

Camera

Listen

Mobile

Speaker

Watch

Tablet

Television

Play

Playstation

PS Vita

Let’s tell the world one story

in 36 languages on every connected device.

To appeal to a global audience, we built a flexible platform enabling the Sony publishing team to add content in 36 languages.

The Concept

Tell a simple story and showcase easy to understand examples on how to connect across all Sony devices.

Example sketches and styleframes

The wireframes walk us through.

A smoothly detailed handoff to the Design team is easily the most critical step on the path thus far. The wireframes ensure the well-laid plans meet full fruition.

The Photoshoot

To promote the beautiful suite of new products, we needed equally gorgeous photography.

Move the mouse to see the before and afterA few retouched images

The Final Design

Hitting on a design theme that served both classic and modern styles took several rounds of iteration. In the end, a muted palette won the day, with bold accent colors to highlight the different site sections.

Product Illustrations

The Technology

We built an immersive site experience to showcase all the Sony products allowing the user to view the product features from all perspectives.

New Technologies

To enhance the site experience, we used CSS3 transitions on all the interactive modules. For the product spins, we wrote custom javascript to create versions of the spinner with the content and markup. The mobile version was optimized using hardware accelerated CSS3.

Responsive Design

The approach was to control the fluid layout by using CSS3 Media Queries and making the site adaptive by setting appropriate break points. Respond.js was used for browsers that did not support CSS3 Media Queries.

Equalizer Dots

For the Listen page, we created a beautiful custom equalizer using HTML5 canvas. The equalizer on the site can be seen on the top fold of the Listen page but you can play or download a demo from our Fi Labs section here.

The Takeaway

Sony Connected World’s launch was received warmly at IFA, Berlin in which the experiential space proved to be an elegant backdrop, complementing the online suite of products displayed on large screens throughout the floor. When the site made its U.S. debut at CES months later, it was yet again a polished experience seamlessly integrated within an experiential venue.

In partnership with Microsoft to promote IE 10 and touch browsing, Fi created Explore Touch, an HTML5 site that lets consumers use touch gestures to mix audio files and create custom soundtracks with the swipe of their fingers.