• BARBARI

  • From indie purveyor to DTC category leader

  • 30%

    increase in conversions on the redesigned product page within the first month

  • 24+

    new metadata fields built and integrated

  • INDUSTRY

    CBD, Combustible, Wellness

  • OUR ROLE

    Consultancy, Design & Development

  • The Challenge

    Barbari co-founders Meryl and Val were on the precipice of their newest launch—a market-tested limited edition called “Period Daze” so beloved that they were making it a permanent staple of their lineup—when they reached out to Alcove Studio about optimizing their product pages.

    Barbari's Shopify site was built using the premium Shapes theme, and with their bold brand identity integrated, the new e-commerce site was looking great. But in an attempt to differentiate their core product lines, they had created an excess of product page templates. These were getting cumbersome to maintain, and things were starting to fall through the cracks, leaving what should be the brand’s most valuable digital real estate feeling misaligned and lackluster.

  • Our Approach

    With our sights set on increasing conversions as Barbari ramped up for the holiday season, Alcove Studio delivered a combo of strategy, data design, visual design, and Liquid coding to enhance the shopping experience for Barbari’s customers while streamlining the backend.

    By analyzing Barbari’s printed packaging and brand guidelines and researching the products themselves, we identified 24 unique data points that could be applied to new elements in their product page design or be correlated to existing ones. Using some of Shopify’s latest and most advanced functions—metafields and metaobjects—allowed us to populate their new single template with data pulled dynamically at the product-sku level.

  • The Results

    “We saw an immediate improvement with the new product pages from Alcove. Our conversion rate jumped from 2% to 2.6% within the first full month.

    Our mobile interface is much cleaner and simpler to update and operate, and that efficiency cost is something we really value, especially during this busy holiday season when we want to make quick merchandising changes.”

    – Meryl, Barbari Co-Founder

  • The Process

    “The thing I liked most was Allie’s working and communication style. I always knew what to expect, and the whole process was extremely thorough and transparent. Allie is thorough, understands how to merge aesthetic and function, and makes sure you are filled in every step of the way!”

    – Valarie, Barbari Co-Founder

Before & After

First, we moved the product’s “effects” indicator (how the smokeable herbal blend makes you feel) up on the page, coded it to utilize flexible dynamic data, and added emoji to promote engagement and help communicate the brand's vibe.

We also cropped the product description to help bring Add to Cart (ATC) button up higher on the page.

Next, we brought the Quantity Selector up above the ATC button to encourage ordering more than one item at a time. We added padding for easy skimming, removed extra verbiage, and made all ‘button-type’ boxes the same width.

We used color to bring the Add To Cart button to the forefront of shoppers’ attention amidst multiple buttons, and removed an unused “Buy it now” button to retain focus on the main CTA.

We also added additional accordion dropdown options so the Shipping & Delivery info wasn’t ‘orphaned’ and created and connected custom metaobjects to each accordion item so information is displayed dynamically at the individual product level.

Below the fold, we kept engagement going by introducing an animated sticker containing quick-reference product info, which spins responsively as the user scrolls the page.

We created a custom-coded product feature section with engaging, digestible copy and a lifestyle product shot. Everything was created using custom metafields so that data can be pulled dynamically at the individual product level.

Next, we introduced an animated scrolling marquee section to highlight the product’s “goals” which we decided to pull from Barbari's stunning packaging design, and created custom metafields so the data can be pulled dynamically at the individual product level. We finished off this section with engaging copywriting informed by Barbari's brand Style Guide in a featured text callout.

Our next custom section for Barbari's herbal blend product pages features the core promise that the brand offers: stellar ingredients in specialized blends.

As each of their herbal blends features a unique combination of a number of ingredients, we approached this in a modular manner, setting up Shopify Metaobjects for each ingredient, within which are multiple Metafields which contain pertinent, editable info including a featured image, reference info, and suggestions for use.

Once we set those up, we connected them to a second custom Metaobject representing the lineup of herbs within any one particular product, and coded all of that into a responsive, interactive slider that looks great on mobile and desktop.

We added a product listing section coded with dynamic data to help shoppers find more of the same blends across other product formats.

Lastly, we pushed the Customer Reviews section up on the page, and added a custom-coded, floating "Back to top" button for easy access to Add to Cart.

JOIN THE RANKS

Ready for an outstanding redesign like Barbari's?

Inquire Now