top of page


HCI Interaction Design Practice Midterm project

We have always been shopping online through various e-commerce retailers, but to get a good deal, we always need to jump in between various websites to compare their prices, ratings, reviews and product details. What if there is a solution where shoppers do not have to take these extra efforts and directly find similar products from various websites in a single place? That would save a lot of time as well as make sure that the users complete the checkout process with a positive mood in the end.


The objective was to ease up the online shopping process, and also in the process make sure that users get the best deal on items that they are looking for by not missing out on a website that they were probably not aware of.

This interested us because it was typically something associated as something that younger people do, and the way e-commerce has been done has generally stayed the same for stores for a year—a store has product, you add it to the cart, you check out, receive the item, and you can potentially review it. In discussing this, we wanted to explore problem areas of both online and in-person shopping, how they are different, how they may be fixed, and if we could potentially close the gap between those who online shop, and those who shop in person.

Duration: August - October 2017

Members: Parth Patel, Ke Zhuang, Mark Jason Hunt

Role: Research on the pain points that are currently existing for shoppers, brainstorm for solutions and create a low fidelity prototype which can be tested with a sample set of users and creating high fidelity prototype based upon the feedback received during testing.

User Study and Research

We studied regular and frequent online shoppers to gain overview of how they move around the websites, how they decide on the which product to buy, and how do they do so by considering which parameters the most important.

“I open up all the tabs of my favorite shopping sites and go down the line.”

We observed that they had to open multiple tabs and then compare products by stressing on their cognitive memory as the details mentioned were not always in the same units, e.g. one site mentioned the size of shirt in centimeters, while other was in inches. So user not only switched between browser tabs for various shopping websites, but also had to convert the units mentally or in another browser tab.

A user converting units as they are inconsistent between different websites.

“There are so many choices to choose from it is hard to make a decision.”

The selection online is unlimited, so making a decision can be difficult and overwhelming. While filters are a key component of online shopping, they can be inconsistent, deceptive, or leave out products the user may want to see. At the same time, the selection online is unlimited because products can come from anywhere in the world, people in unfamiliar places can purchase items that are familiar to them or cannot be found at the same time.

What we also found is that online shopping is solitary while in-person shopping is social. While obvious, this is important to note. For example, shopping in-person socially mitigates any need for reviews. Word-of-mouth is the in-person version of online reviews. While it is difficult to envision how one might make online shopping social, we wonder, based on our interviews, if people even want online shopping to be social.

We noticed that people rely more heavily on customer service and friends for advice and help in shopping. On the other hand, people rely heavily on reviews, filters,and reputation to replace those things when shopping online. But are they effective replacements, or do they not take into account human factors?

The user is switching to another website as she cannot find the product she wants on this website.

User filtering to specify the search result because she cannot find the exact thing she wants to buy.

Key Findings
  • Shopping online can help you make a decision by yourself and not get influenced by others.

  • Online shopping is convenient and has more choices.

  • It’s hard to choose which size to buy especially for clothes.

  • It is easy to order wrong products just by misreading the title or description having overlaps in attributes.

  • People avoid in person shopping as to avoid customer service and knew what they wanted without question.

Problem Synthesis

We created affinity diagrams by writing down issues and benefits we found during our observations and interviews.

We also created an empathy map from the issues and benefits we found during our observations and interviews.

Our Solution

We storyboarded our top 3 ideas  we came up with during our brainstorming sessions

Areas for Design Exploration

A Universal Cart

We wanted to explore this idea of having one cart across all stores to solve the issue of using many different tabs with many different carts, along with the inconvenience of having to enter personal and payment information across multiple sites. We were not sure about what features it would have, how it would be implemented, or how it would effectively solve problems, so we were very interested in exploring it.

Targeted/Personalized Search Results

We also liked to explore a way to show products that are unique to you in search results. There are things like this currently, but we felt that there would be a way to have better targeted results using big data, along with past purchases, habits and behaviors, and things your friends also bought. Since most people wouldn’t want you to know what they have in their cart or what they bought personally, this would be anonymous.

Softer Product Filters

Currently, filters are very rigid. A product someone may want that is $905 will automatically be disqualified if a filter is set at $900. There are other times where filters are too rigid, and do not take into account human factors. For example, a product may be disqualified because they did not want to see red products but a product that otherwise is perfect for them has a speck of red, which is something softer product filters could solve. Essentially, current filters are too rigid, and don’t give into the fact that humans weigh pros and cons.

Incentivizing Reviews with a Social Component

Reviews are typically made by people who have the time, or people who are on two ends of the spectrum. They are either very happy or unhappy about a product. This skews products to the left or right unnecessarily, and does not give an honest picture of reviews. While “This product was helpful” can help users find credible reviews, incentivizing reviews with a social component could have a benefit (think: a respected Yelper).

In reviewing our potential solutions and our storyboard, we felt that the universal cart best addressed our problem space. As illustrated in our storyboard, the universal cart allows users to manage the shopping experience from one unified space. Online shopping is overwhelming for many reasons, but a big reason is that users have to manage many carts across multiple stores, enter payment and shipping information many times, and have to manage sales totals, receipts, from many different stores, etc. A universal cart solves all of those issues. In addition, the biggest problem for online sellers is shopping cart abandonment—users forget about their items in their cart, or they forget about the store entirely! A tool that let’s users have one cart can solve this for sellers, while also helping users’ by giving them a unified experience that is less fragmented. Imagine having to check out your items every time after visiting every section or aisle of the grocery store!


Low fidelity prototype

Tool used: Balsamiq Mockups 3

High fidelity prototype

Tool used: Photoshop

After conducting cognitive walkthroughs, heuristic evaluations and think aloud tests with sample users as well as conducting self heuristic evaluations, we found and ironed out the issues present in the low fidelity prototype.​

Issues faced by users in low fidelity prototypes and fixed:

  • Cart items counter is not visible in the top left corner - We moved the counter to the top right corner of the screen where the plugin is, and also added it to the popup plugin.

  • No way to remove items from quick checkout - We added delete buttons for quickly removing the items from the popup plugin screen before the user can checkout.

  • Users found it weird to give a single recommendation amongst different kinds of goods - We categorised the products based on their type so that the recommendations are much sensible to the users.


Upon completion of my first prototyping, I learnt that users will always be able to give better feedback of the system than what I can imagine. There will always exist issues that we might not be able to see or recognise. And the method of user testing that we conduct is very important as every method gives us different aspects of feedback, such as heuristic evaluation highlighted issues that were minute and cognitive walkthroughs highlighted issues in the tasks that couldn't be recognised unless actions are taken in that particular sequence to complete a certain task at hand.

bottom of page