Snag IT Consulting
  • Services
  • Portfolio
  • About
  • Contact

UX Research, Design and Development for BigCommerce Stores: Tuki Covers and Custom Amp Covers

Tuki Covers Logo Custom Amp Covers Logo

OverviewProblem Statement icon

2020/2021 - Timeline: 8 months

Tuki Covers and Custom Amp Covers are related sites owned by the same parent company that offer covers for musical equipment. Tuki Covers are padded, more durable, and available in black only, whereas Custom Amp Covers offers lighter dust covers in many colors. Both companies offer the option to special order a custom cover if they don't have the correct model in stock.

Custom Amp Covers and Tuki Covers are hosted on the BigCommerce platform and needed to upgrade to the internal Stencil framework. We took this opportunity to redesign both sites. How could we help customers find the correct cover at one of these sites?

PersonasPersona icon

The personas were developed by working with the owners of Tuki and Custom Amp Covers based on their customer profiles. We've worked with Custom Amp Covers for over 15 years and used our knowledge of the amp cover industry to help narrow down their target personas.

Tuki Covers Persona

The target persona for Tuki Covers is a professional musician who needs durable covers to protect his gear travelling to gigs.

Custom Amp Covers Persona

The Custom Amp Covers target persona is a hobbyist builder with a large collection of amps.

Competitive and Domain AnalysisAnalysis icon

Tuki Covers and Custom Amp Covers have three main competitors:

  • Large online music stores
  • Amp manufacturers who sell branded covers
  • Boutique manufacturers who offer custom fit covers

In general, large online music stores and most amp manufacturers sell a less expensive, but less durable cover. They run sales promotions and offer free or reduced shipping, but they have a much smaller selection with hundreds of covers. Larger stores don't tend to offer padded, customizable or custom made to fit covers.

Only a few custom boutiques offer the same level of selection as Tuki Covers and Custom Amp Covers. Many of these sites are outdated or have UX flaws such as horizontal scrolling, non-responsive design, custom order forms without math error checking or units of measurement, not showing photos for individual products, poor search capabilities, or no way to purchase products on the site.

Learning from the the other sites analyzed, we implemented the following:

  • Search in header on every page with drop down results to allow users to find a cover easily no matter where they were on the site
  • Clear labels for Shop and Get Free Custom Quote which tested better than the previous labels Speaker Covers & Bags and Find Your Cover
  • Message at the bottom of category pages directing the customer to Get a Free Custom Quote if they didn't find their cover to help users find the custom order forms to fill out
  • High quality photos of almost every cover offered to decrease abandonment rate for purchases
  • Large lightbox images to show extra features on product pages like color, piping, hem binding, pockets, bottom strap, or bottom flap instead of redirecting users to a new page and away from the product they are purchasing
  • Diagrams and photos of dozens of custom types of amps and music equipment to help find the correct diagram to place a custom order to replace the previous text only version of the menu
  • Dimensions and math error checking on custom order forms to help customers fill in the correct measurements for complicated forms where certain dimensions need to add up to another dimension
  • Infographics to help guide filling out the custom quote form

Information ArchitectureInformation Architecture icon

For both stores we decided to simplify the top navigation headers. The previous headers had too much information and it wasn't clear what all of the categories meant. All of the shopping categories were moved into the Shop mega menu and all of the custom orders were moved under Get Free Custom Quote

  • Find Your Cover and Speaker Covers & Bags were changed to a Shop button with a mega menu. Category sections like Drum Head Covers, Acessories, Piping/Welt, DJ Facade Bags, and Drum Cases were moved to the mega menus
  • The navigation items for custom order forms (Custom Orders, Drum Head Covers, Custom Covers & Bags, Custom DJ Facade Bags, and Custom Cajun Drum Bags) were moved to a category for all Custom Order Forms under Get Free Custom Quote
  • We kept some top menu items like Help, Contact Us, FAQs, and Shipping & Returns
  • My Account, Sign In, and Checkout were changed to icons
  • Customize was changed to Custom Options on the Custom Amp Covers menu. The many different types of customizations were each given a subcategory under this menu item
  • Remaining items were moved to the footer to reduce clutter
Headers before information architecture

Custom Amp Covers before and after header sections highlighting reorganization of categories and sub-categories

Headers after information architecture

Tuki Covers before and after header sections highlighting categories moved to the Shop mega menu

Hero SectionHero Image icon

The Hero sections for both stores had competing fonts, outdated graphics, and visual clutter. We decided to use a single hero image with a Call to Action leading to the Shop All section customized for each store.

Custom Amp Covers home page before

Custom Amp Covers Hero Section before and after redesign. The redesign is crafted from royalty free photos featuring a variety of vintage amps to appeal to the Jackson Parnell persona.

Custom Amp Covers home page after

Tuki Covers Hero Section before and after redesign. The redesign features an image of a professional musician performing to appeal to the Joe Ash persona.

Improving UX DesignImproving Design icon

Instead of redirecting to a new page when clicked, we updated the product options to open large lightbox images on Custom Amp Covers product pages.

Custom Amp Covers product page with lightboxes

Lightbox images

It was difficult to find the correct custom form on the Custom Orders page before redesign because equipment was listed by name only. In the redesign, we used clear instructions with steps, infographics, diagrams of the equipment, and photos of the covers to help customers find the correct form

Tuki custom quote page before

Text only descriptions before redesign

Tuki custom quote page after

Instructions with steps, infographics, equipment diagrams, and product photos after redesign

User TestingUser Testing icon

Users were asked to complete the following journeys:

  • Order a cover that is not listed on the site
  • Order a cover that is on the site and add extras like a custom color, pocket, or bottom covering
  • Find out how long shipping will take
  • Look up what kind of material is used to make the covers

The main discovery from testing was that there should be more places that explicitly call out that customers can order a custom cover if they don't find their make and model. This should be on the home page, each product page, the drop down search results, the search results page.

A positive feature was the error messaging to catch math errors when filling out dimensions on custom forms. Users liked the clear messaging and instant feedback before clicking submit.

Custom Amp Covers math error checking message

Error messaging when numbers don't add up correctly

Choosing both a pocket and a bottom covering was confusing. The radio buttons for the entire section are mutually exclusive, even though some are grouped together with outlines. Users chose the pocket option, then chose the bottom covering option, which deselected the pocket. They did not see there was a third radio option to add both a pocket and a bottom covering. The original intent behind this design was to offer a discount offered when both a pocket and bottom covering were chosen, but this offer was discontinued. We came up with a few redesign options for the next round of user testing.

Tuki product options

Current radio buttons were confusing

A redesign changes the radio buttons to include only the pocket options and uses a checkbox for the bottom covering.

Tuki product options redesign 2

Changing the bottom covering to a checkbox instead of a radio button

Next StepsNext steps icon

Next steps would include...

  1. Iterating on the designs for areas of concern found from user testing
  2. Adding clear Calls to Action informing users that there is a way to order a cover if they didn't find their cover
  3. Revisiting use of infographics on Custom Order forms so they don't look like clickable actions
...and performing another round of user testing

Technical ChallengesProgramming icon

Tuki Covers and Custom Amp Covers use a customized version of the BigCommerce Vault theme. We used JavaScript to add image lightboxes, to customize the product pages for added functionality, and to create custom packing slips and invoices.

Client Response Positive Client Feedback icon Cindy Wodnicki from Tuki Covers

"Stephanie has managed our website needs (and then some) for 17 years. She is thorough, conscientious, accurate and responds timely. I wouldn't hesitate to recommend her work."

CYNTHIA WODNICKI - TUKI COVERS AND CUSTOM AMP COVERS

Tuki Covers Final Site

Tuki Covers Screenshot

Visit Tuki Covers

Custom Amp Covers Final Site

Custom Amp Covers Screenshot

Visit Custom Amp Covers

Copyright © Snag IT Consulting 2023
  • Services
  • Portfolio
  • About
  • Contact