Kindle & Fire Mobile Comparison Table

Summary

I designed and prototyped a mobile-optimized comparison table to help customers better understand the differences between similar devices.

An image showing the way the table flows beyond the device screen.

Problem

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?").

Two screenshots from the old comparison table. This version was information-dense, but had poor visual design and usability, especially when scrolling.

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.

Process

After several design iterations, I developed a fully-interactive prototype. We used this prototype for a usability test to assess customers' ability to use the table. After the usability test, I made minor changes to the table, then helped our developers implement the design by providing CSS and JavaScript guidance.

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.

Results

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.

Two screenshots from the new comparison table. Here, the customer has landed on the table (left), then scrolled horizontally to see more properties (right).

A final version of the comparison table was developed and is currently undergoing A/B testing.