helps you find the perfect gadget. ver. 1.8.7

Blog

Hi, we're the people of Measy.

Iterating on our product details UI

May 04, 2011

One of the harder UI problems we're trying to solve is how to present product configurations on our site.

For example, there are 8 different types of iPhone 4's (Verizon 32GB White, Verizon 32GB Black, Verizon 16GB Black, Verizon 16GB White, AT&T 32GB White, AT&T 32GB Black, AT&T 16GB White, AT&T 16GB White).

If you use the smartphone compass and your best match is the iPhone 4, we don't want your top 8 results to be all iPhones. It's a noisy and somewhat uninteresting result. At the same time, we shouldn't hide the fact that there are multiple versions of the iPhone available. Balancing information density and usability is always a delicate balance.

Our product detail pages were already buckling in some areas from all the information they were tasked with presenting, so we needed to lighten the load on the current UI before burdening it with more information. Not to mention, the information hierarchy was somewhat anemic, which was important to address if we are to add another layer to the product pages. The results are below.

Before:

After:

We also updated our reviews pages (see the Canon S95 reviews).

Comments