Since 1965, Gatorade has established itself as a pioneer in sports science, fueling athletes' hydration on fields across the globe, from the little leagues to the pros. For our longtime partner Gatorade, we saw an opportunity to strengthen athlete's relationship with the brand through an enriched new digital storefront experience that only Gatorade could offer.
Athletes and teams now have a new e-commerce hub to easily find —and customize— an array of Gatorade products with the relaunch of Gatorade.com. Work & Co led strategy, design, CMS development and front end development for the revamped digital experience. AKDM, the New York-based agency which Work & Co acquired in 2020, led analytics, SEO and paid media. PepsiCo led the backend development.
We collaborated with Gatorade to:
Design, build, and launch the reimagined site focused on personalization and conversion
Design and build a fully-customizable, 3D bottle builder that integrates with the CMS & exists across different variations of products (jugs, towels, etc)
Build a custom CMS that allows for more flexibility
Direct the creation of over 3,000 images & videos to establish the new website as the ultimate online destination for learning about and purchasing Gatorade
Said Rob McCutcheon, Director of Digital Innovation and Ecosystems at Gatorade: "We are jointly tackling the challenge of taking an iconic brand and transforming it into a digital leader. We started with one small experiment in 2019, and four years later, we find ourselves making more impact with every project we ship. Each bigger than the last, with more impact."
For years Gatorade and Work & Co have been incrementally evolving Gatorade.com. The onset of this project was a key opportunity to holistically rethink everything about Gatorade's website- from product assortments to merchandising, content and loyalty. For Work & Co, it was a dream brief that leaned into what we do best: bringing together PM, strategy, design, and technology.
Our goal for the redesign: transform Gatorade's decades of sports science research into a digital experience that is exciting for all athletes.
Stakeholders included:
Internal teams-
The digital platform we were designing and building needed to work equally as well for consumers as for the Gatorade team. Not only did we help educate the Gatorade team on the new tools, we also provided training on how to manage a modern organization structure that can support their ongoing digital ambitions. Despite multiple business units with separate goals and interests working on shared code bases, we introduced and deployed best practices to accommodate both innovation and stability.
B2C- Athletes-
With the launch of the new Gatorade.com, we sought to provide more avenues for athletes to connect, thanks to an unmatched customization experience, and purchase online-only Pods, Powders, and Tablets that are expanding and evolving the ways athletes hydrate and enjoy Gatorade.
B2T- Teams-
The new gatorade.com caters to individual athletes as well as teams. The needs of teams are distinct- they need to order in bulk to ensure they're always stocked for practice and game day, and are equipped with gear like sideline coolers and water carts. The team shop makes fueling up and gearing up straightforward for coaches and team managers, driving them towards a selection of quick-select products that meet their needs.
When bringing to life the redesigned Gatorade.com, we focused on four key areas:
Technical architecture: Our team has led Gatorade to adopt a state-of-the-art digital tech stack. The brand has trusted our recommendations to introduce cutting-edge databases, software, and programming languages into their workflow. As the brand adds new line extensions and products for athletes, the new site is now more flexible and built on a custom CMS to make bringing those updates to customers faster.
Customization: The exciting new 3D customizer experience for the new Gatorade bottles, jugs, and towels allows users to choose colors, patterns, add your name, view product details, reviews — and buy it.
Product assortment: The new site expands access to Gatorade's wide array of products beyond the bottle, including powders, pods, tablets, and more. Users can easily subscribe to their favorite Gatorade products, bundle bottles and Gatorade consumables and Gatorade consumables at a discounted price. Coaches can outfit their teams and buy in bulk.
Engaging and informational content: New, inspirational sports content on the Gatorade site strengthens the relationship between consumers and the brand. Engagement provides an opportunity for Gatorade to understand their customers' interests and experiences, and develop a new level of brand loyalty. The dynamic design drew inspiration from the colors of Gatorade flavors for a look and feel that is familiar yet elevated.
While all these elements play an important role in shaping the new Gatorade.com, the 3D customizer makes its mark not only on Gatorade.com, but also in the field of interactive design. For Gatorade bottles alone, there are five customizable areas, 33 customization options (between colors, patterns, and text or jersey numbers), that make possible thousands of different combinations.
To pull off this new customization tool, we coupled a blank 3D model with SVG-based personalization layers, which are dynamically customized on-the-fly, in the user's browser. Custom renderings of textures, metal, and reflections almost look like a photograph or video. It's one of the most realistic customizers in the industry. Creative use of compression technology made it possible for us to embed real-time 3D product previews directly on the Product Detail Page, sparking buyer intent and enabling immediate, immersive interaction. What's more, since all product customization attributes are modeled directly within the e-commerce site's CMS, Gatorade can easily expand its customizable product assortment in the future.
We knew the 3D customizer would make an impact on customers. After launch, sales on gatorade.com confirmed just how impactful it would be for driving revenue. The main customizable bottle has sold out twice, and for Black Friday alone, the customizer generated a 45% lift in conversion and propelled sales +79% YOY. Beyond the 3D customizer on Gatorade.com, this reinforced that engaging with products in a hyper-realistic digital display during purchase can make a notable impact on conversion and positively influence customer relationships with a brand. As data-driven recommendations surge in online shopping, engagement is still a fundamental aspect of a great shopping experience.