Improving Product Option Visualization and UX: A Case Study

Oliver Inc., operating aspecialtybox.com, specializes in creating custom boxes and packaging for products, gifts, and more. They also sell clear packaging and packaging accessories, such as ribbon and padding.

In such a highly commoditized (and competitive market) A Specialty Box’s core competency lies almost entirely within their ability to customize their client’s orders. 

Unfortunately, their previous eCommerce platform was severely limiting, specifically with respect to capabilities regarding the visualization of their custom offerings and product options. 

Consequently, the company partnered with us for a migration to BigCommerce paired with custom site redesign and development. 

Shift4Shop to BigCommerce Migration

One of this client’s biggest concerns with their preexisting eCommerce platform, Shift4Shop, was that it was highly limiting with respect to the way product options were visualized. 

That puts it lightly. Their previous platform actually offered no visualization functionality for prospective clients. Even to get a quote for a custom box required prospective customers to actively reach out to them.

You can see this illustrated in the image below. Requesting a specific customization is not possible from the product page and worse, there is no visualization feature for the product requested.

This resulted in a poor customer experience and an ineffective, unpleasant journey, to say the least. 

We worked closely with A Specialty Box to migrate their data over to a newly designed BigCommerce website. This was not a standard migration and to execute it we needed to work hand-in-hand with them to make sure their data populated appropriately. 

Because of the non-typical nature of this eCommerce data migration, we had to perform a series of quality control checks to ensure that their data synched and populated properly during the course of the migration.

Fortunately, thanks to the native product options functionality of BigCommerce, no particularly heavy custom development lift was necessary in order to fix this shortcoming. The data migration and re-platforming initiative alone redressed most of the concerns here. 

It was also the case that on the old website, product options that were displayed as available (without requesting direct outreach and a custom quote) populated as entirely different products, not as options. This was confusing and made for a cumbersome user interface. We condensed the website hierarchy to minimize this conflict so that each product option would be nested under the product and not listed separately as a unique one.

The new BigCommerce storefront, that we redesigned for them, addressed these concerns. 

Custom Homepage Redesign and Optimizations 

For this project, we redesigned the company homepage and also redesigned the product page template to make it more user friendly. 

As for the homepage, we didn’t overhaul the design or rebrand anything; we just worked with what we had to modernize it. As you can see from the image below, the new interface of the homepage simply has a more modern look and feel. We also updated navigation by prominently featuring main and top categories on the homepage just below the banner. 

We also improved the dynamic slider banner which lives on the homepage just under the megamenu; on this banner their custom product options and capabilities are prominently displayed to drive engagement and conversions. 

In addition, we improved the categorization and visual aspect of the mega menu, including images to streamline the customer journey, while also making the overall interface afforded by the menu more succinct, more accessible, and less overwhelming.

The new website design, built on BigCommerce, also offered a much better mobile experience than their old storefront did, with visual elements and text that scale more appropriately and responsively to the screen used to view the website. 

This aspect of the migration and redesign strongly benefits the user experience, but it also benefits the domain’s overall SEO score, which is a big consideration since our digital marketing team is also undertaking an eCommerce SEO campaign for them, which was running concurrently with the design and development work. 

Otherwise, we kept the bones of the branding and store design fairly intact, at least on the homepage. 

Product Page Redesign and Doogma Integration

Our most extensive redesign efforts were to the product page template, which, as stated, previously had no visualization functionality to showcase the company’s product customizations and options. 

Doogma offers fairly robust product visualization functionality; we integrated this tool with their BigCommerce website, but otherwise, our designers and developers took the initiative to build the product page customization features for customers to utilize. 

This joint effort between our designers, developers and the basic functionality of Doogma enabled us to create a conversion-optimized product page template for A Specialty Box that offers a pleasant, streamlined user experience, as depicted below.

Altogether, these changes we made to the product page, on our end and through partnership with and integration of Doogma, significantly improved the customer experience and journey,  better positioning A Specialty Box to meet the changing needs of prospective customers, while also ensuring it occupies a more competitive position to address unseen future challenges. 

Explore Our Other eCommerce Case Studies 

This strategic initiative we undertook for A Specialty Box, though impactful, only represents a handful of our technical and digital marketing capabilities. To learn more about other client transformations we have authored in the past, please see our full collection of eCommerce case studies.