Concept to Code: Making the Sony Be Moved Site

live-cap1

Today we have a guest post by UX Lead Jason Sack, on the making of Sony’s lauded “Be Moved” interactive site.

Concept to Code
Making the Sony Be Moved Site
By Jason Sack


Guinea Pigs

Last September, we were asked to build a site for the new Sony brand work—a destination where the various parts of the campaign would live. The dreaded word “hub” was even uttered at some point. The bar was set high for the campaign, and the site had to be an experience in its own right.

Sometimes things start out a little messy. But that doesn’t always have to mean they will end up that way. Sometimes it all comes together. That’s what happened with the Sony Be Moved site, and here’s how it went down.

chicken-scratch-sm

The site had to be cool enough to catch the attention of hardcore fans of electronics and entertainment. It had to house the campaign spots and digital executions. It had to speak to the products featured in the campaign. And it had to be emotionally engaging. After all, the campaign itself was focused on how Sony products enable direct emotional connections with the things that we care about.

There were a variety of stories on the table from Sony. Some spoke generally to their product-development process, and some focused on individual products. They were stories of innovation, collaboration and the pursuit of quality. There were additional ideas about how the whole is greater than the sum of its parts. And finally, the narrative of artists and engineers working together emerged as another pillar on the Be Moved platform.

Like I said, it was a little messy.

Creative Development

We started pushing all the loose story threads through the artists and engineers filter. We established a mood that was emotionally rich, but still sophisticated and cool. And as for the UX, we decided that we would flip the normal hierarchy of a brand site. Instead of a story leading to the products, we would let the products lead you into the story. The sum-of-the-parts idea informed the way products exploded and reassembled. It showed how diverse and sometimes seemingly disparate pieces can add up to something great. We agreed to use this mechanic as the spine of the site.

sketch-w-mockup

We shared concept boards and laid out the content in wireframes to show the hierarchy and sequence of the stories. We hacked together a quick motion study in Keynote to show how the experience would unfold.

mockup1

The smaller stories sprinkled throughout the experience were the subject of much debate. They were ultimately presented as hot spots that would appear and disappear like fireflies. We talked about bringing them forward more explicitly and leveling out the hierarchy, but felt that would damage the focus and simplicity of the experience. We instead used them to show there was more to learn, adding some depth and mystery to the experience.

The key frames showed the main story behind each product. We had long deliberations about how the interaction would work for these frames. Dialing in the pace of the scroll interaction here was important. We went back and forth about the balance between user control and physics. It was important to provide some emphasis in these moments without totally taking away the feeling of control from the user.

transitions

The side navigation was also a hot topic. It was absent in our initial versions, which used scrolling as the only way to move through the experience. The nav forced us to look at the relationship between the products and the stories again. We stuck with the concept here, letting users peek into the stories through interesting lines instead of using obscure product names as labels.

Parallax Is Just a Technique

We were focused on using a simple, natural behavior to move through a beautifully told story. Scrolling was the right technique for the job. Knowing it would be a heavy site, we needed to avoid any janky performance as much as possible. Sequencing the way the initial copy built in bought us some time to load images. Sure, the tech nerds among us geek out on server requests and page weights. We can get pretty dogmatic about best practices and bandwidth. But as regular people, we all experience media through an emotional filter. Since our goal was to change the conversation about Sony by immersing visitors in an emotional experience, the trade-off was made without much hesitation.

We wanted to push the mobile experience as far as we could so it would be equally engaging. Because we were using image sequences with a defined aspect ratio, the portrait mode was problematic. By using the landscape mode, we were able to maintain the rich interaction and imagery of the desktop site.

mobile-web-ux-sm

It was an honor to be a part of such a fantastic team—quality people across the board. Everyone was proud of the work, and the public response to the site has been amazing. I’ve rarely seen such a great reaction to a brand site. Visitors seem to be equally engaged with the story and the experience, and the conversation around the brand has changed significantly. If you haven’t seen the site yet, scroll away. We’d love to hear your thoughts.

Credits

W+K Portland
Creative Directors – Mike Giepert, Dan Hon
Copywriters – Charlie Gschwend, Claire Bateman
Art Directors – Devin Gillespie, Robbie Rane
Digital Creative – Claire Bateman
UX Lead – Jason sack
Interactive Producer – Tricia Huetig
Director of Interactive Production – Pierre Wendling
Account Team – Trish Adams, Diana Gonzalez, Nick Larkin
Strategy Director – Anibal Casso
Interactive Strategy – Justin Micklish, Laura Hall, Matt Hisamoto
Comms Planning – Lisa Christy
Executive Creative Directors – Joe Staples, Susan Hoffman

Development Partner – Assembly Ltd., New Zealand
Executive Creative Directors – Damon Duncan, Matt Trott
Technology Director – Rhys Dippie
Lead Developer – Jeff Nusz
Producer – Amanda Chambers

Leave a Reply

Your email address will not be published. Required fields are marked *