Compare It

Interaction Design


This project is a simple re-imagination of the online shopping experience; more specifically the process of comparing products. Currently, while online shopping, there is no easy way to compare products while one is browsing.
Compare
I interviewed some individuals about the techniques they use when comparing items online and here were some of the responses I received:

“I open tabs and go through them all slowly. I also save my favorite items to the wishlist, if that's available.”

“Opening up new tabs is the best way to compare. Sometimes I just go back and forth, only if the webpage will direct me back to where I found the item.”

“I screenshot images with price and then look at them all together on my desktop.”

“I add all to cart and then take away till final decisions.”

Comparing products by either opening many tabs or screenshotting product pages all disrupt the user’s browsing experience. Adding products to a cart or wishlist on the other hand does not allow users to easily view the details of the items that they are considering. An uninterrupted browsing experience is important: in an usability test, over 90% of users looked for a “view all” option or pressed the "view all" option to find what they were looking for quickly when presented with a page.
My proposed solution is the “compare module”, a space in which users can compare items that they are interested in without interrupting their browsing. It is a space for people to keep track of items and ponder their purchases, accessible at any time. By simply dragging the item that they are interested in, the user will trigger the compare window which is usually nested and out of their way.


Once they drop the item in, they can view the details of the item within the window, compare with other items, keep track of items that they are interested in and add items to their cart, all on the browsing page. The user flow of the compare module can be viewed here. I built a prototype of the drag and drop interaction using jQuery UI which you can try by clicking below.
Try Prototype