Back
Expertise Overview
With thousands of products, we needed to come up with some creative UX solutions to help users easily find the product they’re looking for.
During our discovery process with Bivar, we were immersed into the world of printed circuit board components. Conducting interviews with key stakeholders within the company gave us loads of insight into the challenges their users faced on their website.
In addition, we learned about all of the complexities of Bivar’s products, and the incredible breadth of product lines they offered. A single positioning component could have hundreds of variations in length, size, color, outer diameter, and inner diameter. Plus, each variation had its own unique SKU. It was apparent early on that we needed to come up with some creative ways for users to easily be able to find the product they are looking for.
The bulk of the UX strategy was focused on how to simplify the user journey of finding products. Bivar’s products hierarchy on their old site was pretty complicated, so we needed to find an effective way of simplifying things to make it easier for visitors to find what they needed.
Our goal was to streamline the journey and decrease the number of clicks it took to land on a page containing specific product info. From the subcategory pages, we introduced a shortcut that allowed visitors to toggle between numerous product options using a series of dropdown options for color, length, width, diameter, etc. This allowed visitors to compare similar products from one page, making it easier for them to hone in on the specific product they were looking for.
Another hefty part of our UX strategy was spent planning the details for a product configurator that would allow Bivar to easily add all of their products to the content management system. To plan this, we mapped out what was necessary to add a product – all of the attributes, values, images, and documents that would be needed and how what the relationship was between everything.
Aligning the website look and feel to Bivar’s brand values was where our design team got to put their passion into action. The colors, imagery, and fonts were all intentionally curated to reflect the technological focus of their business.
In order to give Bivar the most control over managing their product catalog, we build the website on a custom .NET platform. The backend system for product creation seems simple when in use, but took a great deal of logic and programming in order to implement it properly.
We began with creating a bucket of product option categories (e.g. length, width, color, etc.) for a particular product category and then created individual the individual options (i.e. for length there might be 4mm, 5mm, 6mm, etc and for color there might be white, black, green, etc.). Once the administrator created all of the individual options and option categories for a particular product category, we automatically generated individual SKUs for each variation of product and the product variations populated on the front end of the website.
Once the development was complete, we worked diligently to test Bivar’s new website. With so many product variables, it was an incredibly time-consuming task. We needed to ensure that each product displayed with the correct part number and associated image based on the product options selected.
Once we were confident that the backend product creation and frontend product pages were working properly, we then began testing on mobile and tablet devices to ensure everything responded properly and provided an optimal user experience.
After several rounds of testing, we were confident that the site was working perfectly and we began preparing for launch. Migrating the site onto the live server, we went through another full round of testing to ensure the live site functioned exactly the same as the development environment.
Keep an eye out for awesome web content heading straight for your inbox!
Let our friendly web experts curate a personalized list of improvements that will help enhance the online presence of your brand.
Δ