Product Comparison Tool Redesign

Client: Self-initiated (speculative redesign proposal for Storm Product Inc.’s comparison tool)

The Problem
This redesign started with an observation from Clarity session recordings: nobody was using the tool the way it was built to be used. Every recorded session showed the same pattern: users scrolling straight past the icon-based spec summary at the top of the page, heading directly for the reaction graph, the one section that actually helped them decide between two balls. Worse, once they got there, the graph asked them to manually toggle between three separate visualizations to compare hook length, oil volume, and lane condition, and it was unclear where those segments actually overlapped. The tool’s most important feature was, functionally, unusable.

The Redesign
I rebuilt the experience around what people were actually trying to do: see two products overlap on the same metrics, instantly, with no extra steps. The icon section was removed, since most of the icons were too abstract to communicate anything on their own and were consuming disproportionate real estate on smaller screens for zero payoff. Rather than lose that data, I folded it into the existing specs table as clearly labeled rows, so every value the icons used to represent is still there, just laid out in a format users could actually scan. The reaction graph became a single chart with true segment overlap instead of three toggle states, so a user can see where two balls converge or diverge without clicking anything. And I dropped the comparison from three items down to two: at three, the layout depended on a horizontal-scroll container that broke on mobile; at two, the whole comparison fits in one vertical flow, with tabbed navigation (Specs, Reaction, Videos, Related) replacing the long scroll for faster access to any section.