UX Research, Design and Development for BigCommerce Stores: Tuki Covers and Custom Amp Covers
Overview
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?
Personas
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.
The target persona for Tuki Covers is a professional musician who needs durable covers to protect his gear travelling to gigs.
The Custom Amp Covers target persona is a hobbyist builder with a large collection of amps.
Competitive and Domain Analysis
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 Architecture
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
Custom Amp Covers before and after header sections highlighting reorganization of categories and sub-categories
Tuki Covers before and after header sections highlighting categories moved to the Shop mega menu
Hero Section
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 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.
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 Design
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.
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
Text only descriptions before redesign
Instructions with steps, infographics, equipment diagrams, and product photos after redesign
User Testing
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.
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.
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.
Changing the bottom covering to a checkbox instead of a radio button
Next Steps
Technical Challenges
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
"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
Custom Amp Covers Final Site
