Sealed Air Auto Protection Matrix
SEE (formerly known as Sealed Air) makes so many protective and shipping products for so many industries, odds are what you're sitting on, looking at, holding or eating, right now, was packaged in or protected by a SEE offering at some point. In order to help its automotive part manufacturing customers choose the right protective solution, SEE needed a simple interactive graphic they could point, click, and explore.
With this matrix of car parts and appropriate packaging solutions, customers could simply click on the part they were shipping and the widget would offer up the best options.
Desktop view allowed for the most horizontal space to fully expand the side panel view. The user can select categories, which populates the auto part locations on the vehicle visual or within the side bar that lists the part types. The matrix then populates with the various material solutions and products so the user can compare and contrast features.
iPad responsive design gave more real estate to the matrix and less to the car imagery. Because the user of this matrix was mostly automotive industry professionals, the car visual was less important hierarchically than the matrix information. That imagery still exists a bit lower on the scroll.
Mobile responsive design called for an adapted version to give the most space to the matrix. The solve here was to eliminate the bar at the top, replaced by a back arrow to bring the user back to the full category view. Because of the challenge of the amount of information within each product type, the solution was to incorporate a pinned option and then toggle through the additional products. This allowed the user to have large format viewing of the product information in a compare and contrast view for the best protection solution.