Logical Increments is one of the most popular websites that help users build a PC. The site uses a large table to organize its recommendations. The team wanted to improve the usability and looks of this main component. The result was a UX overhaul that helped the company grow its audience. 

The table online: https://www.logicalincrements.com/

A quick overview of the top part of the table:

Table Header and Part Icons​​​​​​​

To help users understand the columns of the table, I created a series of icons:

The icons show the part descriptions on mouseover:

The PC components themselves are organized into "Tiers" and sorted by price. I used colour and iconography to communicate this order.​​​​​​​ The icons show incremental complexity while the Tier names help the user understand the hierarchy:

Each tier name/icon has a modal that opens on mouseover. The modal includes information about the tier, including the price, a description, and what the PC build is good for (coded in colours).

More tier modal examples:

Each part also has a modal showing the part description, price, and technical specs.

More modal examples with their own specific components like performance comparisons and game ratings:

All tiers can be expanded to see each component and combination in more detail than that provided by the modal. 

The part alternatives are displayed as tabs:

The table switches to a vertical design for mobile viewport sizes:

The open tiers and component details: