Case Study: Budget Stencil Move and Redesign For XtremeHelmets

Moving to Stencil On A Budget

XtremeHelmets is a BigCommerce site that sells motorcycle helmets and other motorcycle gear. Like many BigCommerce merchants, they wanted to move their Blueprint site to Stencil, so they reached out to us.

We moved XtremeHelmets to Stencil with our Stencil Upgrade package. It’s a budget-friendly way to get onn Stencil that gives you the framework’s enhanced performance, plus an updated design and a few customizations. We recommend it for growing businesses who need a UX upgrade – maybe their current site isn’t mobile-friendly, or doesn’t have any customizations. This package gives you a design upgrade and a great foundation to build on without breaking your budget.

When you get the Stencil Upgrade package, you work closely and collaboratively with your developer. You make a list of the most important changes you want to make to your site and your developer remains in contact with you throughout. Together, you work to enhance your site’s branding and choose customizations that encourage customers to buy.

Read on to see everything we did for XtremeHelmets.

Benefits of BigCommerce Stencil

Even without UX optimizations, moving XtremeHelmets’ site from Blueprint to Stencil gave them a significant improvement in terms of site performance. Stencil is the newest and most advanced version of the BigCommerce framework (the code base BigCommerce sites are built on) and offers benefits over Blueprint such as:

  • Faster loading times
  • Cleaner, more efficient code
  • Easier for developers to customize
  • Better for SEO
  • More mobile-friendly
  • AMP-compliant

Read more about Stencil’s many benefits here!

Additionally, XtremeHelmets got an extra bonus by moving to Stencil with IntuitSolutions: our optimized Cornerstone theme. When we move a client to Stencil, we put them our exclusive Stencil theme. It’s an internal, exclusive-to-us version of the theme that includes bug fixes and SEO improvements that represents hundreds of hours of developer work. Once that theme is applied, the site can be customized to have any appearance while maintaining the benefits of the extra development work.

Every business that moves to Stencil with us gets our exclusive, optimized version of the Cornerstone theme, representing hundreds of hours of additional development work.

Custom Icons And Calls-To-Action On Homepage

The standout feature of XtremeHelmets’ redesign is a highly customized homepage with several rows of interactive CTAs. Each CTA was specially designed to correspond to the most common customer site path and to help customers find the Products they need. This allows customers who understand generally what they need but don’t have a specific model in mind to locate relevant Products without getting overwhelmed.

Shop By Vehicle Type

Directly below the top banner is a menu of interactive icons that prompt customers to shop for helmets based on vehicle type. These are completely custom icons created by one of our in-house designers. They lead to a Category page that displays all the helmets appropriate for that type of motorcycle.

Custom icons let users shop by the type of vehicle they have, rather than Categories or Subcategories.

Shop By Helmet Type Or Gear

The newly-designed homepage also has CTAs that allow customers to shop by helmet type and by gear (gloves, jackets, etc). These are hardcoded but can be easily updated by the merchant in the back office, allowing the flexibility to update site content as your stock changes.

Shop by gear

All CTAs have animated microinteractions on hover.

Shop by Helmet Type

This row of CTAs is organized by Subcategory.

Specially-designed CTAs correspond to the most common site paths, helping users find what they need.

BigCommerce Customizations For Category Page Images

XtremeHelmets has excellent Product Images and our development team wanted to make the most of their assets. We implemented two of our BigCommerce add-ons for image optimization: Image Swap on Hover and Swatch Options On Category Page. Both improve interactivity on the Category page and show off Product Images.

Make the most of great photo assets with BigCommerce customizations to show them off.

Image Swap On Hover

Image swap on hover lets customers preview popular Product Options from the Category page by creating a toggle effect that appears on hover. When the user moves their cursor over a specific Product on the Category page, the first Product Photo is swapped out for the second. It’s a great way for a site like XtremeHelmets to show off Options like colors, or to show off different angles.

Image Swap On Hover

This add-on lets you toggle between two images from the Category Page

Swatch Options On Category Page

Our Swatch Options On Category Page lets customers preview Options from a row of clickable swatches. This add-on pull Swatch Options into a row of thumbnails that appear beneath relevant Products on the Category page. Customers can click the images to preview each Option without having to navigate to the Product Page.

Option Swatches

View options from clickable swatches on Category page.

Even More BigCommerce Customizations

We gave XtremeHelmet a number of other add-ons as part of the Upgrade Package:

  • Brand-specific size charts on Product Page
  • Custom sashes on Product Images (“New”, “On Sale”, etc)
  • Top-level landing page listing every Category

Move Your Site To Stencil Today!

XtremeHelmets are just one of dozens of clients we’ve successfully moved to Stencil. We move businesses of all sizes and offer custom solutions and consulting to fit every industry and business model. Whether you want to recreate your existing design or get something new, we have a package that’s right for you. Call us today to get on the best-converting BigCommerce framework!

Internal Resources and Marketing Specialist

Emma studied English in college, then later discovered the world of technology through her work in nonprofit marketing and communications. Inspired by the power of the web, she began teaching herself to code. She brings those skills, plus a background in content creation and an interest in human-centered design, to a role where she seeks elegant digital solutions to problems of all sorts. In a former life, Emma taught ESL and worked as a freelance writer on a variety of projects ranging from natural health newsletters to poli-sci textbooks.