Boxed Water

Boxed Water Hero
Boxed Water approached OneMagnify with the challenge of creating a big and sustainable impact by Earth Day 2017. That amounted to 42 days from kickoff to production.

We had to develop a unique method of collaboration and project delivery to support the goal.

Keyword research.

Isolating opportunity
in a crowded space.

bottled water alternatives

water delivery

convenient water

better for the planet

boxed water

water in a box

better for t

80

500

plastic-free

why is boxed water better?

sustainable

primary keyword targets

mid- and long-tail keyword variations

Keyword deliverables.

Our research produced a strategy that was focused on positioning Boxed Water’s content to audiences focused on sustainability and products within the beverage category. We created strategic intent for their lifestyle content that would produce inbound traffic.

On-site SEO.

Balancing product attributes
with commercial intent.

Boxed Water SEO

On-site deliverables.

Boxed Water was focused on online subscriptions and product sales, so we knew we would have to carve out a precise keyword strategy that would correlate well to the sitemap used in the build. We implemented handwritten metadata and used schema markup for efficient discovery of production attributes.

Art direction.

Pure and simple.
Just like the product.

Boxed water blue
Boxed water gray
Boxed water black

Typography

Acumin Pro Extra Condensed
Boxed water typescale
ITC Avant Garde Gothic Pro
Boxed Water type
Boxed Water type paragraph

UX design.

Simple but purposeful.

Boxed Water sitemap

Sitemap.

We structured the sitemap to emphasize the focus on promotions and cart building. While Boxed Water is sold in many stores, a primary goal was to bring users into an online transactional experience.

Boxed Water prototype

UX prototype.

Since time was limited, we thought the fastest way to flesh out the information architecture of the site was to build a fast prototype in Webflow. This allowed everyone to scroll through the sections of the site and navigate to different pages, and really get a feel for how the content would flow.

Boxed Water hello

Visual design.

Making it all come together. Beautifully.

Boxed Water Visual design

Design comps.

To support an incredibly short timeline, OneMagnify dove right into full-color design comps. With the help of InVision App, we ideated quickly on a mobile and desktop experience that allowed for strong client collaboration.

Boxed Water homepage design
Index label
Boxed Water merch
Boxed Water product detail
Boxed Water inspiration strikes
Boxed water sustainable investment
Left
Right
Shop label
Boxed Water shop desktop design
Boxed Water mobile index
Boxed Water mobile
Boxed Water mobile shop

Development.

Institutionally executed.

HTML5
CSS3
Javascript
Shopify
Github
Tech stack

We went right from Sketch to an HTML/CSS/JS static build. We leveraged GreenSock for some precisely timed dynamic interactions to help the site work harder to tell Boxed Water’s story. The front end was architected into Shopify to provide seamless checkout flow and e-commerce functionality.

Quick execution

We launched the fully Scratch-designed and hand-coded experience in just 42 days, which included an incredible amount of client collaboration.

Rich animation

Animating the site was critical to our finished experience. Significant effort was placed on dynamic interaction and making the mobile version extremely fluid. Over 70% of Boxed Water’s traffic was from mobile devices.

40%

increase in organic search traffic within four months

22%

increase in site traffic

35%

increase in ranked keywords

Navistar

International Truck Digital Content