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.
ABOUT THE PROJECT
✔ 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.
✔ 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
✔ A conservative option.
✔ Skews toward previous site look & feel.
✔ Low technical level of effort for a limited budget.
✔ Sports editorial-inspired.
✔ Bold shapes and colors.
✔ Flat, sleek UI.
✔ 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
Top level navigation supports both the focused shopper and the explorer.
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.
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.
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)
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.