Sony

Problem/Goal:

Sony's Global Design Framework consolidated regional web properties in 110 countries and 30 languages into a single platform with a globally shared backend, CMS, and responsive design system.

Inspired by Sony's innovative past, this project aimed to carry Sony into the future with a modern and unified user experience across the globe while also providing important efficiency benefits to the business.

Ideation:

Module Based Development

Flexible system of modules that could easily be rearranged and customized, per page. Our system consisted of a carefully designed library of interaction patterns and content layouts, that could seamlessly stack and rearrange on a page.

Sony Reusable Hero Module Variants

Global Design

Design direction for Sony meant appealing to the cultures and needs of the entire globe. Our web product served 110 different countries and was translated into 30 languages. We strove for universal appeal with design, experience, and content while customizing per locale as required.

Sony website is considered one of the largest responsive design efforts undertaken in the digital space today.

Deliverables:

I worked as Front End Developer at Sony’s global web transformation project. My work included adding features via HTML5/CSS3/JS development, platform support, bugfixing, and assisting UX and design teams in planning upcoming feature enhancements.

I was responsible to gather requirements from the creative team to estimate and analyze specifications time for development along with working in the agile scrum process.

During this project, I had the opportunity to work with colleagues all over the globe in agile environment practice with weekly sprints, daily scrums, Jira tracking, and retrospectives.

Hand-coded custom modules, added global features, managed codebase, & debugged the site across multiple locales using Jade, Node, JS, HTML, CSS and JSON.

Sony website various design system interaction modules

Responsive Design

One key aspect of the Sony design system was to support multi-screen browsing experiences. The challenge in this task was strategically designing system level flexibility into components and modules that could react to devices and screen sizes. It was just as important to support a viewing experience on touch devices as it was on the desktop.

Integrated responsive web design techniques and modern web technologies – HTML5, CSS3, Require.js, Grunt, Vagrant to create engaging and highly visible product and marketing web pages as part of a completely new web platform for Sony.

Site Navigation with Filter

Site Navigation with Filter