In the following four screenshots I want to demonstrate how an e-commerce UI can be redesigned for greater usability. Changes like these increase profit margins, conversion rates and lower cost per acquisition, without increasing the ad spend.

Landing page redesign – before and after
  1. Added a top header with some sale information.
  2. Added a logo and a call to action below it - a common mental model; pages that lack it seem suspicious.
  3. Made the main heading much smaller but still readable on mobile devices.
  4. Added a short and concise subheading, with reviews and a call to action that feature a discount.
  5. Added a related image with a customer testimonial.
  6. The new page is much easier to scan, features sale elements, and has a clear call to action that makes it easier for the user to navigate and decide.
Product detail page redesign
  1. Added a top banner - it adds contrast, attracts attention, and features the sale end date.
  2. Moved the product image just below the navbar. The product title is now below the image.
  3. Added an element on the image that attracts the eye featuring the sale, along with a few supporting details.
  4. The title is the biggest typographic element - it attracts the eye and explains what the product is all about.
  5. Added the stars and reviews widget that scrolls the page to the reviews section.
  6. Discount pill.
  7. Strong contrast for the subscribe / one-time purchase component.
  8. Quantity selector next to the CTA.
  9. Prominent free shipping component.
Cart page redesign
  • Clearly state that the current page is "Your Cart".
  • Clearly show items in the cart and highlight savings.
  • Reduce the product image size - save on screen real estate.
  • Remove the quantity picker for jewelry products.
  • Remove the option to edit the cart; allowing users to remove an item is enough.
  • Move the promo code form into checkout.
  • Incentivize the purchase with a free gift.
  • Strong, prominent checkout button.
  • Offer a bundle discount on the cart page to increase AOV.
Second landing page redesign
  1. Added a top header that features free shipping.
  2. Added a logo and cart icons that improve customer brand trust.
  3. Added a reviews link that scrolls the page to customer reviews when clicked.
  4. Increased contrast by making the hero section background white and moving the product photo down.
  5. Added bullet points that simply explain the product features and benefits.
  6. Added a clean, prominent call to action button with free shipping callout.