Week 6 — B2C Strategy, UX Design & Conversion Optimization¶

Course Objectives: CO1 (Evaluate e-commerce business models and strategies), CO3 (Apply user experience and design principles to e-commerce systems)

Learning Objectives¶

• [x] Construct a B2C e-commerce strategy framework aligned with business goals
• [x] Compare customer acquisition channels by CAC, scalability, and intent
• [x] Calculate and interpret the CAC-to-CLV ratio for business viability
• [x] Apply Fitts's Law, Hick's Law, and visual hierarchy to interface design
• [x] Design information architecture and navigation systems for e-commerce sites
• [x] Optimize product pages, shopping carts, and checkout flows for conversion
• [x] Implement a systematic CRO (Conversion Rate Optimization) methodology
• [x] Configure email marketing automation sequences
• [x] Implement SEO best practices and structured data markup for product pages
• [x] Evaluate Core Web Vitals and their measurable impact on revenue

1. B2C E-Commerce Strategy Framework¶

1.1 Defining B2C Strategy¶

Business-to-Consumer (B2C) e-commerce strategy is the deliberate plan by which a company acquires, converts, and retains individual consumers through digital channels. Unlike B2B strategy — which focuses on long-term contract relationships and multi-stakeholder buying processes — B2C strategy must optimize for volume, speed, and emotional resonance.

A complete B2C strategy integrates four interdependent pillars:

1.2 The E-Commerce Flywheel¶

Amazon popularized the flywheel concept — a self-reinforcing cycle in which lower prices attract more customers, more customers attract more sellers, more sellers increase selection, better selection drives more traffic, and scale reduces costs enabling lower prices again.

For a mid-market B2C retailer, the flywheel looks slightly different:

Better UX → Higher Conversion
        ↓
More Revenue → More Inventory Choice
        ↓
More Choice → Better SEO Rankings
        ↓
More Traffic → Better UX (from data)

1.3 Market Positioning in B2C¶

Effective B2C positioning answers three questions:

1. Who is the target customer (ICP — Ideal Customer Profile)?
2. What unique value does the brand deliver?
3. Why should the customer choose this brand over alternatives?

Positioning strategies include: - Price leadership (Wish, AliExpress) — compete on lowest cost - Differentiation (Warby Parker, Allbirds) — compete on unique product or brand identity - Niche focus (Chewy for pets, REI for outdoor) — serve a specific segment exceptionally well - Convenience (Amazon Prime, Instacart) — compete on speed, selection, and ease

2. Customer Acquisition Channels¶

2.1 Channel Overview and Economics¶

No single acquisition channel suits every business. The optimal mix depends on product category, margin, target demographic, and stage of growth. The table below summarizes each major channel.

2.2 Search Engine Optimization (SEO)¶

SEO for e-commerce operates at multiple levels:

2.3 Search Engine Marketing (SEM) / PPC¶

Pay-Per-Click advertising on Google and Microsoft Ads offers immediate visibility for high-intent commercial searches.

Key PPC concepts:

• Quality Score (QS): Google's 1–10 rating based on expected CTR, ad relevance, and landing page experience. Higher QS lowers cost-per-click (CPC).
• Ad Rank: Bid × QS × Expected Impact of Extensions
• ROAS (Return on Ad Spend): Revenue ÷ Ad Spend. A ROAS of 4× means $4 revenue per $1 spent.
• Shopping Campaigns / Performance Max: Google's product listing ads (PLAs) show product images, prices, and store names. They require a properly optimized Google Merchant Center feed.

Campaign structure best practice:

Account
├── Brand Campaign (protect branded traffic)
├── Competitor Campaign (intercept competitor searches)
├── Category Campaigns (broad product categories)
│   └── Ad Groups by subcategory
│       └── Responsive Search Ads
└── Shopping / PMax Campaign
    └── Asset Groups by product category

2.4 Social Media Advertising¶

2.5 Email Marketing¶

Email consistently delivers the highest ROI of any digital channel — $36–$42 per dollar spent according to Litmus (2023).

List building strategies: - Exit-intent popups with discount incentive - Post-purchase opt-in for loyalty programs - Content upgrades (size guides, lookbooks) - SMS-to-email cross-promotion

Segmentation variables: purchase history, browse behavior, geography, engagement tier (active/lapsed/churned), demographics, acquisition source.

2.6 Affiliate and Influencer Marketing¶

Affiliate marketing operates on a performance basis — affiliates earn a commission (typically 3–15% for physical goods) for each sale they refer. Major affiliate networks include: - ShareASale / Awin — general merchandise - CJ Affiliate — large brands - Amazon Associates — universal product links - Impact.com — SaaS-style affiliate management

Influencer marketing tiers:

3. CAC vs. CLV — The Unit Economics of E-Commerce¶

3.1 Calculating Customer Acquisition Cost¶

$$\text{CAC} = \frac{\text{Total Marketing \& Sales Spend}}{\text{Number of New Customers Acquired}}$$

Example: A DTC brand spent $120,000 on paid ads, $18,000 on agency fees, and $12,000 in affiliate commissions in Q1, acquiring 1,500 new customers.

$$\text{CAC} = \frac{\$120,000 + \$18,000 + \$12,000}{1,500} = \$100$$

3.2 Calculating Customer Lifetime Value¶

$$\text{CLV} = \text{AOV} \times \text{Purchase Frequency} \times \text{Customer Lifespan}$$

Or using a margin-adjusted formula:

$$\text{CLV} = \frac{\text{AOV} \times \text{Gross Margin} \times \text{Purchase Frequency}}{1 - \text{Retention Rate} + \frac{\text{Discount Rate}}{\text{Purchase Frequency}}}$$

Example: AOV = $75, gross margin = 45%, purchases per year = 3, retention rate = 60%, discount rate = 10%.

$$\text{CLV} = \frac{75 \times 0.45 \times 3}{1 - 0.60 + \frac{0.10}{3}} \approx \frac{101.25}{0.433} \approx \$234$$

3.3 The CLV:CAC Ratio¶

The CLV:CAC ratio is the single most important unit economics metric for e-commerce health.

Payback Period: $$\text{Payback Period (months)} = \frac{\text{CAC}}{\text{Monthly Revenue per Customer} \times \text{Gross Margin}}$$

4. UX Design Principles for E-Commerce¶

4.1 Fitts's Law¶

Formulated by Paul Fitts in 1954, Fitts's Law predicts the time required to move a pointer to a target:

$$T = a + b \log_2 \left(\frac{D}{W} + 1\right)$$

Where: - T = movement time - D = distance to the target - W = width (size) of the target - a and b are empirical constants

E-commerce implications: - Add to Cart buttons should be large (≥44px touch target per Apple HIG) and high-contrast - Place primary CTAs in locations users naturally reach (e.g., below product title on mobile, not after a long description) - Avoid placing destructive actions (Remove, Cancel) near primary positive actions - Navigation items used frequently should be larger and closer to the user's starting position (top-left, bottom tab bar on mobile)

4.2 Hick's Law¶

Hick's Law states that decision time increases logarithmically with the number of choices:

$$RT = a + b \log_2(n+1)$$

Where n is the number of choices presented.

E-commerce implications: - Limit top navigation to 5–7 categories (Miller's Law: 7±2 items in working memory) - Use progressive disclosure: show 12–24 products per page; paginate or infinite scroll rather than dumping 200 SKUs - Filter/facet systems help — but only when they reduce the effective choice set the user perceives - One primary CTA per page section (avoid competing "Buy Now," "Add to Cart," "Save for Later," and "Get Quote" all at the same visual level)

4.3 Visual Hierarchy¶

Visual hierarchy guides the user's eye in a deliberate sequence using:

4.4 Information Architecture and Navigation Design¶

Information Architecture (IA) is the structural design of shared information environments. For e-commerce, IA governs how products are organized, labeled, and navigated.

Faceted Classification vs. Hierarchical Taxonomy:

Clothing → Men's → Shirts → Dress Shirts
                          → Casual Shirts
                → Pants → Chinos
                        → Jeans

Product attributes (facets):
- Category: Shirts | Pants | Shoes
- Size: XS | S | M | L | XL
- Color: Black | White | Blue | Red
- Brand: Nike | Adidas | Puma
- Price: $0–$50 | $50–$100 | $100+
- Customer Rating: ★★★★☆ and above

Navigation patterns:

• Mega-menu: Best for large category trees; shows subcategories on hover/click
• Hamburger menu: Standard on mobile; reduces visible navigation
• Breadcrumb trail: Critical for SEO and wayfinding deep in the taxonomy
• Sticky header with search: Users should never lose access to search
• Predictive search / autocomplete: Reduces friction; should handle typos and synonyms

5. Product Page Optimization¶

5.1 Product Images¶

Product imagery is the single largest conversion driver on a product page. Research by Etsy (2022) found that image quality is the #1 factor in purchase decisions for 90% of online shoppers.

Image requirements: - Minimum 1000×1000px to enable zoom functionality - White background primary shot + lifestyle shots + detail shots + scale shot + 360° or video - Mobile: touch-swipeable image gallery with dot pagination - WebP format with JPEG fallback; lazy loading for below-the-fold images - Average 6–8 images per product significantly outperforms 1–3 images

Video: Product video on the page increases conversion by 64–85% (Retail Dive). Short (15–30s) autoplay (muted) demos are most effective.

5.2 Product Descriptions¶

A product description must answer three questions: 1. What is it? — Clear, specific headline and first sentence 2. What does it do for me? — Benefits over features 3. Why should I trust this? — Materials, certifications, social proof

F-A-B framework: - Feature: 100% merino wool - Advantage: Naturally temperature-regulating and odor-resistant - Benefit: Stay comfortable through a 12-hour travel day without worrying about smell

SEO-integrated description structure:

<h1>Men's Merino Wool Travel Shirt</h1>
<p class="short-desc">Lightweight, wrinkle-resistant...</p>
<div class="accordion">
  <h3>Features & Benefits</h3>
  <h3>Materials & Care</h3>
  <h3>Sizing Guide</h3>
  <h3>Shipping & Returns</h3>
</div>

5.3 Social Proof¶

Social proof is one of Cialdini's six principles of influence and a critical conversion lever.

5.4 Call-to-Action Design¶

The Add to Cart / Buy Now button is the most important UI element on a product page.

CTA best practices: - Color: Use a color not used elsewhere on the page (reserved exclusively for primary CTAs) - Label: Action-oriented ("Add to Cart" performs better than "Buy"); "Add to Bag" beats "Add to Cart" in fashion - Size: Minimum 44×44px (iOS HIG), ideally 48×56px on mobile - Position: Visible without scrolling on ≥80% of target devices (above the fold) - Sticky CTA bar: On mobile, a fixed bottom bar with price + Add to Cart increases conversion on long product pages

6. Checkout Flow Optimization¶

6.1 Shopping Cart Design¶

The cart is the last staging area before purchase commitment. Cart abandonment averages 70.19% across e-commerce (Baymard Institute, 2023).

Cart design principles: - Show thumbnail image, product name, variant (size/color), quantity (editable), unit price, and subtotal - Provide an order summary with shipping estimate and taxes before checkout begins - Display trust badges (SSL seal, return policy, secure checkout) in the cart - Show progress toward free shipping threshold: "Add $12.47 more for FREE shipping!" - Cross-sell/upsell in cart should be subtle and relevant — avoid disrupting purchase momentum

6.2 Checkout Flow Architecture¶

6.3 Guest Checkout¶

Forcing account creation before purchase is the #1 checkout abandonment cause (Baymard, 2023 — cited by 26% of abandoners).

Best practice: Offer guest checkout as the default primary path. After order confirmation, prompt: "Create an account to track your order and save for next time" — at this point, you already have their email and shipping address; they only need to set a password.

Account creation conversion on post-purchase confirmation pages: 40–60% opt-in rate versus 10–20% if required at checkout entry.

6.4 Form Design Best Practices¶

7. Conversion Rate Optimization (CRO) Methodology¶

7.1 The CRO Process¶

CRO is not random A/B testing. It is a systematic, evidence-based methodology:

1. RESEARCH (Quantitative + Qualitative)
      ↓
2. HYPOTHESIS GENERATION
      ↓
3. PRIORITIZATION (ICE / PIE Score)
      ↓
4. EXPERIMENT DESIGN
      ↓
5. IMPLEMENTATION
      ↓
6. ANALYSIS & STATISTICAL VALIDATION
      ↓
7. ITERATION

7.2 Quantitative Research Tools¶

• Google Analytics 4 / Adobe Analytics: Funnel analysis, drop-off points, segment behavior
• Heatmaps (Hotjar, Microsoft Clarity): Click maps, scroll maps, attention maps
• Session Recordings: Watch real user sessions to identify confusion and friction
• Form Analytics: Which fields cause abandonment, re-entry, or hesitation

7.3 Qualitative Research Tools¶

• User interviews: 5 moderated sessions reveal ~85% of major usability issues (Nielsen Norman)
• Usability testing: Task completion rates, time on task, error rates
• On-site surveys (Hotjar Surveys, Qualaroo): "What stopped you from completing your purchase today?"
• Customer support ticket analysis: Recurring questions indicate confusing UX

7.4 Hypothesis Prioritization¶

The ICE Score framework prioritizes experiments:

$$\text{ICE Score} = \frac{\text{Impact} + \text{Confidence} + \text{Ease}}{3}$$

Where each dimension is rated 1–10: - Impact: If this test wins, how significantly will it move the primary metric? - Confidence: How confident are we this will be a positive change (based on data)? - Ease: How easy is it to implement and run this test?

7.5 Statistical Validity in A/B Testing¶

Minimum detectable effect (MDE) calculation:

For a baseline CVR of 3%, to detect a 0.5% absolute improvement (to 3.5%) with 80% power and 95% confidence:

• Required visitors per variant: ~19,000
• At 1,000 daily visitors (50/50 split): ~38 days needed

Use tools like Evan Miller's A/B test calculator or Optimizely's calculator.

8. Email Marketing Automation¶

8.1 Welcome Series¶

The welcome series is the highest-ROI email sequence. Subscribers are most engaged in the first 72 hours.

5-Email Welcome Structure:

8.2 Abandoned Cart Series¶

Average recovery rate: 5–15% of abandoned carts with a 3-email sequence.

Timing and content:

Email 1: 1 hour after abandonment
  Subject: "You left something behind..."
  Content: Cart contents with images, soft CTA "Return to your cart"

Email 2: 24 hours after abandonment
  Subject: "Still thinking it over? Here's why customers love us"
  Content: Social proof + cart contents + gentle urgency

Email 3: 72 hours after abandonment
  Subject: "Last chance — items selling fast"
  Content: Scarcity signal + optional small incentive (5–10% off)
  Note: Only include discount in final email to avoid training customers to abandon carts for discounts

8.3 Post-Purchase Sequence¶

Post-purchase emails achieve 40–50% open rates (vs. 20% industry average) because customers are engaged and expecting communication.

T+0: Order confirmation (transactional)
T+1 day: "Your order is being packed" (shipping prep)
T+3 days: Shipping confirmation with tracking link
T+1 day after delivery: Product care tips / how-to content
T+7 days after delivery: Review request ("How did we do?")
T+30 days: Cross-sell / replenishment ("Time for a refill?")
T+90 days: Win-back / "We miss you"

9. SEO, Structured Data & Core Web Vitals¶

9.1 Structured Data Markup (Schema.org)¶

Structured data in JSON-LD format enables rich results in Google SERPs — star ratings, price, availability — dramatically increasing CTR.

Product schema example:

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Men's Merino Wool Travel Shirt",
  "image": [
    "https://example.com/photos/shirt-front.jpg",
    "https://example.com/photos/shirt-back.jpg"
  ],
  "description": "Lightweight, wrinkle-resistant merino wool shirt for travel.",
  "sku": "MWT-SHIRT-001",
  "brand": {
    "@type": "Brand",
    "name": "TrailBlazer Co."
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/merino-travel-shirt",
    "priceCurrency": "USD",
    "price": "89.95",
    "priceValidUntil": "2025-12-31",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.6",
    "reviewCount": "847"
  }
}

9.2 Core Web Vitals and Conversion Impact¶

Google's Core Web Vitals are both a ranking signal and a conversion driver.

Google/Deloitte study (2020): 0.1 second improvement in mobile load time led to 8.4% increase in conversions for retail and 10.1% for travel.

Page speed optimization techniques: - Image optimization: WebP, responsive srcset, lazy loading - Critical CSS inlining; defer non-critical JS - CDN for static assets (Cloudflare, Fastly, AWS CloudFront) - HTTP/2 or HTTP/3 multiplexing - Server-side rendering or static site generation for product pages - Browser caching with long TTLs; cache-busting via content hashing

Key Vocabulary¶

Review Questions¶

Further Reading¶

• Baymard Institute. (2023). E-Commerce UX Research. baymard.com/research — Industry-leading UX and checkout research with over 90,000 hours of studies
• Nielsen Norman Group. (2023). E-Commerce User Experience. nngroup.com — Foundational UX research reports
• Google Web.dev. (2024). Core Web Vitals. web.dev/vitals — Official Google CWV documentation
• Eisenberg, B., & Eisenberg, J. (2006). Call to Action: Secret Formulas to Improve Online Results. Thomas Nelson.
• Cialdini, R. B. (2006). Influence: The Psychology of Persuasion. Harper Business.
• Kaushik, A. (2010). Web Analytics 2.0. Sybex. — Foundational analytics strategy text
• Google. (2023). Structured Data Documentation. developers.google.com/search/docs/appearance/structured-data

← Week 5 | Course Index | Week 7 →