Nestle Waters - Web Redesign @ Springbox

At Springbox Digital Partners I had the opportunity to work on the web redesign of four Nestle Waters North America brands, including Arrowhead, Zephyrhills, Polandsprings, and Ozarka.

Nestle Waters - Web Redesign @ Springbox - Featured image

Multi-Brand Front-End Rebrand & Conversion Optimization

Role: Front-End Engineer / UX Optimization Lead

Agency: Springbox Digital Partners

Client: Nestlé Waters North America

Brands: Arrowhead · Zephyrhills · Poland Spring · Ozarka

Technologies: JavaScript, jQuery, Bootstrap, SCSS, Gulp, Grunt, Docker

Overview

While at Springbox Digital Partners, I worked on the front-end redesign and UX modernization of four Nestlé Waters North America brand websites. The initiative focused on preserving existing CMS infrastructure while delivering a fully responsive, conversion-optimized experience across all brands.
I collaborated closely with Will Matos (Team Lead), along with design and analytics teams, to ensure each redesign respected brand identity, addressed regional audience behavior, and delivered measurable conversion improvements to the ReadyRefresh distribution and delivery portal.

Across the portfolio, the redesign contributed to an almost 20% increase in conversions within the first year, representing hundreds of thousands of dollars in incremental orders.

The Challenge

Each brand presented a unique constraint set:

A shared enterprise CMS that could not be replaced or significantly altered
Distinct regional audiences and brand positioning
Legacy layouts that underperformed on mobile
High business risk: these sites directly influenced recurring delivery orders

The challenge was to modernize four separate brand experiences without fragmenting the underlying system—or compromising conversion performance.

My Role & Responsibilities

I served as a front-end execution and UX optimization lead across all four brand implementations.

Responsibilities included:

Implementing responsive redesigns without CMS refactors
Translating brand guidelines into scalable front-end components
Coordinating cross-brand consistency while allowing local differentiation
Supporting analytics teams with clean before/after measurement
Maintaining development velocity across parallel brand launches

Brand-Specific Contributions

Arrowhead

Focused on clearer conversion paths for West Coast users
Improved CTA hierarchy and above-the-fold messaging
Optimized layouts for mobile-heavy traffic patterns

Zephyrhills

Tailored UX to a Florida-based, delivery-oriented customer base
Emphasized subscription and recurring delivery flows
Improved responsiveness and load performance on lower-end devices

Poland Spring

Balanced a heritage-focused brand identity with modern UX patterns
Simplified navigation and content density
Reduced friction between brand storytelling and transactional actions

Ozarka

Localized UX for a Texas-centric audience
Streamlined access to delivery and distribution entry points
Improved usability across high-traffic promotional pages

Each site shared a common technical foundation but required intentional UX nuance to match audience expectations.

Strategy & Execution

1. CMS-Preserving Redesign Architecture

Rather than introducing backend risk, we decoupled presentation and interaction layers from CMS logic. This allowed:

Faster rollout across multiple brands
Minimal operational disruption
Easier QA and rollback if needed

2. Conversion-Driven UX Decisions

Design changes were evaluated through a conversion lens, including:

CTA prominence and placement
Content hierarchy clarity
Mobile-first interaction patterns
Reduced cognitive load across funnels

3. Analytics-Led Validation

Working with analytics partners, we monitored:

Conversion rates pre- and post-launch
Device-level performance shifts
Funnel drop-off improvements across brands

This ensured the redesigns were measurably effective, not just visually updated.

4. Modern Front-End Tooling & Workflow

To support multi-site development, we used:

JavaScript & jQuery for interaction logic
Bootstrap for responsive scaffolding
SCSS for scalable, brand-aware styling
Gulp & Grunt for build automation
Docker to standardize local development environments

This significantly reduced environment drift and improved cross-team collaboration.

Results & Impact

~20% increase in conversions to the ReadyRefresh distribution and delivery portal
Stronger mobile performance across all four brands
Consistent UX patterns without sacrificing brand individuality
Revenue impact estimated in the hundreds of thousands annually
Proven model for scaling front-end improvements across multiple enterprise brands