I designed and prototyped a mobile-optimized comparison table to help customers better understand the differences between similar devices.
While the existing mobile comparison table was very information-dense, its design made it difficult and cumbersome to use, especially when scrolling along either dimension led to loss of context (e.g., "which device is this column about?").
We wanted to create a table that allowed the customer to retain the context of each row and column and present the data in a way that afforded better comparisons within each property.
The proposed design flipped the axes such that each property was a column and each device was a row. The table used a "sticky" left column that stayed on screen as the user scrolled through the properties horizontally, allowing them to always see which product the row corresponded to. While the proposed design was less information-dense than the previous version, I believed that the usability would be drastically improved.
In our usability study, the comparison chart performed extremely well, with all 12 participants immediately understanding that they could scroll horizontally to see more properties. As expected, some participants commented that they were not able to see all the information at once, but appreciated that they didn't have to scroll back and forth to remember which product they were viewing.
A final version of the comparison table was developed and is currently undergoing A/B testing.