I'm working on a price comparison website. The team asked me to display two overlapping price change information: price drop and discount.

When there is a discount on a product, it always means there is a price drop. But a price drop doesn't always mean there is a discount.

Price drop is programmed from the back-end to help users to know the actual price changes. Discount is a way for merchants to communicate price change on the product, but sometimes there are dishonest discount, i.e. the price is upped first then it is discounted later.

To compromise the needs of merchants and users, the team wants both information included. So far this is what I have come up with:

enter image description here

If you hover the mouse on the information, there would be title attribute to help explaining. But it still seem too hard to know which is which at first glance, and it could get confusing when there is a dishonest discount (like the example shown above).

Any input to improve the design?

2 Answers 2


The discount is something that has to be clear, and many times it's not clear if the price you see is the price before or after the discount. In your case, that doesn't seem to be the case, you are doing that part right.

About the price drop, if manager allow it, the best way is to show a graph showing the changes over time. You can make the link to the graph as an icon that resembles a graph line going down, better than going up. Or you can use a green and red arrows pointing down and up. In any case, you should use a clear alt/title text that describes the link and target of the link.

Of course that is a bit more work, but is much more rewarding for the user and as so, it may en up as a benefit for the site since the users will feel the site is honest and clear with the information and prices.


I would have only two price info on this grid SKU:

  1. Percentage off
  2. Price reduction

Percentage off can be displayed as a tag over the image. Like "40% Off"

Price reduction can be displayed like what you have with the original price in strike-through and sales price to the right or underneath it.

Any additional price related info is too much and can be confusing to shoppers.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.