Bivar Website Design & Development
Challenge
To say that Bivar focuses on granular detail is an understatement. They don’t make computers. They don’t make printed circuit boards. They make the components that go on printed circuit boards and have been an industry leader in the field of small computer components for years. From the positioning components to the LED lights that go on printed circuit boards, Bivar is a trusted solutions provider for circuit board components of all shapes and sizes. 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. Discovery During our discovery process with Bivar, we were immersed in 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 face 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.
Solution
UX Strategy 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. Build 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. Test & Launch 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.
Results
With their freshly redesigned site, BIVAR has an innovative website that allows visitors to quickly find the product they are looking for. Bivar site administrators are able to easily manage products from the robust content management system, and will have no problem adding products in the future as they continue to expand their product line.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.