BODYARMOR - Website

WKND HRS partnered with BODYARMOR and Coca-Cola's global team to completely redesign and rebuild the BODYARMOR global website as part of the brand's larger rebrand. The goal was to create a modern digital experience that reflected the brand's new visual identity while building a stronger foundation for customer engagement, data capture, and sales. Working across creative, design, and development, we reimagined the website from the ground up, bringing the refreshed brand to life through a more intuitive user experience and a stronger digital presence. Beyond the visual transformation, we integrated CRM data capture capabilities and improved the site's ability to collect valuable customer information, support marketing efforts, and drive sales. The result was a new global digital platform built to better represent BODYARMOR and support the brand's next stage of growth.

Client: BODYARMOR
Category: Web Development
Services: Web Design, UI/UX Design, Interaction Design, Motion Design, Web Development, CRM Integration
Year: 2025

BODYARMOR relaunched in 2025 with its first new look in 15 years. We designed the global website that carries it, from the CHOOSE BETTER hero to every flavor, product line and the online store.

The Brand

BODYARMOR relaunched on April 17, 2025, with a new wordmark, bold packaging, its first brand icon and Choose Better, the largest campaign in its history.

The Challenge

Under Coca-Cola, the brand needed a digital platform that could carry a growing product range, deepen consumer engagement and support future growth.

The Job

Rebuild the website as a brand experience: motion and interaction for the new identity, plus the full product line, CRM and a direct-to-consumer store in one streamlined flow.

The desktop homepage hero: CHOOSE BETTER and REWRITE YOUR ROUTINE over an athlete in a BODYARMOR hoodie, under the product line navigation and US and ENG switches

Homepage. CHOOSE BETTER and REWRITE YOUR ROUTINE open the site over an athlete in a BODYARMOR hoodie. The header holds every product line, plus a market and a language switch.

Flavors. A carousel puts each new bottle on its flavor color, and a spotlight sells one flavor at a time with its specs and a button in the same color.

A spotlight panel for Strawberry Banana Sports Drink with 790mg electrolytes, a pink LEARN WHY IT WORKS button and the bottle on pink

FIND YOUR BODYARMOR MATCH with a FIND YOUR MATCH button, beside a photo of a man drinking BODYARMOR under red light

Find your match. FIND YOUR BODYARMOR MATCH points each visitor to the right drink, inside the same black panel and white frame as the spotlight.

Type and color. BODYARMOR Display sets every headline. Each flavor owns a hex code, from Orange Mango #FF9E25 to Strawberry Banana #F6517F, and LYTE adds a light tint to every flavor color.

The color palette: neutrals, then one swatch per flavor for the base line and LYTE, each labeled with its name and hex code

Type specimen: AA in BODYARMOR Display, white on black

REWRITE YOUR ROUTINE set in BODYARMOR Display, white on black

Orange Mango in the spotlight: the bottle on orange beside its specs and an orange LEARN WHY IT WORKS button

Flavor swap. Move to the next flavor and the whole panel changes with it. The next bottle sweeps across in a motion blur, then the panel turns pink and the copy switches to Strawberry Banana before the bottle lands, button color included.

A pink bottle sweeps across the orange panel in a motion blur

The panel turns pink and reads Strawberry Banana while the bottle is still in motion

Strawberry Banana settled in the spotlight with a pink LEARN WHY IT WORKS button

The range. Every product line keeps its own look. A lineup row opens Zero Sugar, LYTE and Sportwater, and LYTE runs on pastel tints, one per flavor.

BUILT FOR REAL ATHLETES. BUILT FOR YOU. above cards for BODYARMOR Zero Sugar, LYTE and Sportwater

A LYTE Peach Mango bottle on peach in front of FUEL YOUR DRIVE in heavy black type

Four LYTE bottles on purple, peach, blue and lilac tiles framed in white on black

Mobile

The system stacks into one column. The product page puts sizes, SHOP NOW and FIND IT NEAR ME up front, with Details, Facts & Ingredients and Reviews below.