DOC ROI
DOC ROI · Digital Commerce Learning Pill

E-COMMERCE
WORLD INSIDE
SHEET

Understand the information a business really needs before it can sell online. Structure the brand, product, buyer, offer, transaction, delivery and trust layers — then turn those inputs into a reusable ecommerce brief and a deployable digital asset.

Start with Theory Open the Laboratory
THE SYSTEM BEFORE THE WEBSITE

An ecommerce page is not a design problem first. It is an information problem.

A product can only be sold digitally when the commercial information is explicit enough for a customer — and a system — to understand what is being sold, for whom, at what price, under which conditions and how the transaction is completed.

01 · STRUCTURE

Make the product explicit

Identity, attributes, variants, evidence, price and availability.

02 · CONNECT

Make it relevant

Translate product facts into buyer value, objections and conversion triggers.

03 · EXECUTE

Make it sellable

Transaction, payment, delivery, contact, trust and deployment.

THEORY · INFORMATION JOURNEY

Move through the nine layers of ecommerce readiness.

Use the tabs in sequence. Each layer answers one operational question before you enter the laboratory.

01 · BRAND & IDENTITY

The customer must know who is selling.

Define the visible and technical identity of the page before generating layout or copy.

  • Brand and commercial product name.
  • Browser-tab title and favicon.
  • Logo variants and visual hierarchy.
  • Primary, secondary and CTA colours.
  • Brand tone and visual language.
Why this matters

Without a brand system, generative AI tends to produce generic ecommerce aesthetics. Structured identity constrains the output and improves consistency.

02 · PRODUCT INTELLIGENCE

Turn the product into structured information.

Separate what the product is from what you want to say about it.

  • Name, SKU, category, origin and manufacturer.
  • Technical attributes and measurable specifications.
  • Variants, format, capacity, size or service modality.
  • Usage instructions, warnings and availability.
  • Real media evidence: product photos, packaging and context.
Rule

Do not convert a variant name into an ingredient claim, a visual cue into a certification, or a packaging message into a verified technical fact.

03 · BUYER PERSONA

The same product should not be sold in the same way to everyone.

Connect the product with a real decision context.

  • Pains, gains, motivations and objections.
  • Purchase triggers and decision criteria.
  • Price sensitivity and preferred channels.
  • Words the customer understands and trusts.
  • Functional, emotional and social value.
Conversion principle

Attributes become persuasive only when they are translated into a customer outcome. ATTRIBUTE → BENEFIT → CUSTOMER VALUE.

04 · OFFER

Make the commercial proposition explicit.

  • Price, currency, taxes and promotional conditions.
  • Stock, reservation or service availability.
  • Minimum and maximum quantity.
  • Main CTA and secondary contact path.
  • Wholesale, bundle or volume logic when relevant.
Customer question

“What exactly do I get, what does it cost, and what do I do next?” If the page does not answer this clearly, conversion is already compromised.

05 · COMMERCE

Define the transaction, not only the product page.

  • Customer identity and contact details.
  • Quantity, subtotal, shipping/service cost and total.
  • Order reference and transaction status.
  • Browser storage when prototyping.
  • Email, WhatsApp or backend handoff.
Minimum viable ecommerce

A useful classroom prototype can sell without reproducing Shopify. But it must make the transaction flow visible and testable.

06 · DELIVERY

The final price is more than the product price.

  • Shipping origin and destination.
  • Postal code, city and full address.
  • Weight and dimensions when physical logistics apply.
  • Carrier tariff or explicit estimate.
  • Estimated delivery/service time.
Important

Never present a simulated shipping table as a real carrier tariff. Label prototypes clearly and replace them with an API or validated tariff table before production.

07 · PAYMENT

Payment must match the commercial maturity of the project.

  • Transfer, card, Bizum, PayPal, payment link or in-store payment.
  • Payment reference linked to the order number.
  • Proof of payment when using bank transfer.
  • Demo bank data must never look like a real account.
  • A static mailto: cannot silently attach a local PDF.
Prototype tip

Use localStorage for order data and IndexedDB for binary documents such as PDF payment receipts. Full automated sending requires a backend or serverless function.

08 · TRUST, FAQ & LEGAL

Reduce the uncertainty that stops a purchase.

  • Real product photography and verifiable origin.
  • FAQ based on actual objections.
  • Returns, shipping and support conditions.
  • Privacy consent and contact email.
  • No fabricated testimonials, awards or certifications.
Trust principle

Good ecommerce is evidence architecture. Every strong claim should be supported by a real source, operational rule or visible proof.

09 · MEDIA & DEPLOYMENT

Your laptop is not the Internet.

  • Use public HTTPS image URLs or include assets in the repository.
  • Test image URLs in an incognito browser.
  • Avoid local paths such as C:\Users\....
  • Publish index.html and assets in GitHub.
  • Connect the repository to Vercel and verify the live page.
Media rule

If the public browser cannot retrieve an image, the customer cannot see it. Public cloud/CDN URLs or repository assets are safer than local machine references.

LABORATORY · E-COMMERCE PRODUCT INPUT SHEET

Build the structured brief before generating the website.

The lab starts empty. Load the Don Espadín example to understand the expected level of detail, then reset and create your own project. Your final evidence is a downloadable ecommerce index.html ready for GitHub and Vercel.

Start empty or load the worked example.
Configuration 0% complete
01 · Brand & Page Identity
Media tip: use publicly accessible HTTPS URLs whenever possible. A local path will fail after deployment unless the asset is also uploaded to the repository.
02 · Product Intelligence
03 · Buyer & Value Proposition
04 · Offer, Commerce & Delivery
05 · Payment, Trust & Deployment
Production warning: never invent bank accounts, legal entities, certifications, ingredients, medical claims, carrier tariffs or customer reviews.
LIVE MINI PREVIEW
ECOMMERCE PREVIEW
YOUR BRAND

Your product / service

Complete the input sheet to build the commercial proposition.

—
Main CTA
Availability: — Origin: —
FINAL OUTPUT · YOUR WEBSITE

Generate the ecommerce website

Your evaluable evidence is the website itself. Complete the input sheet, generate the HTML, download index.html, upload it to GitHub and publish it with Vercel.

1 · Complete the brief 2 · Generate HTML 3 · Download index.html 4 · Publish
Advanced tools · optional

These outputs are useful for audit, reuse or continuing the project with another generative AI. They are not required for the basic learning journey.

Structured project evidence 
{}
Portable AI prompt 
Complete the lab to generate the prompt.
FROM FILE TO INTERNET

Publish the result as a real digital asset.

A valid learning outcome is not “I designed a page”. It is “I structured, generated, tested and published an ecommerce-ready asset.”

01 · Assets

Use public HTTPS images or upload them with the project. Check every URL outside your logged-in session.

02 · GitHub

Create a repository and upload index.html plus any required /assets.

03 · Vercel

Connect the GitHub repository, deploy and test the public URL on desktop and mobile.

REPOSITORY · FROM PROJECT TO DEPLOYMENT

Organise the ecommerce project before publishing it.

A clean repository makes the project easier to maintain, review, deploy and hand over. Keep the structure simple, predictable and deployment-ready.

Recommended repository structure

my-ecommerce/ ├─ index.html ├─ README.md ├─ assets/ │ ├─ logo.svg │ ├─ favicon.png │ ├─ product-hero.webp │ ├─ product-detail-01.webp │ └─ product-detail-02.webp ├─ data/ │ └─ product-input.json └─ docs/ └─ ecommerce-brief.txt

Repository workflow

01 · CreateOpen a new GitHub repository with a clear, lowercase name and no spaces.
02 · UploadAdd index.html and every local asset required by the page.
03 · VerifyOpen image URLs directly and confirm that no local machine path remains in the code.
04 · ConnectImport the GitHub repository into Vercel and use the default static deployment settings.
05 · TestReview the public URL on desktop and mobile, including navigation, forms, images, CTA buttons and downloadable evidence.
Deployment principle: if an asset is referenced with a relative path such as assets/product-hero.webp, that file must exist in the repository. If you use a remote asset, use a public HTTPS URL that loads without authentication.
METHODOLOGY AT THE END OF THE JOURNEY

DIIIP explains how product information becomes a commerce decision system

The value is not the form itself. The value appears when raw product and customer data becomes structured information, operational intelligence and an action that can be published, tested and measured.

D
Data

Brand, product, buyer, images, price, stock, contact, payment and delivery inputs.

I
Information

The inputs are structured into identity, offer, technical attributes, conversion and transaction rules.

I
Intelligence

The system identifies gaps, contradictions and readiness conditions before generation.

I
Insights

The learner sees what is missing to sell online with clarity, trust and operational coherence.

P
Personalization Actions

The structured brief activates copy, ecommerce configuration, AI generation, deployment and future measurement.

KAI·ROI · CUSTOMER EQUITY · EXECUTION

Digital commerce should create measurable customer and business value

This laboratory does not redefine KAI·ROI. It creates a reusable operational asset: structured product intelligence connected to customer needs, conversion, service and evidence.

The next layer is measurement: acquisition, conversion, customer value, productivity and ROI.

EXECUTIVE RESOURCE

The KAI·ROI Equation Book

A concise guide to connect data, Customer Equity, teams, decisions and ROI inside the DOC ROI ecosystem.

Inside the document:
  • Why data needs an economic purpose
  • How Customer Equity connects to action
  • How ROI becomes a decision system
  • Why evidence matters before automation
Access the KAI·ROI Equation →