Gabriel & Co.

A case study of a family-owned jewelry company that aims to take on the biggest names in the Fine and Bridal Jewelry Industry.

Project Overview

Profile:
Gabriel & Co. is an upcoming competitor in the Fine Jewelry Industry in the nationwide market. With over 25 years of direct-to-retailer experience, they sought to expand their business by launching a B2C website.

Challenge:
As a new entry into ecommerce, Gabriel & Co’s main challenges were a lack of experience in selling directly to customers, a website aimed at retailers, brand confusion, and shifting priorities. These all led to a high bounce rate, low conversions, and an overwhelmed support center.

Plan:
Discover what was being done wrong through competitive research and user feedback, then correct those issues.

Goals:

  1. Develop a consistent brand identity for their digital presence.
  2. Develop a modern mobile-friendly website aimed at the needs of their customers.
  3. Develop/highlight product lines that are aimed at ecommerce audiences.

Action Plan

point-1
  • Establish a new digital style guide and implement it across the website.
  • Develop in-house iconography for categories and navigation.
  • Coordinate with the Marketing team to establish the identity of key product lines to promote.
point-2
  • Work with the Ops team to audit & redefine key services for both B2C & B2B.
  • Restructure existing composite site architecture into differentiated B2C/B2B sites.
  • Redesign the site navigation and catalog page layout to increase user discovery.
  • Redesign the product page to increase conversion rate and decrease support requests.
point-3
  • Coordinate with Merchandising team to identify products to highlight via line-specific landing pages.
  • Design landing pages focused on target audiences.  
  • Coordinate with Marketing team to improve photo assets.

1. Style Guide / Brand Strategy

An early audit of the website found 10+ fonts and inconsistent color codes. The main goal then was to establish a simple, clean, and classic look.

We refined the main brand color for digital screens, finalized the logo, established font rules for multiple devices, and set our responsive breakpoints. 

With a wide array of categories, we found that customers were becoming lost in the catalog, either flooding support lines or leaving entirely. We developed an icon system to differentiate products at a glance, improve navigation, and streamline catalog searches.

An early discovery was that the company’s many product lines were drowning each other out. With over 30+ lines, mostly targeting the same demographic, it was difficult to build an iconic identity.

After consulting with the Merchandising & Marketing teams, we determined that we would highlight one high-end line, and develop an entry-level line to serve as the flagship lines for the rebrand.

Bujukan-style

Gabriel & Co. Bujukan: elegant arcs of gold form the foundation of this signature collection. 
Identity: classy, refined, and seductive 
Target Market: high end line aimed at women ages 30 to 45.

Gaby-style

Gabriel & Co. Gaby: modern approachable style meets attractive pricing in this curated collection.
Identity: fun, playful, and coquettish 
Target Market: entry line aimed at women ages 18 to 25.

2. Site Architecture / Wireframes

After a joint audit it became clear that the business had outgrown its original structure. While the company had developed in sophistication, so had its redundancies and bloat. Since the website served the needs of B2B & B2C users, it became difficult to optimize for either market. We decided to split the site to differentiate and restructure based on the key needs of each market. 

The key B2C focus was to drive users to products they want to see. This meant shifting away from landing pages for each collection to catalog pages with simple-sort controls and easier discovery. We also limited the total number of landing pages to newly relaunched collections and entry points for bridal and fashion.

While B2B was not the main priority, we decided the main goal was to simplify the way users access the many tools available to them. Working with Retail Relations, we emphasized the most used features and simplified navigation.

User feedback indicated that our audience had very specific search criteria or none at all. In order to get relevant products in front of users, we had to provide flexible filters and allow for easy browsing.

We made multiple entry points in the catalog that could then be refined quickly. These entry points were based on captured user patterns and commonly searched terms.

For easy browsing, we drove consumers to popular sections of the catalog, enabled infinite scroll, hover preview, and quick view features.

Browser: Main Navigation

Mobile: Main Navigation

The goals of the catalog page interface were to clean up the clutter of controls, allow for precise filtering, and enhance product discovery. The catalog grid was adjusted to 4 columns, allowing for more items per page, with filters moved from the left of the screen to the top. Active filters were limited to the most commonly used terms, and a tag system was added for easy adjustment. 

Product cards were redesigned with key information displayed cleanly. On-hover states were added to the browser, with  quick previews on mobile. We also introduced a similar style product finder and added product option toggles.

Browser: Catalog Page

Mobile: Catalog Page

Product pages were redesigned to enhance usability, increase conversion, and cut down support inquiries.

In order to improve conversion rate, we emphasized the main CTA, reorganized key product information, and  expanded the viewing window for the product. We then went on to simplify the customization process by adding all available product toggles to the page.

Additionally, for our bridal deviation we highlighted the store finder feature for in-person appointments.

Browser: Product Page

Mobile: Product Page

3. Campaigns / Landing Pages

With multiple campaigns and a wide target audience, the main priority was to create an established flow for all pages while creating a unique look and feel for each. Specialized photography was created for select product lines, based on targeted demographics.

Fine Jewelry Landing Page

Bridal Landing Page

Gift Guide

Men's Band Landing Page

Valentine's Landing Page

Results

B2C:
After an 8 month period of development, the relaunch of Gabriel & Co. proved to be a financial success. Across the board the company saw growth in both bridal and fashion categories. Additionally, after their respective launches, the Bujukan and Gaby campaigns saw a rapid increase growth for the line. Site metrics saw improvement, page views and site time saw an increase, while the bounce rate dropped considerably. We also saw a decrease in product information inquiries and an increase in consumer engagement across media channels.

B2B:
While the site restructure initially showed a brief spike in help requests from retail partners, there was also a noted increase in online orders versus phone orders. There was also a decrease in phone and email requests for account information, as well as a sharp increase in media requests for marketing assets.

Numbers-2

B2B Retailer Site

Gabrie & Co. Catalog/Product

Gabrie NY Catalog/Product

Before/After Catalog

Before/After Home

Before/After Mobile

Selected Works

Gabriel & Co.UI/UX, Identity, Digital Design

MirrorUI/UX, Identity, Digital Design

Pan AmericanUI/UX, Identity, Mobile/Web, Digital Design

TruViewUI/UX, Identity, Mobile Design

Hunter Douglas Identity, Web Design

48 In 48Identity, Web Design

MuffixUI/UX, Identity, Mobile App Design

CPNWeb Design

Mille FioriBrand Design, Logo Design

PureBrand Design, Logo Design, Packaging Design