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?
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.
Tuki Covers and Custom Amp Covers have three main competitors:
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:
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
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
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.
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
Users were asked to complete the following journeys:
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 would include...
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.