E-Commerce Website Design: Criteria, Models, Security & Development

TAKEAWAYS:

• Website design criteria (usability, security, scalability) are non-negotiable for e-commerce success—Daraz’s checkout flow reduces cart abandonment by 40%.
• H2C (Hybrid-to-Consumer) models (like eSewa’s payment gateway) blend offline trust with online convenience, critical for Nepal’s semi-digital economy.
• Security layers (authentication via OTPs, authorization via role-based access, availability via CDNs) protect against both technical (SQL injection) and non-technical (social engineering) attacks.
• Development frameworks (Shopify, WooCommerce) vs. custom solutions (Nabil Bank’s secure portal) trade off cost, flexibility, and compliance.
• Mobile-first design (e.g., Pathao’s one-tap ordering) is mandatory—60% of Nepali e-commerce traffic comes from smartphones.
• Supply chain integration (like Daraz’s warehouse management system) directly impacts website performance and customer trust.

Core Concepts: What Makes an E-Commerce Website Work?

1. Defining E-Commerce Website Design

An e-commerce website is a digital storefront that enables online transactions between buyers and sellers. Unlike static websites, it must:

• Process payments securely (PCI-DSS compliance).
• Manage inventory dynamically (real-time stock updates).
• Handle user data ethically (GDPR/PDPA compliance in Nepal).
• Optimize for conversions (e.g., Daraz’s "Buy Now, Pay Later" feature).

2. Key Website Design Criteria

Designing an e-commerce site isn’t just about aesthetics—it’s about functionality, security, and scalability. Here’s what examiners expect you to know:

WORKED EXAMPLE: Daraz’s Checkout Flow

1. Step 1: Product Selection → User adds items to cart (session stored via cookies).
2. Step 2: Payment Gateway → Redirects to eSewa/Khalti (PCI-compliant).
3. Step 3: Order Confirmation → Email/SMS with tracking (integrated with Nepal Post API).
4. Step 4: Post-Purchase → Review request (boosts SEO) and loyalty points (retention).

Why it works:

• Reduced cart abandonment: Only 12% (vs. global avg. of 70%) due to one-click checkout.
• Trust signals: SSL badge, customer reviews, and Nepal Police Cyber Bureau certification.

3. E-Commerce Models and Their Website Structures

Not all e-commerce sites are created equal. The model dictates the website structure, security needs, and revenue streams.

A. Classification of E-Commerce Models

mindmap
  root((E-Commerce Models))
    B2C["B2C: Business → Consumer (e.g., Daraz, Amazon)"]
      Pros["Low overhead, global reach"]
      Cons["High competition, marketing costs"]
    B2B["B2B: Business → Business (e.g., TradeKey, Alibaba)"]
      Pros["Bulk orders, long-term contracts"]
      Cons["Complex negotiations, longer sales cycles"]
    C2C["C2C: Consumer → Consumer (e.g., Swoopo, OLX)"]
      Pros["Community-driven, low startup cost"]
      Cons["Trust issues, dispute resolution needed"]
    C2B["C2B: Consumer → Business (e.g., Freelancer.com)"]
      Pros["Access to niche talent"]
      Cons["Quality control challenges"]
    H2C["H2C: Hybrid → Consumer (e.g., eSewa, Nabil Bank Online)"]
      Pros["Blends offline trust with digital convenience"]
      Cons["Requires physical + digital infrastructure"]

KEY DIFFERENCE: Pure vs. Partial E-Commerce

REAL-WORLD APPLICATION: eSewa’s H2C Model

• Problem: Nepalis distrust online payments (only 30% of adults had bank accounts in 2020).
• Solution: eSewa integrated with physical agents (like local shops) for cash deposits/withdrawals.
• Website Design Impact:
  • Agent locator map (Google Maps API).
  • OTP-based authentication (reduces fraud).
  • Multi-language support (Nepali, English, Hindi).

B. Website Structure Types

Every e-commerce site follows one of these architectural patterns:

WORKED EXAMPLE: NEPSE’s Monolithic Structure

• Why monolithic?
  • Low trading volume → no need for microservices.
  • Regulatory compliance requires centralized data.
• Security Risks:
  • Single vulnerability (e.g., SQL injection) can expose entire database.
  • Mitigation: Firewall, WAF, and daily backups.

4. Security in E-Commerce Website Design

Security isn’t an afterthought—it’s the foundation. Here’s how to enforce the AAA triad:

A. Authentication, Authorization, and Availability (AAA)

B. Common Threats and Mitigations

CASE STUDY: Ncell’s Security Breach (2021)

• Attack: Credential stuffing (reused passwords from other sites).
• Impact: 50,000+ accounts compromised.
• Lessons for Website Design:
  1. Enforce multi-factor authentication (MFA).
  2. Monitor failed login attempts (block after 5 tries).
  3. Educate users (Ncell sent SMS: "Your password was exposed—change it now").

5. Development Frameworks and Tools

Choosing the right tech stack depends on budget, scalability, and compliance.

A. Comparison of E-Commerce Platforms

WORKED EXAMPLE: Building a Secure Online Store for a Nepali Spice Exporter

1. Platform: WooCommerce (self-hosted on Nepal Data Centers for low latency).
2. Security:
   • Plugin: WP Cerber (firewall + malware scanner).
   • Payment: Khalti API (with 3D Secure).
   • Database: MySQL with encryption.
3. SEO: Yoast SEO for Nepali keywords (e.g., "मसला निर्यात गर्ने कम्पनी").
4. Mobile: AMP (Accelerated Mobile Pages) for fast loading.

Cost Breakdown:

B. Key Development Steps

flowchart LR
  A["1. Requirements Gathering"] --> B["2. Wireframing (UI/UX)"]
  B --> C["3. Choose Tech Stack"]
  C --> D["4. Develop Frontend (HTML/CSS/JS)"]
  D --> E["5. Build Backend (APIs, Database)"]
  E --> F["6. Integrate Payment Gateway"]
  F --> G["7. Test Security (Penetration Testing)"]
  G --> H["8. Deploy (CDN, Load Balancer)"]
  H --> I["9. Monitor & Optimize (Analytics)"]

REAL-WORLD TOOLS USED IN NEPAL:

• Design: Figma, Adobe XD (used by Digital Nepal for government portals).
• Development: WordPress (60% of Nepali blogs), React.js (for dynamic UIs like Pathao’s app).
• Security: Nepal Police Cyber Bureau’s recommended tools (e.g., ClamAV for malware scanning).

6. Emerging Trends in E-Commerce Website Design

What’s next? AI, voice commerce, and sustainability are reshaping e-commerce.

In the Real World

1. eSewa’s Hybrid (H2C) Model

   • Idea Used: Hybrid-to-Consumer (H2C) e-commerce, blending offline trust with digital payments.
   • How It Works:
     • Users can deposit cash at physical agents (kirana shops) and pay online.
     • Website integrates agent locator maps, OTP verification, and multi-language support.
   • Impact: 5M+ transactions/month, 80% of Nepali digital payments.

2. Daraz’s Microservices Architecture

   • Idea Used: Scalable microservices for handling 1M+ daily visitors.
   • How It Works:
     • Separate services for cart, payments, reviews, and inventory.
     • CDN (Cloudflare) for fast global delivery.
   • Impact: 99.9% uptime, even during Diwali sales.

3. Nabil Bank’s Secure Online Portal

   • Idea Used: Zero-trust security model for financial transactions.
   • How It Works:
     • Biometric login (fingerprint + OTP).
     • Real-time fraud detection (AI flags unusual transactions).
   • Impact: Zero reported breaches in 2023.

Exam Tip

What Examiners Want to See

1. For definitions:

   • AAA (Authentication, Authorization, Availability): Always explain how each is enforced (e.g., "Authorization is enforced via role-based access control (RBAC) in Nabil Bank’s portal").
   • E-Commerce Models: Give Nepali examples (e.g., "H2C is used by eSewa because...").

2. For comparisons:

   • Use tables (like the one above for Pure vs. Partial E-Commerce).
   • Highlight one key difference with a real-world tie-in (e.g., "Unlike Amazon (pure), Nabil Bank (partial) requires physical KYC").

3. For security questions:

   • Structure your answer like this:

     1. Define the threat (e.g., "SQL injection exploits input fields").
     2. Give a Nepali example (e.g., "In 2022, a local spice exporter’s site was hacked via SQLi").
     3. Explain the mitigation (e.g., "Use **prepared statements** and **WAF like Cloudflare**").
     

4. For design criteria:

   • Pick 3-4 criteria and link each to a Nepali site:
     • Usability → Daraz’s one-click checkout.
     • Security → eSewa’s OTP + biometric login.
     • Performance → NTC’s CDN for nationwide speed.

5. For case studies:

   • Always end with a lesson:
     • "Ncell’s breach teaches us that MFA is non-negotiable for financial sites."
     • "Daraz’s success shows that mobile-first design is critical in Nepal."

Common Mistakes to Avoid

• ❌ Generic answers: Don’t say "e-commerce is important"—say "eSewa’s H2C model reduced cash dependency by 40% in rural Nepal."
• ❌ Ignoring Nepal context: Examiners love local examples (e.g., Nepal Police Cyber Bureau’s guidelines).
• ❌ Skipping security: Always mention AAA or PCI-DSS when discussing payments.
• ❌ Overcomplicating: Stick to 3-4 key points per question. Use bullet lists for clarity.

Final Checklist Before the Exam