Skip to content
Design Academy My progress

Stage 12 · Lesson 3 of 12

E-commerce UX

Product discovery, product pages, cart and checkout.

  • Advanced
  • 1 h
  • 3 check questions
  • Exercise: 1 h

By the end of this lesson you can

  • Improve product discovery through search, filters and navigation.
  • Design product pages that answer buying questions.
  • Reduce friction in cart and checkout.

The idea

E-commerce UX directly affects revenue, so it is heavily researched and tested. The core journey is: discover, evaluate, buy, receive.

Discovery

Offer clear category navigation, forgiving search (typos, synonyms) and useful filters (size, price, availability). Show results with key information: image, price, rating, availability.

Product pages

Answer the buyer's questions: What is it? Will it fit or work for me? How much in total? When will it arrive? Can I return it? Use good images, specifications, reviews and clear delivery and returns information.

Cart and checkout

  • Allow guest checkout.
  • Show total cost, including delivery and taxes, early.
  • Keep forms short with autofill and clear errors.
  • Offer familiar payment methods.
  • Show a clear confirmation with order details.

Ethics

Avoid deceptive patterns such as fake urgency, hidden costs, pre-ticked add-ons and hard-to-cancel subscriptions. They may raise short-term sales but damage trust and can break consumer law.

Why it matters in real projects

Small improvements in e-commerce journeys can have large financial effects, and unexpected costs and forced account creation are common reasons people abandon carts. Honest, clear shopping experiences build repeat customers. Designers in e-commerce must balance commercial goals with fairness to customers.

A realistic example

An online furniture shop finds many people abandon checkout at the delivery step. Research shows delivery costs and dates were only shown there, and were often higher and later than expected. The redesign shows estimated delivery cost and date on product pages. Checkout abandonment falls and complaints about delivery drop.

Step by step

  1. Map the journey

    Discover, evaluate, buy, receive.

  2. Test search

    Try typos, synonyms and filters.

  3. Audit product pages

    Check they answer key buying questions.

  4. Review checkout

    Check guest checkout, total cost and form length.

  5. Check for deceptive patterns

    Remove fake urgency and hidden costs.

  6. Measure

    Track funnel steps and test changes.

Common mistakes

  • Mistake Hidden costs until the final step.

    Instead Show total cost early.

  • Mistake Forced account creation.

    Instead Offer guest checkout.

  • Mistake Fake urgency.

    Instead Use only honest scarcity and timing information.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3What is a common reason for cart abandonment?
Show answer

Unexpected extra costs. Show costs early.

Question 2 of 3What should product pages answer?
Show answer

What it is, fit, total cost, delivery and returns. Answer buying questions.

Question 3 of 3Why avoid fake urgency?
Show answer

It damages trust and may break consumer law. Ethics and law.

Practice exercise

Exercise · about 1 h

Shop audit

Audit an online shop journey.

Steps

  1. Search for a product with a typo and filter results.
  2. Check the product page against buying questions.
  3. Go through checkout to the payment step.
  4. List five improvements and any deceptive patterns.

Deliverable

An audit with improvements.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • The journey is discover, evaluate, buy, receive.
  • Make search and filters forgiving and useful.
  • Answer buying questions on product pages.
  • Keep checkout honest and simple.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Advanced and specialised topics Roadmap

PreviousSaaS and enterprise dashboards Next lessonDesign systems at scale