Model Comparison Chart

Project Requirements

The existing model comparison chart on this website had all information for all models visible at once. This made it very difficult to compare 2 different models among the 18 available, especially if the user wanted to compare 2 on opposite sides of the chart. Even on a large desktop monitor, it was difficult to properly compare the specs.

My Plan

The bulk of this project was the HTML portion. I created the table with specs for all 18 models, and added CSS classes to each <td> and <th> tag for the corresponding model. I also added a class named “hide” to hide any models that weren’t selected.

After that, the JavaScript was simple to set up. Each time a user selects a model, remove the ‘hide’ class from all elements with the corresponding model class selected. I also added error-proofing to allow only 3 models to be selected at once. This enhances the user experience, and allows the chart to be as responsive as possible.

On mobile, there is still some scrolling required, however it has been greatly reduced.

The Result

A more user-friendly, responsive chart for comparing steamer models.

See below for some more screenshots, or try it yourself here: steamericas.com/steamers/model-comparison-chart

Note:

I completed this project while working at Primal Communications, and have no current affiliation with Steamericas.

Gallery