Week 14 — Mobile Commerce, Social Commerce & Emerging Models¶

Course Objectives: CO1, CO2, CO3 — Analyze emerging e-commerce channels and business models, evaluating the strategic implications of mobile-first design, social platform commerce, and next-generation commerce architectures.

Learning Objectives¶

By the end of this week, you should be able to:

• [x] Cite current m-commerce statistics and explain what is driving mobile shopping growth
• [x] Distinguish between responsive design, PWA, and native apps for mobile commerce
• [x] Apply mobile UX design principles (thumb zones, touch targets) to evaluate a mobile shopping experience
• [x] Explain how social commerce platforms (Instagram Shopping, TikTok Shop) function technically and commercially
• [x] Describe the live commerce model pioneered in China and assess its US adoption trajectory
• [x] Evaluate subscription commerce business models using key metrics (LTV, CAC, churn rate)
• [x] Explain how AR/VR creates value in e-commerce and identify current limitations
• [x] Differentiate headless commerce from traditional monolithic e-commerce platforms and explain the MACH architecture

1. Mobile Commerce: Scale and Growth¶

1.1 M-Commerce Statistics¶

Mobile commerce has completed its trajectory from "emerging trend" to dominant commerce channel. The numbers are decisive:

Sources: eMarketer, Statista, Baymard Institute

1.2 What's Driving Mobile Commerce Growth¶

1. Payment simplification: Apple Pay, Google Pay, and Shop Pay enable one-tap purchase completion, eliminating the friction of manually entering credit card details on a small screen.

2. Social media commerce integration: TikTok, Instagram, and Pinterest embed shopping directly into discovery feeds — the moment of desire and the moment of purchase are now the same moment.

3. Improved mobile site performance: 5G adoption, CDN improvements, and developer attention to Core Web Vitals have reduced mobile load times from an average of 7+ seconds to under 3 seconds on leading commerce sites.

4. App loyalty programs: Retailers like Target (Cartwheel/Target Circle), Starbucks, and Walmart have built powerful mobile app ecosystems that incentivize in-app purchases with exclusive deals and loyalty rewards.

5. Pandemic-accelerated adoption: COVID-19 dramatically accelerated mobile shopping adoption among older demographics who previously preferred desktop or in-store shopping.

2. Mobile-First Design, Responsive Design, and PWA¶

2.1 The Mobile-First Design Philosophy¶

Mobile-first design inverts the traditional design process: instead of designing the desktop experience and then adapting it for smaller screens, design for the smallest screen first and progressively enhance for larger screens.

Why mobile-first matters: - Google uses mobile-first indexing — the mobile version of your site is the primary version evaluated for search ranking - Mobile users are often in contexts requiring speed and simplicity (commuting, standing in a store) where cognitive load should be minimized - Designing for constraints first leads to prioritization — only the most essential content and functions make the mobile cut

2.2 Responsive Design vs. Adaptive Design¶

/* Mobile-first responsive breakpoints */
.product-grid {
    display: grid;
    grid-template-columns: 1fr;  /* 1 column on mobile */
    gap: 16px;
}

/* Tablet */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);  /* 4 columns */
    }
}

// Service Worker: cache-first strategy for product images
self.addEventListener('fetch', event => {
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.open('product-images-v2').then(cache =>
        cache.match(event.request).then(cached =>
          cached || fetch(event.request).then(response => {
            cache.put(event.request, response.clone());
            return response;
          })
        )
      )
    );
  }
});

2.3 Native App vs. PWA Decision Framework¶

3. Mobile UX Patterns for Commerce¶

3.1 Thumb Zone Design¶

The thumb zone model (Steven Hoober, 2013) describes the reachability of screen areas when holding a smartphone one-handed. For a 6-inch smartphone:

┌─────────────────────┐
│                     │  ← HARD TO REACH (stretch zone)
│   ○ ○ ○ ○ ○ ○ ○    │     (top of screen)
│  ○ ○ ○ ○ ○ ○ ○ ○   │
│ ○ ○ ○ ○ ○ ○ ○ ○ ○  │  ← REACHABLE (middle zone)
│ ○ ○ ○ ○ ○ ○ ○ ○ ○  │
│  ○ ○ ○ ○ ○ ○ ○ ○   │
│   ████████████████  │  ← NATURAL (easy reach zone)
│   ████████████████  │     (bottom third)
│   ████████████████  │
└─────────────────────┘
            👍 (right thumb)

Commerce design implications: - Add to Cart button: Must be in the easy-reach zone (bottom of screen); never top-right - Navigation menu: Bottom navigation bar is more accessible than hamburger menu top-left - Price and key product information: Middle natural zone - Destructive actions (delete from cart, cancel order): Top zone reduces accidental taps

3.2 Touch Target Guidelines¶

Minimum touch target sizes for mobile commerce:

Most common touch target failures in mobile commerce: - Quantity selector +/- buttons too small (common failure in cart pages) - "X" close button on product quickview overlays - Filter checkboxes in product listing pages - Size/color swatches in product detail pages

3.3 One-Page Checkout Design¶

The checkout flow is the highest-stakes UX in mobile commerce. Research by Baymard Institute found that optimized checkout design can increase mobile conversion by 35.26%. Best practices:

1. Guest checkout first: Don't force account creation; offer it after purchase
2. Auto-fill everywhere: Trigger appropriate input types (type="email", type="tel", autocomplete="cc-number")
3. Address autocomplete: Google Places API for instant address lookup
4. Apple Pay / Google Pay as primary CTA: Digital wallets eliminate manual entry entirely
5. Inline validation: Validate fields on blur, not on form submit
6. Progress indicator: Show steps remaining (especially for multi-step checkout)
7. Order summary always visible: Sticky summary prevents "what am I paying for?" abandonment

4. Social Commerce¶

4.1 Defining Social Commerce¶

Social commerce is the intersection of social media and e-commerce — buying and selling products directly within social media platforms without leaving the app to visit an external website. The term was coined by Yahoo in 2005 but the infrastructure to support it didn't mature until the mid-2010s.

Why social commerce is structurally different from e-commerce with social sharing: - In traditional e-commerce, social media drives traffic to a commerce site (discovery → redirect → purchase) - In social commerce, the entire journey (discovery → consideration → purchase) happens within the social platform - The social graph creates social proof at the moment of discovery (friend bought this, influencer endorses this)

4.2 Platform-by-Platform Social Commerce Analysis¶

4.3 Live Commerce: The China Model¶

Live commerce (also called live shopping, live-stream shopping) combines video entertainment with instant purchasing. A host — brand employee, influencer, or celebrity — demonstrates products in real-time while viewers can purchase with a single tap.

China's live commerce explosion: - China live commerce GMV: $720 billion (2023), representing ~20% of total e-commerce - Taobao Live (Alibaba), JD.com Live, Pinduoduo, Douyin (TikTok China) all compete fiercely - During 2023 11.11 (Singles Day), top livestreamer Austin Li sold $14 billion in 12 hours - Average viewing session: 55 minutes (vs. 7 minutes for typical product page visit)

US live commerce adoption: - US live commerce GMV: ~$32 billion (2023) — growing but fraction of China's scale - Platforms: Amazon Live, TikTok Live Shopping, Instagram Live Shopping, Whatnot (collectibles) - Friction points: US consumers less comfortable purchasing in entertainment context; cultural norms around impulse buying differ

Why live commerce works: 1. Real-time demonstration: Products shown working in actual use (vs. static images) 2. Urgency: Limited-time pricing during stream creates FOMO-driven conversion 3. Q&A: Viewers ask questions answered immediately — addresses pre-purchase hesitation 4. Social proof: Real-time view counts and purchase notifications ("1,247 people bought this in the last hour") 5. Entertainment value: Engaging hosts turn shopping into leisure activity

5. Influencer Commerce and the Creator Economy¶

5.1 The Influencer Marketing Ecosystem¶

Influencer marketing has become a primary customer acquisition channel for e-commerce brands. The global influencer marketing market grew from $1.7 billion in 2016 to $21.1 billion in 2023 (Influencer Marketing Hub).

Influencer tiers by follower count:

5.2 Affiliate Tracking Technology¶

Influencer commerce relies on affiliate tracking to attribute purchases to specific creators:

1. Brand generates unique affiliate link or promo code for each creator
   https://shop.brand.com?ref=creator123&utm_source=tiktok

2. Creator posts content with link/code

3. Customer clicks link → browser cookie set OR visits site with promo code

4. Customer purchases → order system records affiliate_id from cookie/code

5. Affiliate platform (ShareASale, Impact, Commission Junction) calculates commission

6. Commission paid to creator (typically 5-20% of sale value)

Attribution challenges: - Multi-touch attribution: Customer sees influencer post, then a Google ad, then an email before buying — who gets credit? - Cookie blocking: iOS 14+ App Tracking Transparency, Safari ITP limit cookie-based attribution - Promo code vs. link tracking: Promo codes work cross-platform and offline; links lose attribution in some contexts

5.3 Direct-to-Consumer (DTC) Brands¶

Direct-to-consumer brands bypass wholesale and retail distribution to sell directly through their own digital channels, capturing higher margins and owning the customer relationship.

Classic DTC success stories:

DTC economics challenge (2022-2024): Many DTC brands discovered that customer acquisition costs on Facebook/Instagram, which had been affordable when social advertising was underutilized, rose dramatically as more brands competed for the same inventory. The "DTC correction" of 2022-2023 saw several high-profile DTC brands fail or pull back (Casper, Allbirds stock collapse, Peloton challenges) when CAC exceeded LTV.

6. Conversational Commerce and Voice Commerce¶

6.1 Conversational Commerce¶

Conversational commerce (term coined by Uber's Chris Messina in 2015) refers to commerce enabled through messaging apps, chatbots, and voice assistants. The consumer interacts with a brand through natural language rather than structured navigation.

6.2 Voice Commerce¶

Voice commerce allows consumers to browse, add to cart, and purchase products using voice commands through smart speakers or voice assistants.

Voice commerce ecosystem:

Voice commerce challenges: 1. Discovery problem: Voice search returns one result; browsing requires visual interface 2. Consideration phase: Consumers want to see products before purchasing — voice works only for reorders of familiar items 3. Payment friction: Speaking payment details aloud raises security concerns 4. Returns complexity: Resolving post-purchase issues is awkward via voice

Voice commerce sweet spots: Grocery reordering, household consumables (Tide Pods, paper towels), food delivery, music/media purchases — categories where the SKU is already known and trust in product is established.

7. Subscription Commerce¶

7.1 The Subscription Model Structure¶

Subscription commerce charges customers a recurring fee (monthly, annually) for access to products or services, converting one-time transactions into predictable, recurring revenue streams.

Subscription commerce types:

7.2 Subscription Commerce KPIs¶

The economics of subscription commerce require different metrics than transactional e-commerce:

Key Subscription Metrics:

MRR = Monthly Recurring Revenue
    = (# subscribers) × (average monthly fee)

ARR = Annual Recurring Revenue = MRR × 12

Churn Rate = subscribers cancelled in period / subscribers at start of period
           (monthly churn of 5% = 46% annual churn)

Customer Lifetime Value (LTV) = Average Revenue per User / Monthly Churn Rate
                               = $40 / 0.05 = $800

Customer Acquisition Cost (CAC) = Total Sales & Marketing Spend / New Customers Acquired

LTV:CAC Ratio (healthy range: 3:1 to 5:1)
  < 3:1 → Acquiring customers too expensively or not retaining them
  > 5:1 → Underinvesting in growth; could accelerate profitably

Net Revenue Retention (NRR) = (Starting MRR + Expansion - Contraction - Churn) / Starting MRR × 100
  > 100% = Existing customers generating more revenue over time (expansion exceeds churn)

8. AR/VR in E-Commerce¶

8.1 Augmented Reality Applications¶

Augmented Reality (AR) overlays digital content onto the real world through a device camera. In e-commerce, AR solves the fundamental online shopping problem: customers can't try products before buying.

Furniture and Home Décor — IKEA Place: IKEA's AR app allows customers to place true-to-scale 3D models of furniture in their actual rooms through their smartphone camera. Results: products visualized via AR have a 94% lower return rate than products purchased without AR visualization.

// WebXR API for browser-based AR (simplified concept)
async function startARSession() {
  if (navigator.xr) {
    const session = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test', 'dom-overlay'],
      domOverlay: { root: document.getElementById('overlay') }
    });

    // Load 3D model
    const model = await loadGLTF('/models/sofa-oslo-3seater.glb');

    // Place model at hit test point (where user taps on real surface)
    session.addEventListener('select', (event) => {
      placeModelAtHitPoint(model, hitTestResult.getPose(referenceSpace));
    });
  }
}

Fashion and Beauty — Virtual Try-On: - Snapchat AR Lenses: Partnership with 250+ fashion/beauty brands; 250 million daily AR Lens users - L'Oréal / ModiFace: AI-powered virtual makeup try-on; accuracy within 3% of in-store application - Warby Parker: Virtual glasses try-on using TrueDepth camera face mapping (same technology as Face ID) - Sephora Virtual Artist: Virtual lipstick/eyeshadow try-on leading to 11% higher conversion

8.2 3D Product Visualization¶

Beyond AR, 3D product visualization (viewable in a browser without AR) allows customers to rotate, zoom, and inspect products from all angles:

• Shopify 3D/AR: Native support in Shopify storefronts; 3D models in GLB/USDZ format
• Amazon 3D/AR View: 3D viewer on Amazon product pages for eligible products
• Google 3D Search: Google Search surfaces 3D product models directly in search results

3D model formats: - GLB/GLTF: Standard web 3D format; used by Shopify, Google, Facebook - USDZ: Apple's Universal Scene Description format for iOS AR (ARKit) - STEP/OBJ: Manufacturer CAD formats that require conversion to web-friendly formats

8.3 VR Commerce: Current State¶

Virtual Reality commerce remains largely experimental but has specific high-value use cases:

• Virtual showrooms: BMW, Audi use VR for immersive car configuration experiences at dealerships
• Real estate: Matterport 3D virtual home tours; standard in luxury real estate marketing
• B2B complex products: Industrial equipment VR demos that would be impossible to ship for sales calls
• Virtual fashion shows and events: Balenciaga, Gucci have held VR fashion presentations

VR commerce barriers: - Headset adoption still limited (Apple Vision Pro at $3,499, Meta Quest 3 at $499-699) - Isolation: VR is fundamentally a solitary experience; social shopping dynamics difficult to replicate - Fatigue: Extended VR sessions cause physical discomfort for many users - Tactile gap: Cannot address the fundamental desire to touch/feel physical products

9. Headless Commerce and MACH Architecture¶

9.1 Traditional vs. Headless Commerce¶

Traditional monolithic e-commerce platforms (Magento 1.x, WooCommerce, older Shopify themes) tightly couple the frontend presentation layer ("the head") to the backend commerce functionality.

TRADITIONAL MONOLITHIC:
┌─────────────────────────────────┐
│        Storefront Theme         │  ← Frontend (coupled)
│  (HTML templates baked into     │
│   the platform)                 │
├─────────────────────────────────┤
│       Commerce Platform         │  ← Backend (tightly coupled)
│  (products, cart, checkout,     │
│   orders, catalog management)   │
└─────────────────────────────────┘
         │
    Changes to either layer require
    working within platform constraints

Headless commerce decouples frontend from backend, exposing all commerce functions through APIs:

HEADLESS COMMERCE:
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  React SPA   │  │  Mobile App  │  │  Voice/IoT   │  ← Any frontend
│  (Next.js)   │  │  (iOS/Android│  │  interface   │
└──────┬───────┘  └──────┬───────┘  └──────┬───────┘
       │                 │                  │
       └─────────────────┼──────────────────┘
                         │ GraphQL / REST API
       ┌─────────────────▼──────────────────────────┐
       │            Commerce API Layer               │
       │  (Shopify Storefront API, Commercetools,    │
       │   BigCommerce, VTEX, Elastic Path)          │
       └────────────────────────────────────────────┘

Why headless commerce?

1. Frontend freedom: Build with React, Vue, Angular, or any framework without platform template constraints
2. Omnichannel: Same backend serves web, mobile, voice, in-store kiosks, AR/VR headsets
3. Performance: Custom-built React/Next.js storefronts outperform platform themes on Core Web Vitals
4. Flexibility: Change frontend design without touching backend commerce logic (and vice versa)
5. Best-of-breed: Swap individual components (payment, search, CMS) without replacing the entire platform

9.2 MACH Architecture¶

MACH is an architectural framework and vendor certification program promoted by the MACH Alliance (founded 2020). MACH stands for:

MACH vs. monolithic comparison:

Leading MACH-certified vendors: - Commerce: Commercetools, Elastic Path, Fabric, VTEX - CMS: Contentful, Sanity, Storyblok - Search: Algolia, Constructor.io - Checkout/Payments: Stripe, Adyen - OMS: Fluent Commerce, OneStock

Key Vocabulary¶

Review Questions¶

Further Reading¶

• eMarketer. (2024). US Mobile Commerce Forecast. eMarketer/Insider Intelligence.
• Baymard Institute. (2023). Mobile E-Commerce UX: 333 Design Guidelines. https://baymard.com/research
• MACH Alliance. (2023). MACH Architecture Principles and Vendor Certification. https://machalliance.org/
• McKinsey & Company. (2023). The State of Fashion 2023: Resilience in the Face of Uncertainty. McKinsey & Company.
• Gartner. (2022). Market Guide for Headless Commerce. Gartner Research.
• Influencer Marketing Hub. (2024). The State of Influencer Marketing Benchmark Report. https://influencermarketinghub.com/
• Hoober, S. (2017). Design for Fingers, Touch, and People. https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php
• Google. (2023). Progressive Web Apps Documentation. https://web.dev/progressive-web-apps/
• PwC. (2023). Global Consumer Insights Pulse Survey. PwC.

← Week 13 | Course Index | Week 15 →