a smarter way to sort and view products

the immunodiagnostics website is a place for customers to gain information about immunoassay testing and provides a catalog of products to browse. Since there was no development in place to add products directly to the cart, I concepted and designed a confined experience that would allow customers to select multiple products at various levels of the site, and add to a product list.

my role. ui design. ux design. art direction. brand strategy. visual identity.

scope.

The catalog had some very specific requirements related to the the science and users had difficulty selecting and browsing the products. Out of date design and an unclear customer journey combined with inconsistent styling made the site difficult to navigate.

solution.

The catalog required a 3 tier navigation to handle the complexities of the product selection. the experience starts on the 'catalog' page and helps users to decide which area they would like to search. The primary navigation under the header is for moving around the site, the secondary navigation populates under the hero when you are on the catalog pages, and the tertiary navigation provides filterable attributes for the user. Once inside the selection, the user can add multiple products to their list.

process.

we began the process by auditing the existing components and understanding where new components needed to be created. once all the requirements had been ironed out with development and stakeholders, a sitemap and customer journey was presented for sign off. utilizing the design system, I was able to create hifi rapid prototypes of the experience and also in-depth interactions for product selections and the 'add to list' functionality.

created customer journey and user flows
audit of components design system
creation of true templates and layouts
advanced functionality and interaction driven by database

defining the customer journey. the users needed a way to easily navigate from the solutions section of the site (consideration) into the product catalog (decision). to create consistency I designed a templated approach to the mutliple layouts. A large header to add high resolution imagery combined with a useful right sidebar as secondary navigation created a seemless journey and provided a valuable window for the business.

product catalog and primary selection. when the user lands on the catalog page they are presented with options to move into the main browsable areas. the secondary navigation allows the user to navigate there as well and provides a snapshot into the depth of the catalog, as well as, a search bar for users who know what they are looking for. Once the user is browsing the catalog, a filter bar is presented to allow quick filtering based on the specifics of the test being run.

secondary selection. once the user has selected their primary assay, they are then taken to a child page where they can select products related only to the primary product. The product details and specifications are listed above the fold on desktop and mobile for convenient access.

product list and export. the 'view my list' call-to-action is consistent throughout the experience providing users with an intuitive way to view how many items have been added and easily navigate to the “my list” page where they can add or remove, or export their results.

outcome.

the new templates and design have aligned the brand strategy and the leveraged the design system to create scalable results. the business can add and remove products efficiently from the backend while users have an intuitive way to browse available products, add to their product list and easily share or print the results. the final product is responsive for mobile, tablet, and desktop and the templated pages provide art direction for future campaigns and page creation.