Menu
Menu Sheet Overlay
Search
Search Sheet

Mobile Ecommerce Conventions

Keeping All the Acronyms Straight

As you read through this guide, you’ll notice a variety of acronyms and ecommerce terminology that may be unfamiliar if you're relatively new to ecommerce design. Let’s review some of these conventions now so that you’ll be well-equipped going forward.

There is no way to predict where the shopper will land on the PWA experience (more on this later). They may be directed from an email newsletter, they may follow a link from a social media newsfeed, or perhaps they will type in the URL directly; they could begin their journey at any page! Even though shoppers will not always conform to a specific pattern, we typically refer to the “buyer’s journey” as the act of navigating through a particular flow, namely Home > Category Listing Page (CLP) > Product Listing Page (PLP) > Product Detail Page (PDP) > Cart > Checkout. Let’s review each of these core templates.

Major templates of a mobile ecommerce experience
Each of the major templates of a mobile ecommerce experience have different use cases.

Homepage

An ecommerce homepage is usually reserved for displaying promotions and recent news and developments. Additionally, it should offer a clear overview of the site structure, and give shoppers a launchpad into products and offerings. It’s crucial that the homepage allows users to quickly infer the purpose of the site, in addition to learning the kinds of products available. This is usually accomplished with a visual category list navigation.

Example homepage layout

Category Listing Page (CLP)

The Category Listing Page (CLP) shows a list of product categories. Often in ecommerce sites, products are organized into a tree structure; for example, a running shoe may be categorized in the following manner: Women > Footwear > Sports. A CLP can be top-level or a sub-category. It is different from a PLP, described next, as it does not primarily showcase products.

Key Interactions:

  • Can sort and filter product results.

Product Listing Page (PLP)

The Product Listing Page (PLP) shows all products available within a certain category. A PLP is a sub-category. It is different from a CLP as it exists to showcase products, not additional sub-categories.

Merlins Potions PLP page

Key Interactions:

  • View product variations (e.g. colour or size) with quick preview.
  • Sort and filter product results.
  • Buy products instantly (Quick Pay with Apple Pay / Android Pay).

Product Detail Page (PDP)

The Product Detail Page, commonly known as a PDP, is a page or screen that offers full details on a specific product, along with purchasing options and controls to add to cart, wishlist, or buy immediately. PDPs are traditionally the primary purchasing interface for a product. They're often an endpoint for PLPs, search results, and sales tactics such as sales promotions, or push notifications.

A product detail page example
The PDP is a page or screen that offers full details on a specific product, along with purchasing options and controls to add to cart, wishlist, or buy immediately.

Key Interactions:

  • Scroll through product images in an Image Carousel.
  • Zoom in on product images with the Product Zoom pattern.
  • Disclose product details.
  • Select Product Options.
  • Add product to a wishlist.
  • Add a product to cart.
  • Buy product immediately (Quick Pay with Apple Pay / Android Pay).

Cart

The cart (often named “bag” or “shopping bag”) is a listing of all items the shopper has reserved for purchasing, along with functions to checkout. The cart is typically accessible as a singular template (e.g. /cart), but sometimes available from every page/screen as a mini-cart.

Examples of shopping carts

Key Interactions:

  • Interactions are variable and depend on the customer’s business logic.
  • Adjust quantity of items in cart.
  • Adjust options for items in cart.
  • Remove items from cart.
  • Add a promotional code.
  • Select shipping option.
  • Choose gift wrapping.
  • Begin checkout flow with various payment options.

Checkout

The checkout flow is arguably the most critical area of an ecommerce website or app — in fact, optimizing a checkout flow design has been shown by the Baymard Institute to increase conversion rates by up to 35.2%. (NOTE: Appleseed, Jamie, Christian Holst, Thomas Grønne, Edward Scott, Lauryn Smith, and Christian Vind. “ecommerce Usability: Checkout.” Accessed December 13, 2016.) The user experience of an ecommerce checkout also has lasting effects on brand perception and repeat business potential.

The primary purpose of an ecommerce checkout is to collect billing and shipping information from the user to complete the purchase.

Key Interactions:

  • The majority of interactions within a Checkout are form input fields such as:

    • Full Name
    • Billing Address
    • Shipping Address
    • Email Address
    • Phone Number
    • Credit Card Details
  • The confirmation action is the final critical action required by the user to complete the purchase.