Blog post thumbnail

Grana's quick-shop buttons

Online fashion retailer Grana focuses on luxury-quality items at affordable prices. Their lean and elegant website offers a clean UX. Users can navigate and shop quickly and without fuss.

"Quick add" appears when users hover over an image.
Size selections when appears when users hover over the button.
Cart modal appears when new items are added.
Shopping cart modal informs about free shipping progress.

Why this is really good UX:

  • When users hover over an item, a quick-add button appears on the lower half of the image allowing for fast, seamless shopping.
  • Hovering over the newly-appeared button layers on a clickable modal with the available sizes. The user doesn't have to enter the item's particular page to see these options.
  • When an item gets added to the cart, a modal gives users a quick view to the total in their cart. This also lets them know how far they are from earning free shipping.
  • The free-shipping note works as an upsell message, encouraging users to complete an order minimum each time they shop.