MSC Industrial Supplies
Industrial equipment company, distributing more than 1.5 million metalworking and other industrial products.
Background
MSC is one of the largest industrial equipment distributors in the United States, distributing more than 1.5 million metalworking and other industrial products.
Challenge
In collaboration with other designers, we concluded that the old interface had three major problems:
Too much information filled the screen with text
The page is not responsive and needs a mobile version
The user’s goal is not clearly defined
Design
We simplified the account section and move it to the top right of the screen. We only wanted to display important information. We changed the radio buttons into toggle buttons because it would translate into a smoother mobile experience. We moved the extra categories down to the bottom to allow the user more real estate to concentrate on the tasks at hand.
For the overall design direction, we removed the black borders and rounded the edges to create a sleek and modern feel. Breadcrumbs and navigation texts were sized down and icons were updated with a modern design. Less is more was the philosophy behind our designs.
Manage Categories
Before
After
The PO control is where the user can manage their product orders. Instead of flooding the page with text, we added a read more navigation tool and ellipses that would open a pop-up with more information. In order to understand how the UI changes based on the number of orders, we created a variety of use cases to test.
PO Control
Before
After
We used the PO control and the cost allocation page as a template for the other pages. We simply switched old icons with new icons from our design closet and matched the UI branding to the new branding. We simplified the look by changing the security icon to a checkmark.
Order Approval Management
Before
After
We simplified the account section and move it to the top right of the screen. We only wanted to display important information. We changed the radio buttons into toggle buttons because it would translate into a smoother mobile experience. We moved the extra categories down to the bottom to allow the user more real estate to concentrate on the tasks at hand.
For the overall design direction, we removed the black borders and rounded the edges to create a sleek and modern feel. Breadcrumbs and navigation texts were sized down and icons were updated with a modern design. Less is more was the philosophy behind our designs.
Manage Carts
Before
After
Customer Part Numbers
We used the PO control and the cost allocation page as a template for the other pages. We simply switched old icons with new icons from our design closet and matched the UI branding to the new branding. We simplified the look by changing the security icon to a checkmark.
Before
After
