PUMA Global Unified Site

Role: Art Direction

 2014 marked a significant milestone for PUMA with the launch of the new puma.com – a responsive and “unified” digital shopping experience that unifies brand, marketing and e-commerce under one global brand voice and technology platform. We were tasked with the redesign, strategy and development.

 
puma-hero.jpeg

ABOUT THE PROJECT

THE CHALLENGE

✔ Eliminate the divide between brand, marketing & e-comm.

✔ Reduce technology complexities.

✔ Create a content management framework.

✔ Establish a singular brand voice.

✔ Cater to multiple user types.

OUR STRATEGY

✔ Fuse content, shopping & storytelling.

✔ Be unified, not uniform.

✔ Always respect context.

✔ Get personal.

✔ Be responsive.

THE DESIGN PHASE

✔ Perform a content audit.

✔ Define our user types.

✔ Brainstorm & sketch.

✔ Model responsive interaction patterns.

✔ Prototype & iterate.

 
 

MULTIPLE DESIGN DIRECTIONS

DIRECTION 1 

✔ A conservative option.

✔ Skews toward previous site look & feel.

✔ Low technical level of effort for a limited budget.

DIRECTION 2

✔ Sports editorial-inspired.

✔ Bold shapes and colors.

✔ Flat, sleek UI.

DIRECTION 3

✔ Performance and motion-inspired.

✔ Angular lines and backgrounds.

✔ Dimensional UI.

 

SELECTED DESIGN DIRECTION

After the selection of the Sports Editorial design direction, we iterated and refined and arrived at...

 

AN UPGRADED UI KIT

 

NAVIGATION

Top level navigation supports both the focused shopper and the explorer.

 
 
 

CATEGORY PAGE

The Category page is a great example of a flexible design that creates opportunities for multiple levels of storytelling. A simple, yet powerful content module library makes it easy to create landing experiences that are rich and diverse.

 
 
 

See how each element of the Category page has specific responsive patterns. The sub-navigation, hero banner and "shop by category" carousel all behave differently across desktop, tablet and mobile.

 
category.jpg
 

PRODUCT LISTING PAGE

On the PLP, filtering is collapsed and sorting is consolidated into a dropdown.
Within the product grid, relevant brand content supplements the shopper's journey.

 
PUM-PLP.jpg
 
 

PRODUCT DETAIL PAGE

A modular design approach allows products to be mapped to multiple content pieces. Because the PDP can often be a customer's first entry point into the site, we wanted to allow storytelling on areas beyond the landing pages.

 
 
 

TEAM & ATHLETE PAGES

The spirit of their athletes are at the core of PUMA's brand values. PUMA's goal is to re-energize their legacy in sports—a mission that was fundamental in our redesign strategy. (Click on thumbnail to view full page)

 
 
 

CHECKOUT FLOW

Clean and streamlined, Checkout was designed to guide customers through the sales funnel in a quick and simple fashion. An in-line editing feature allows customers to update their Shopping Cart without leaving the flow. The single-page, 3-step checkout process is clear and easy.

 
 
 

SCALE GLOBALLY.
THINK LOCALLY.

The new unified site is designed for easy rollouts into global markets.
Visit some below. More regional sites coming soon...  

NORTH AMERICA: http://us.puma.com/

EUROPE: http://eu.puma.com/

RUSSIA: http://ru.puma.com/

GLOBAL NON-ECOMM SITE: http://global.puma.com/

 
 
 
hint_morestuff.jpg