Arrow close_button arrow_dropdown angle_left angle_right Phone Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
By implementing modern UX and UI design, Groove Commerce increased Cutter & Buck's conversion rates by 60%.

Cutter & Buck is an active lifestyle fashion brand with a focus on both D2C and B2B merchandising. After initially partnering with Groove Commerce in 2015, our team maintained and eventually migrated their locally-hosted Magento 1 instance to BigCommerce. After completing that migration in 2017, our team supported and optimized Cutter & Buck's website. However, we eventually identified that larger strategic UX and UI improvements could lead to measurable performance increases.

Our Challenge

To begin this process, our team conducted a comprehensive UX and UI audit to better understand how users interact with the site. Part of the site audit process includes conducting both scroll map and click map tests. The scroll map test allows our strategy and creative teams to view how far a website's visitors scroll down a page. Similarly, a click map test shows how frequently users interact with certain items on a page.

As shown in the graphic below, only 50% of users scrolled “below the fold” of the homepage, with most visitors not making it past the hero image. This trend held true on mobile devices, with users slightly more willing to take at least one swipe down the page.

Heatmap

After initially reviewing home page test results , the Groove Commerce team looked at the other high value pages for Cutter & Buck. These pages included their Fan Shop pages, Collections pages, Product Listing pages, Product Detail pages, as well as the Cart/Checkout pages.

During this analysis, we found that while most users viewing the Fan Shop pages had no issues finding the team they were looking for, there was a significant opportunity to insert content rich modules below the team listings..



Cutter & Buck Fan Shop Scroll Heat Map


After completing our scroll map analysis, we analyzed results from the click map test. This revealed that on desktop computers, menu items for “Men” and “Ladies” were the most-clicked items, with the search bar close behind. The observation held true for mobile users, who typically headed straight for the “Hamburger Menu” to access search functionality or to select the category of clothing they are looking for.



Click Heat Map

These insights gave us invaluable information about what site elements should stay, what could be improved and what site elements needed to be removed.

Our Solution

The Groove Commerce team turned these findings into positive ideas to increase revenue and conversion for Cutter & Buck. Our first focus was resolving the scroll map issues from the existing version. To start, we recommended that the site’s overall navigation bar and hero image’s height be reduced significantly. Additionally, we increased both the size and visual prominence of the search bar on the site to reflect its high interaction rate.


New Websites

While the search bar was being reorganized, we leveraged Searchspring functionality to optimize the site's merchandising experience. Searchspring allows for greater customization of results based upon a user's behavior on the site.

Additionally, our team wanted to increase the prominence of individual products on the homepage experience because of their high click rates. Based on this insight, we introduced an "Our Top Picks" area with tabs that allow users to select their respective product categories.

Cutter & Buck Top Picks
As site traffic continues to grow from mobile sources, making sure that a website caters to a customer's screen size of choice becomes more critical each year. To ensure that mobile users have the best experience possible, Groove Commerce made two major site-wide changes.

First, we reduced the mobile site's Navigation Bar's height by approximately 50% to lend more space to relevant content while browsing or typing a query in the search bar. The search bar is also now located within a newly redesigned “Hamburger Menu” which displays categories as left-justified text links. This replaces the previous design with an optimized and easy to use experience.



Hamburger Menu-2

 

Another idea we brought to the table was to completely reimagine the homepage and category page’s promotional content modules. To accomplish this, we integrated Searchspring’s machine learning capabilities directly into content modules. This feature allows Cutter & Buck to show users products that are the most popular, highest margin, or in season while being in line with their browsing habits. Instead following the long path of “Women’s > Jackets > Product Page > Product Detail Page”, a user can now jump directly to a Product Detail page from the homepage based on their habits up until that point.

In regards to Product Detail pages, our tests signaled user habits in line with current eCommerce trends. Users were found to spend most time on product pages switching between size and color options. Additionally, many users chose to view photos of the product from different angles before making a decision.

Product Detail Page-1

To make the best use of these trends, our team of designers and developers increased the image carousel size, introduced variant swatches and removed the breadcrumbs path from the top of the page on mobile screens. Most importantly, we increased the "Add to Cart" CTA size significantly to drive conversions. These changes allow the customer to view the information they feel is important more readily while eliminating distractions.

Finally, we made changes to the Cart and Checkout pages of the website as a poor experience here can lose a customer who is only a couple clicks away from completing the checkout process. Most importantly, we reworked the Mobile Cart to move the checkout CTA (call to action) on the Cart page from the bottom to the top of mobile screens. This means that when a user has many items in their cart, they do not need to scroll down to take the next step.

Cart Checkout-2


In addition, we added clear callouts for shipping and returns that makes the customer more comfortable purchasing from a potentially unfamiliar online store. Lastly, clearly labeled recommended products  at the bottom of the checkout page using Searchspring’s database to display products that the user may find valuable and help to increase average order value.

The Results

Cutter & Buck’s main objectives were to improve the user experience and to increase conversions. Groove Commerce’s answer was to create a unified user experience and user interface, as well as decrease the amount of total clicks required for a customer to find the product or products they would like to purchase.

To accomplish these goals, our team of eCommerce designers and developers considered the site elements that are most commonly viewed and clicked on and made them more prominent while downsizing or removing elements that were rarely interacted with. In addition, we added Searchspring integration which allows for personalized product recommendations that brings customers just one click away from checkout.

Comparing October 2020 to October 2021, Cutter & Buck saw an increase in nearly every KPI that they track.

  • 29% Increase in Revenue
  • 21% Increase in Transactions
  • 61% Increase in eCommerce Conversion Rate

Our team was able to achieve these results by leveraging the BigCommerce platform and its powerful native functionality. Choosing an eCommerce platform is one of the most critical decisions any company must make before moving forward with the design and development process. In many cases, we recommend that our clients host their websites on BigCommerce.

As the world becomes more interconnected, so should your eCommerce ecosystem. By making use of BigCommerce’s vast integration library, Groove Commerce was able to optimize search results and recommended products across the Cutter & Buck website. While BigCommerce allows for easy analytics tools integration without backend coding, BigCommerce’s native analytics tools keep detailed records of customer accounts, purchase history, buying trends and new visitor conversion rates in order for our agency to track how our design changes translate into real-world metrics.

Most importantly, BigCommerce allows agencies such as Groove Commerce to design and develop custom templates which can be applied to a given site. This is crucial to creating a streamlined and unified customer experience for a potential or repeat customer. Additionally, our team at Groove Commerce was able to create custom widgets using the power of BigCommerce’s Page Builder. Page Builder enables clients to publish website content updates without reaching out to their agency partners for each individual change throughout the year.


A disjointed user experience can slow down the time it takes for a customer to checkout and at worst completely lose the sale. Understanding and generating the best ROI from these BigCommerce tools can be a massive undertaking for any internal team with limited bandwidth. Having a team of highly skilled and specialized eCommerce professionals with you as you build you as your business grows is key to identifying what the sticking points in your customer’s journey are and how to overcome them.


Are you interested in working with Groove Commerce on your eCommerce website? Do you need help understanding why your conversion rates have stagnated?

We would love to work alongside your current team to find solutions to your issues and generate a positive ROI. Feel free to reach out to us via the contact form below.

Get in Touch