Focusing on the Details for an Electronics Parts Manufacturer

OVERVIEW

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.

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.

Focusing on the Details for an Electronics Parts Manufacturer Build Image-0

Focusing on the Details for an Electronics Parts Manufacturer Build Image-1

Focusing on the Details for an Electronics Parts Manufacturer Build Image-2

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.

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

The backend system for product creation seems simple when in use but
took a great deal of logic and programming in order to implement properly.

CLOSING THOUGHTS

Utilizing a simple approach to displaying complex products, we redesigned and developed a website for Bivar that lets their detailed electronic components shine.

VIEW SITE VIEW CASE STUDY PDF

Menu

Focusing on the Details for an Electronics Parts Manufacturer

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.

The backend system for product creation seems simple when in use but
took a great deal of logic and programming in order to implement properly.

CLOSING THOUGHTS

Explore Our Related Expertise

TELL A FRIEND

Finding an agency who understands your digital needs is hard.

Share this: