Vitacost

Creative direction, Branding and Web Design for Vitacost

Vitacost.com

Today: 2018-present

2018 brought further refinement to the newly relaunched Vitacost Brand.

Vitacost 3.0: 2016-2018

In 2016, what we are now calling Vitacost 2.0 launched. The goal was to bring the previously dated and inconsistent site into 2016 in a way that was consistent and easy to maintain, while also planting the seeds for the site to surface more content, products and trends.

Now in 2017, Vitacost 3.0 is the evolution of these ideas.

  • The header and navigation have been updated to be much cleaner and easier to digest. Shops, pages, content and categories are all logically grouped and are much more visually engaging in order to encourage discoverability and exploration, but also allow familiar customers to browse the categories and subcategories as they always have.
  • The homepage design is a natural evolution of the 2.0 homepage. We wanted our first impression to the customer to be a positive one that instantly conveys the lifestyle we support. In that vein, we tailored the hero rotator to have a large image that is either shot by our in-house photographer or is a carefully selected stock photo that supports the brand look and feel while also communicating a healthy and trendy lifestyle. Below that, we shifted the philosophy on the promo area to be more about "trends" on the site, which are generally promotionally driven, but can also be announcements for new products or anything else we feel like talking about. Also new is a block of 4 life-style focused graphics that promote curated collections or specialty shops while also functioning as a natural starting point for new customers.
  • Curated collections are the definition of discovery, allowing a completely new way to browse Vitacost.com in a cutting-edge interface carefully designed to work in tandem with the rest of the Vitacost 3.0 interface. As with Vitacost 2.0, this plants the seeds for new and exciting benefits to the customer, including personalized content.

See below for details on the initial redesign, AKA Vitacost 2.0

Content Strategy

Vitavibes Magazine & Blog

The Vitavibes brand refers to anything content-related. This brand is a safe space away from the shopping experience, and purely about the content and the lifestyle. Any products promoted under this brand are purely from a marketing/story perspective, not led by a revenue goal. We refer to this channel as “inspiration” consistently throughout the shopping experience after running a test that proved that word resonated better than “blog” to customers. This logo was designed to have a younger, more structured feel than the primary Vitacost logo in order to emphasize the more playful, less commercial nature of the content. Since the brand is recipe-heavy, the logo was designed to have a crafty farmers market or trendy restaurant feel. We also reiterate the word “inspiration” here to tie into the larger content strategy.

Product Design

Vitamins: Vitacost, Synergy and Root²

The task: Rebrand, redesign and reorganize over 900 Vitamin and Supplement portfolio of Vitacost's proprietary line. The solution: The Vitacost Family of Supplement Brands:

Vitacost
Simple, foundational nutrition, exceptional quality and an extraordinary value
Design direction: Friendly and accessible. Accent color on white. Contemporary pop visuals.
Root²
Natural, whole-food-based ingredients (free of synthetics). Backed by sound scientific research. Meticulously sourced, hand-selected assortment. Specialty/lifestyle needs: organic, non-gmo, vegan and vegetarian options.
Design direction: Woody, earthy neutrals with pops of green; authentic photographs.
Synergy
Next-level nutrition: clinically researched ingredients, higher potency, superior ingredients. Premium, advanced formulas for informed consumers. Specialty items beyond mass-market
Design direction: "Under a microscope" - clean and clinical, utilizing molecular shapes.

Protein & Snack Bars

Coming 2018

Signature Tea

Vitacost 2.0: 2015-2016

The goal: create an environment that reflects the natural and organic feel of the products and lifestyle, while also maintaining a modern and unique design language.

Rebrand and Site Redesign - 2015/2016

To reflect the new brand standards and design direction, the entirety of Vitacost.com underwent a massive redesign. See a sampling of the pages that were redesigned below.

Branding

The goal: create an environment that reflects the natural and organic feel of the products and lifestyle, while also maintaining a modern and unique design language.

Logo

As the look and feel of the website evolved, the original Vitacost logo quickly fell behind. The logo was design in another time, the original branding rules long forgotten. From the ground up, we considered how the new logo would be used, and what would it stand for.

The font is a custom font, tweaking the corners and some edges of a generic sans-serif font to give it a slightly less-polished look, as if it was cut out of paper imperfectly.

For symbology, the company as a whole started to use a tree internally to represent the growth and change of the company. This concept was integrated in the the V form.

For scalability,rather than having one accent color, it was decided that the accent color could rotate through 4 approved brand accent colors depending on context. And finally, for the condensed logo, we really wanted to push the natural feel further by creating a rough, water ring outlining just the V to create a very distinct shape that is instantly recognizable.

Color Story

Colors and textures became essential elements in bringing in a more natural look and feel to the previously budget/promotional style of the brand. Due to the wide array of products carried by Vitacost, and the large amount of merchandising assets required to sustain that, we had to think bigger than just one brand accent color. We narrowed this down to a palette of four brand accent colors to be used in a variety of applications, with the green being the primary accent for the brand. This palette still wasn’t flexible enough for the entirety of the UI and promotional marketing assets, so we expanded the palette further to include more options that all worked well together. As opposed to solid color blocks of the brand colors for the site, we applied a gritty texture to the colors to create really interesting color blocks that would become ingrained in the UI and marketing assets. To compliment these bold color blocks, we added the element of neutral natural textures to add variety to the materials.

Typography

No brand is complete without a firm typography story. The primary brand accent font Roboto Slab was chosen for its trendy slab-serif style and very web friendly qualities. For body copy, we stuck with the ever-reliable Halvetica Neue due to it’s wide system support and scalability.

Banners

Promotional Templates

Despite the shift to a more content-focused marketing strategy, we had to solve for how to market promotions. Using the various colors, textures and typography rules that were established for the brand as a whole, a series of templates was created to fall in line nicely with the new UI but add the bit of marketing flare that is needed.