Case studies
Legacy: Sony Connected World

Connected World

Showing how SONY products work seamlessly together.

Scroll down

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

  • Listen

  • Watch

  • Play

    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 Photoshoot

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

Move the mouse to see the before and after
A 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.

Look at all four different designs

Responsive Design

Our multi-column layout with fluid grids and images scales from large screens down to small mobile sizes by stacking columns vertically.

Product Illustrations

Custom product illustrations highlight some of the product features.

Drag to see the illustrations for each topic

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.

We Sony

Sony Connected World
at IFA 2012
Event Credits:
General contractor and planning:
Olaf Becker, Munich/Frankfurt
  • USA Today

    USA Today

    Site Redesign

    This is the story of redesigning one of America’s most popular news sites and boldly reimagining how users today interact with news online.

  • Nickelodeon

    iPad App

    The Nick app is a digital tapestry of all-things-Nickelodeon currently available on the iPad in the U.S. Soon after launch, the app trended as the #1 free entertainment app on the iPad.

  • Explore Touch

    Explore Touch

    HTML5 Site

    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.