Redesigning ShopAdvantus.com

Redesign the flagship e-commerce site of a growing multi-million dollar company? No pressure! Just another day on the job at Advantus.

Background

Advantus Corp. is the parent company of brands being sold worldwide. You may not have heard of them, but you have almost certainly used their products. ShopAdvantus.com primarily sells products from the commercial office products division of the company.

The original site pre-dated any of the members of the web team at Advantus, and it was clearly time for the site to match the profile of the company it served. I was tasked with leading the redesign of the site.

Platform

The old version of the site ran on a platform called Product Cart. While it integrated well with the company’s ERP, the platform had grown outdated, and it did not allow for the level of customization needed by the company.

The new site would be switched to a WordPress platform that allowed for greater extensibility and customization. Additionally, it would use WooCommerce to allow it to perform its e-Commerce functions. 

Design Phase

The old ShopAdvantus.com often proved difficult to use because of its layout and structure, so we needed additional information before designing a site. I conducted preliminary user research to see how people naturally tended to group our products. Then I used this data to organize a few master categories for our products. 

I also spent time developing a new layout. I wanted the new site to be easy to use while also highlighting products we wanted to push more aggressively. You can see my initial mock up above that I brought to creative director, Heather Laude.

Building the Site

For this site, I created a child theme of a popular base theme. Extensive modification went into the site styles in particular. For instance, I created a custom hover effect used on the home page used in the section below the hero image.

As a graphic designer as well, I also had a lot of control of the look of the site. I based the look for the site on a flyer I had created earlier for the division. I wanted to capture the a modern, dependable feel using bold sans serif fonts and a blue/grey color palette. However, mid-way through the design process I was hit with a surprise announcement…

The Surprise

The company announced that it would undergo a rebrand. In one regard, the timing was great since, I was working on a brand new site anyways, but the rebrand also included a new logo and color scheme that would have have to be incorporated into my original design. In the end, it actually complemented the design quite nicely.

More Challenges

The website also served important customer service needs that had to be taken into account. For instance, customers needed to be able to download manuals and templates for several products. On the original site, this existed as a long list of links. To make it more manageable for users, I reorganized this into an accordion style display.

Certain products also required customers to obtain quotes from directly from customer service. Together, my partner, Kelly Price, and I developed a solution. These items would receive a special tag to alert WooCommerce to remove the Add to Cart functionality and replace it with a Quote Request button.

Conclusion

The new ShopAdvantus.com was launched in Summer 2018. We have listed hundreds of products, and we continue to make updates and improvements at every opportunity. You can read more about these improvements here.