E-commerce Mockups 2024

Base Screens

• Current Designs

  • Cart page Current
  • Checkout page Current
  • Thank You page Current
  • Scenarios Flowchart

• Older Designs

  • Cart page v1
  • Cart page v2
  • Cart page v3
  • Checkout page v1
  • Checkout page v2
  • Checkout page v3
  • Thank You page v1

---

Cart

• Empty Cart Scenarios

  • Empty Cart, Not Logged In
  • Empty Cart, Logged In
  • Empty Cart, Logged In, Digital access already - multiple items
  • Empty Cart, Logged In, Digital access already - one item

• Not Logged In Scenarios

  • Not Logged In
  • Not Logged In, Preorder Item
  • Not Logged In, Digital Item (Login Screen)

• Logged In - Non-member Scenarios

  • Logged In - Non-member
  • Logged In - Non-member, Digital access already - multiple items
  • Logged In - Non-member, Digital access already - one item
  • Logged In - Non-member, Preorder Item, Digital access already - multiple items
  • Logged In - Non-member, Preorder Item, Digital access already - one item
  • Logged In - Non-member, Preorder Item

• Logged In - Member Scenarios

  • Logged In - Member
  • Logged In - Member, Digital access already - multiple items
  • Logged In - Member, Digital access already - one item
  • Logged In - Member, Preorder Item, Digital access already - multiple items
  • Logged In - Member, Preorder Item, Digital access already - one item
  • Logged In - Member, Preorder Item

• Logged In - Generic Scenarios

  • Logged In - Generic
  • Logged In - Generic, Digital access already - multiple items
  • Logged In - Generic, Digital access already - one item
  • Logged In - Generic, Preorder Item, Digital access already - multiple items
  • Logged In - Generic, Preorder Item, Digital access already - one item
  • Logged In - Generic, Preorder Item

• Academic Writer Scenario

  • ACW in cart with message

---

Checkout

• Not Logged In Scenarios

  • Not Logged In, Physical items in cart, U.S. address
  • Not Logged In, Physical items in cart, International address

• Logged In - Non-member Scenarios

  • Logged in - Non-member, Physical items in cart, U.S. address
  • Logged in - Non-member, Physical items in cart, International address
  • Logged in - Non-member, Digital items only
  • Logged in - Non-member, Mixed cart
  • Logged in - Non-member, Mixed cart, Digital access already

• Logged In - Member Scenarios

  • Logged in - Member, Physical items in cart, U.S. address
  • Logged in - Member, Physical items in cart, International address
  • Logged in - Member, Digital items only
  • Logged in - Member, Mixed cart
  • Logged in - Member, Mixed cart, Digital access already

• Logged In - Generic Scenarios

  • Logged in - Generic, Physical items in cart, U.S. address
  • Logged in - Generic, Physical items in cart, International address
  • Logged in - Generic, Digital items only
  • Logged in - Generic, Mixed cart
  • Logged in - Generic, Mixed cart, Digital access already

---

Thank you

• Not Logged In Scenarios

  • Not Logged In, No promo, Physical items in cart, U.S. address
  • Not Logged In, Promo used, Physical items in cart, U.S. address
  • Not Logged In, No promo, Physical items in cart, International address
  • Not Logged In, Promo used, Physical items in cart, International address

• Logged In - Non-member Scenarios

  • Logged in - Non-member, No promo, Physical items in cart, U.S. address
  • Logged in - Non-member, Promo used, Physical items in cart, U.S. address
  • Logged in - Non-member, No promo, Physical items in cart, International address
  • Logged in - Non-member, Promo used, Physical items in cart, International address
  • Logged in, Digital-only cart
  • Logged in, Mixed cart

• Logged In - Member Scenarios

  • Logged in - Member, No promo, Physical items in cart, U.S. address
  • Logged in - Member, Promo used, Physical items in cart, U.S. address
  • Logged in - Member, No promo, Physical items in cart, International address
  • Logged in - Member, Promo used, Physical items in cart, International address
  
  
  • Logged in, Digital-only cart
  • Logged in, Mixed cart

• Logged In - Generic Scenarios

  • Logged in - Generic, No promo, Physical items in cart, U.S. address
  • Logged in - Generic, Promo used, Physical items in cart, U.S. address
  • Logged in - Generic, No promo, Physical items in cart, International address
  • Logged in - Generic, Promo used, Physical items in cart, International address
  • Logged in, Digital-only cart
  • Logged in, Mixed cart

---

Promo Code

• Cart screen with promo code messages
• Checkout screen with promo code messages

---

Emails

• Logged in - Member, Physical items, Digital items, Donation item, Promo used
• Same as Logged in - Member, but International Shipping
• Not Logged in, Physical items, Donation item, Promo used

---

Validation

• Logged in validation, edit shipping address modal, New shipping address modal, billing address, contact phone number
• Not logged in validation, blank shipping address, billing address, contact phone number and email
• Guest checkout Thank You page, create account password validation

---

Interaction

• Cart interactions
  Interactions:
  • Quantity adjustment (select 5+ and then back down in number to see change)
  • Remove all items to see empty cart state
  • Promo code application


• Guest checkout interactions
  Interactions:
  • Add extra address line (shipping and billing)
  • Remove all items to see message for no items and then redirect to cart
  • Select Country as Denmark to see international Shipping Method options
  • Select State when Country blank or US to see US Shipping Method options
  • Changing Country or State fields will show micro-interaction with loading icon in Order Summary sections
  • Clickable tax info icon in Order Summary when taxes are applicable, to show needed text
  • Promo code application
  • Phone Number field will change based on user location (can verify with VPN) - will update the icon, country code, and placeholder text for this field


• Logged-in checkout interactions
  Interactions:
  • Use other shipping address (plus message with place order button when selecting other address)
  • Selecting other address will show micro-interaction with loading icon in Order Summary sections
  • Edit shipping address (only first address has functionality) and add new shipping address modals
  • Delete shipping address functionality when choosing to delete from the Edit address modal (only on first address), functionality built with cancel, close, and delete buttons
  • Add new shipping address confirmation/display when new address is added (will not update tax/shipping display in mockup)
  • Select shipping address 2 (Montana MT) to see when no sales tax is collected (This should only be shown when we would normally collect tax but state/region does not have sales tax)
  • Select shipping address 3 (Denmark DK) to see international shipping adjustments
  • Add extra address line (Edit shipping, Add new shipping, billing)
  • Use same billing as shipping address toggle
  • Remove all items to see message for no items and then redirect to cart
  • Clickable tax info icon in Order Summary when taxes are applicable, to show needed text
  • Promo code application
  • Phone Number field will change based on user location (can verify with VPN) - will update the icon, country code, and placeholder text for this field


• Thank you page interactions
  Interactions:
  • Print Receipt functions to print only the items on the page that are receipt-related
  • Creating an account will show the email verification sent alert when password passes validation