Sony.com Redesign

At SapientNitro, we redesigned and migrated Sony's ageing marketing and e-commerce platform serving around 400 million visitors each year to a mobile-first responsive web experience. The goal was to establish a human-centred experience that would migrate their in-store traffic to their online e-commerce platform. My role was to design the modular interaction system for the new online experience to encourage consistency across all Sony websites.

Project Goals
Inspire users:
How can this provide a new or transformative experience? How can this inspire users to be more engaged with Sony Online?
Tell a story:
Portray the product within some real-world everyday experiences. Tell an engaging story but also balance curiosity with brevity.
Be user-centric:
Keep the audience in perspective and what they would care about. Make the story digestible by distilling to one or two key points.
Focus on heritage:
Explain how users can achieve better or more professional results. Showcase heritage and design in simple and beautiful ways.

Home Page & design system

The home page is divided into four main areas: a hero or feature area at the top, the body of the page featuring content from across the Sony spectrum, the bottom of the page dedicated to new and recently viewed products, and news and social buzz at the bottom of the page.

Page goal 1:
Feature top stories, products and services.
Page goal 2:
Showcase uniquely Sony convergence experiences.
Page goal 3:
Enable navigation to the broader Sony.
Page goal 4:
Surface relevant news and social buzz.

Each page on the site is built from a collection of reusable pieces called modules that have their own internal requirements and behaviours. Each module is meant to be responsive in its own right, allowing us to quickly scale the site and build new experiences from a component set of parts. A modular design approach allows us to scale the site and experience across thousands of products and services across regions around the world, and on multiple devices and contexts, both known and unknown.


Product Page Development

Product detail pages offer in-depth marketing experiences with access to detailed product specifications reviews to facilitate purchasing decisions. The product detail page also provides product support content, such as use-and-own content and access to appropriate discussions and communities.

Page goal 1:
Rich, dramatic, evocative marketing experience.
Page goal 2:
Convey key marketing points.
Page goal 3:
Complete product features and specifications.
Page goal 4:
Facilitate purchasing decisions.
Page goal 5:
Cross-sell relevant products.

Step 1: Research

Step 2: Card Sorting

Step 3: Storyboarding


Category Page Development

The category page orients users to category brands and products provide access to deeper marketing pages and features Sony innovation and category related stories. The page leverages sub-navigation to provide product and series disambiguation as well as cut Sony's deep catalogue into manageable groupings.

Page goal 1:
Showcase category-defining brands and products.
Page goal 2:
Enable users to select a product.
Page goal 3:
Facilitate navigation to category-related catalogue.
Page goal 4:
Present category related marketing and convergence stories.

Step 1: Research

Step 2: Card Sorting

Step 3: Storyboarding


Galleries allow the full Sony catalogue to be presented in manageable groups. Galleries may be hierarchical, dynamic, or curated, and may provide access to related marketing.

Page goal 1:
Facilitate access to full catalogue.
Page goal 2:
Provide consumer-friendly facets to narrow catalogue.
Page goal 3:
Provide the glue to the experience, moving users from marketing to products.

Carl Zeiss Lenses

Sony G Lenses


Marketing Page Architecture

Deeper marketing pages dedicated to brands, technologies, campaigns, or general Sony stories are presented as out-of-flow pages. These optional marketing pages are linked to from relevant points in the customer journey and point back to related products.

Page goal 1:
Present important marketing stories (series, brand, technology, convergence, et cetera).
Page goal 2:
Provide deep, immersive experiences without interrupting the main product flow.
Page goal 3:
Showcase products related to page content.

© Ashish Gatne · San Francisco, California.