SuperDuperUI

Checkout

First purchase on Shop

The user buys a product: adds a phone with code, shipping address via search, a new card, reviews and pays, and sees the order confirmed.

Try 5 screens free in FigmaImport this flow

Step 1 of 30

Shop flow, step 1: first-purchase 6

Tap product · Push

The steps

  1. Step 1. Tap product, Push
  2. Step 2. In-place change
  3. Step 3. Tap Buy now, In-place change
  4. Step 4. Modal
  5. Step 5. In-place change
  6. Step 6. Type, In-place change
  7. Step 7. Tap Next, In-place change
  8. Step 8. Push
  9. Step 9. Type code, In-place change
  10. Step 10. Push
  11. Step 11. Tap search, Push
  12. Step 12. In-place change
  13. Step 13. In-place change
  14. Step 14. In-place change
  15. Step 15. Select address, Back
  16. Step 16. In-place change
  17. Step 17. In-place change
  18. Step 18. In-place change
  19. Step 19. In-place change
  20. Step 20. In-place change
  21. Step 21. In-place change
  22. Step 22. Push
  23. Step 23. In-place change
  24. Step 24. In-place change
  25. Step 25. In-place change
  26. Step 26. In-place change
  27. Step 27. In-place change
  28. Step 28. In-place change
  29. Step 29. In-place change
  30. Step 30. In-place change

More from Shop

Not affiliated with, endorsed or sponsored by Shop. Shop is a trade mark of its owner. Recreated for design reference and education. Rights holders: contact us