ZaneRay designed and delivered Hammer Nutrition Responsive Website

Complete Redesign for Hammer Nutrition

Jun 18 2014

We recently launched a fully responsive new site for Hammer Nutrition to further their mobile and multi-device strategy and better showcase all their products. The responsive design replaces the separate mobile and desktop sites while enhancing all site features for touch devices of any size. Hammer’s new site takes advantage of many new web technologies which make features like one-page checkout, fully responsive design, and data-driven product displays possible.


Visual Product Descriptions

High performance nutrition products are inherently complex, but we didn't want an overabundance of technical information to intimidate viewers. Large blocks of text containing detailed product information were moved down the page to make way for informative data-driven usage graphs, product images, and concise bullet points which feature core product information. The new design takes advantage of full width imagery and showcases products in a spacious, reader friendly layout. Detailed product descriptions and nutrition information can be found directly below. Each product detail page also features links to relevant articles in Hammer's extensive Knowledge Base.

Visual Product Descriptions for Hammer's New Site

Fastest Checkout on the Web

The only thing mini about the mini-cart is its intrusion onto the page. Because of its small footprint in the page header, there is room for the mini-cart on every page. When clicked on, however, the mini-cart expands into a robust feature-rich experience providing a dynamic shipping cost cost calculator, visual overview of cart contents, and quantity update ability. When combined with ZaneRay’s innovative one-page checkout, Hammer's site provides a streamlined, efficient purchase experience. The first portion of the checkout, a visual confirmation of the order, allows users to double check items, quantities, and promos. Simply plugging an address, shipping method, and payment information allows users to securely place their order.

Fastest Checkout on the Web - One-Page Checkout

Robust Account Features

Because Hammer has a large base of repeat customers, account features and reorder options are particularly important. Via a Hammer account, users can quickly view previous orders and use these as templates for a new order. A robust system allows users to choose any item from a previous order, change the flavor or quantity, and reorder - all without leaving the My Account page. Hammer account holders can also earn referral and loyalty points, known as Hammer Bucks, which can be redeemed on Hammer's website. The My Account section provides convenient overview of users' Hammer Bucks.

Products and Knowledge Base articles on Hammer's website feature like buttons which allow users to save these items to their Hammer Accounts. This way, users can keep their favorite products and articles in a convenient collection where they are always available.

Hammer's Robust Account Page

Flexible Navigation

Designing a menu both large enough to display Hammer’s extensive product line and yet flexible enough to work on all devices from mobile to desktop proved an exciting challenge. To overcome this, we designed a menu that remains visible, even when scrolling down a page. No matter where you are on a page, the menu is always immediately available.