Simple E-Commerce Website Design
Budget: £20 – £250 GBP
website design with the following
1. Big Picture Rules
1. 2 websites, 1 backend*: `yourbrand.com` for buyers, `seller.yourbrand.com` for farmers. No shared nav, no cross-links.
2. Agent controls all transactions*: Buyers never see seller contact. Sellers never see buyer details. Agent handles quotes, payment, logistics.
3. Mobile-first*: 80% of farmers + many buyers use phones + slow data. Keep pages light.
2. Buyer Website Requirements*
Goal: Make buyers trust you + send RFQ in under 60 seconds.
Must-haves:
1. Nav: 4 items only → Products | Quality/Testing | How It Works | Contact
2. Product pages: Show Grade A/B, origin state, moisture %, bag size, photos. Big “Request Quote” button on each.
3. RFQ form: 3 fields → Volume MT needed, Destination country, Email/WhatsApp. No signup required.
4. Trust section: Uploaded lab COA, NAFDAC/FDA certs, “Agent-inspected farms” badge. Buyers care about food safety.
5. Content: Short page on “Tigernut milk yield + storage” + by-products like flour/oil. Positions you as expert.
6. Speed: Loads <3s on 3G. Compress images. WhatsApp chat widget always visible.
3. Seller Portal Requirements
Goal: Farmers can onboard + update stock in 5 mins from a basic phone.
Must-haves:
1. Separate onboarding flow*: Phone OTP login → Farm location pin → Upload ID + certs → Agent verification call. 4 steps, done.
2. Seller dashboard nav*: 3 tabs only → My Stock | Messages from Agent | Earnings
3. Stock update*: Seller only inputs: Available MT, Harvest date, Upload new farm photo. Price/specs set by Agent.
4. No buyer info*: Seller inbox only shows messages from “Agent Team”. No emails, no company names.
5. Low-data mode*: Text-heavy, image compression, works offline as PWA. Syncs when data returns.
6. Payout tracker*: Simple table → Date | MT Sold | Amount Paid | Status. No buyer price shown.
4. Agent Back Office Requirements*
Goal: You match, quote, and close without chaos.
Must-haves:
1. Lead inbox: New buyer RFQ lands here with specs. You click “Match Sellers” → system shows your verified sellers with stock.
2. Quote tool: Enter seller cost + your margin + freight → generates 1 branded PDF quote for buyer. Seller never sees it.
3. Document vault*: Upload + store COA, phytosanitary cert, export docs. Expired docs auto-hide product from buyers.
4. Order tracker: Statuses: RFQ → Quote Sent → Deposit Paid → Shipped → Delivered. Both buyer + seller get updates, but not each other’s info.
5. Seller verification checklist: KYC, farm photos, past shipments. Only “Verified” sellers show in your match list.
5. Technical Requirements - Keep it Simple*
1. Stack: http://Next.js + Tailwind for speed. Supabase/Firebase for auth + DB. Cloudinary for farm photos.
2. Auth: OTP/WhatsApp login for sellers. Email + password for buyers. Agent has admin login.
3. Payments*: All money goes to Agent’s Paystack/Stripe + bank account. Then Agent pays seller. Build escrow logic.
4. Notifications: WhatsApp + SMS for key updates. Email as backup.
5. Security: SSL, 2FA for Agent login, encrypt uploaded certificates.
UX Golden Rule: If a buyer asks “who’s the farmer?” → no answer. If a seller asks “who’s buying?” → no answer. Agent = only bridge.
OR
One Website Requirements: Agro Tigernut Sales Agent*
*1. Core Structure Rule*
*Single domain + role-based views*. URL is same, but what you see depends on who you are. Buyer, Seller, Agent never see each other’s menus or data.
*2. Entry + Routing - "2 Doors on 1 Site"*
1. *Landing page*: Clean split: 2 big buttons → `I’m a Buyer` | `I’m a Farmer/Seller`. No mixed content.
2. *Separate onboarding flows*:
- Buyer: Email → Company name → Done. No ID needed.
- Seller: Phone OTP → Farm location + ID upload → Agent verification. 4 steps max.
3. *Role lock*: After login, URL + nav changes. `/buyer/_` vs `/seller/_`. Can’t switch roles without logging out.
*3. Buyer Navigation - Keep it dead simple*
1. *Nav*: Products | Quality | How It Works | Contact. 4 links only.
2. *Products*: Filter by Grade A/B, Origin, Organic, Moisture %, Volume MT. Each card = photo + 3 specs + “Request Quote” button.
3. *RFQ flow*: 3 steps → Volume + specs → Destination + INCOTERMS → Email/WhatsApp. No cart, no checkout.
4. *Trust page*: Agent uploads COA, NAFDAC/FDA certs, farm photos, “Agent-inspected” badge. This is the #1 conversion tool.
5. *No seller info*: Buyer dashboard only shows “Agent quote” + “Order status”. Never sees farmer names.
*4. Seller Navigation - Farmer-friendly*
1. *Nav*: My Stock | Messages | Earnings. 3 tabs only. Hide everything else.
2. *Onboarding*: Phone OTP login → Pin farm on map → Upload ID + certs → Wait for Agent call. Progress bar shown.
3. *Stock update*: 2 fields only → Available MT + Harvest date + Upload photo. Price/specs set by Agent, not seller.
4. *Messages*: Inbox only shows messages from “Agent Team”. No buyer names, no emails, no numbers.
5. *Low-data mode*: Text-first, compressed images, PWA so it works offline on 2G/3G.
*5. Agent Back Office - The Go-Between Layer*
Built into same site at `/agent/*` with admin login only.
*Must-haves:*
1. *Lead inbox*: Buyer RFQ comes in → Agent sees specs → Click “Match Sellers” → picks 2-3 verified sellers internally.
2. *Quote builder*: Agent adds seller cost + margin + freight → generates 1 quote PDF → sends to buyer. Seller never sees buyer.
3. *Document control*: Agent uploads all COAs, export certs. Expired docs = product auto-hidden from buyers.
4. *Payment flow*: Buyer pays Agent. Status updates go to both sides, but payment details only visible to Agent.
5. *Seller verification*: Checklist + notes. Only “Verified” sellers appear in Agent’s match list.
*6. Technical Requirements - Simple + Fast*
1. *Stack*: http://Next.js + Tailwind + Supabase/Firebase. One codebase, role-based rendering.
2. *Auth*: Clerk/Auth0 for role management. Buyer=email, Seller=phone OTP.
3. *Payments*: Paystack + Stripe + bank transfer. All to Agent account. Build escrow logic.
4. *Speed*: <3s load on 3G. Image compression, CDN. Farmers have bad networks.
5. *Notifications*: WhatsApp + SMS for quotes, order updates. Email backup.
6. *Security*: SSL, 2FA for Agent. Encrypt uploaded certs/IDs.
*UX Golden Rule for 1-Site Setup*
“One site, zero leakage”. If code ever shows seller name to buyer or buyer company to seller, it’s a bug. Agent is the only human connection.
Your expertise is required to decide which strategy is best.
1. Big Picture Rules
1. 2 websites, 1 backend*: `yourbrand.com` for buyers, `seller.yourbrand.com` for farmers. No shared nav, no cross-links.
2. Agent controls all transactions*: Buyers never see seller contact. Sellers never see buyer details. Agent handles quotes, payment, logistics.
3. Mobile-first*: 80% of farmers + many buyers use phones + slow data. Keep pages light.
2. Buyer Website Requirements*
Goal: Make buyers trust you + send RFQ in under 60 seconds.
Must-haves:
1. Nav: 4 items only → Products | Quality/Testing | How It Works | Contact
2. Product pages: Show Grade A/B, origin state, moisture %, bag size, photos. Big “Request Quote” button on each.
3. RFQ form: 3 fields → Volume MT needed, Destination country, Email/WhatsApp. No signup required.
4. Trust section: Uploaded lab COA, NAFDAC/FDA certs, “Agent-inspected farms” badge. Buyers care about food safety.
5. Content: Short page on “Tigernut milk yield + storage” + by-products like flour/oil. Positions you as expert.
6. Speed: Loads <3s on 3G. Compress images. WhatsApp chat widget always visible.
3. Seller Portal Requirements
Goal: Farmers can onboard + update stock in 5 mins from a basic phone.
Must-haves:
1. Separate onboarding flow*: Phone OTP login → Farm location pin → Upload ID + certs → Agent verification call. 4 steps, done.
2. Seller dashboard nav*: 3 tabs only → My Stock | Messages from Agent | Earnings
3. Stock update*: Seller only inputs: Available MT, Harvest date, Upload new farm photo. Price/specs set by Agent.
4. No buyer info*: Seller inbox only shows messages from “Agent Team”. No emails, no company names.
5. Low-data mode*: Text-heavy, image compression, works offline as PWA. Syncs when data returns.
6. Payout tracker*: Simple table → Date | MT Sold | Amount Paid | Status. No buyer price shown.
4. Agent Back Office Requirements*
Goal: You match, quote, and close without chaos.
Must-haves:
1. Lead inbox: New buyer RFQ lands here with specs. You click “Match Sellers” → system shows your verified sellers with stock.
2. Quote tool: Enter seller cost + your margin + freight → generates 1 branded PDF quote for buyer. Seller never sees it.
3. Document vault*: Upload + store COA, phytosanitary cert, export docs. Expired docs auto-hide product from buyers.
4. Order tracker: Statuses: RFQ → Quote Sent → Deposit Paid → Shipped → Delivered. Both buyer + seller get updates, but not each other’s info.
5. Seller verification checklist: KYC, farm photos, past shipments. Only “Verified” sellers show in your match list.
5. Technical Requirements - Keep it Simple*
1. Stack: http://Next.js + Tailwind for speed. Supabase/Firebase for auth + DB. Cloudinary for farm photos.
2. Auth: OTP/WhatsApp login for sellers. Email + password for buyers. Agent has admin login.
3. Payments*: All money goes to Agent’s Paystack/Stripe + bank account. Then Agent pays seller. Build escrow logic.
4. Notifications: WhatsApp + SMS for key updates. Email as backup.
5. Security: SSL, 2FA for Agent login, encrypt uploaded certificates.
UX Golden Rule: If a buyer asks “who’s the farmer?” → no answer. If a seller asks “who’s buying?” → no answer. Agent = only bridge.
OR
One Website Requirements: Agro Tigernut Sales Agent*
*1. Core Structure Rule*
*Single domain + role-based views*. URL is same, but what you see depends on who you are. Buyer, Seller, Agent never see each other’s menus or data.
*2. Entry + Routing - "2 Doors on 1 Site"*
1. *Landing page*: Clean split: 2 big buttons → `I’m a Buyer` | `I’m a Farmer/Seller`. No mixed content.
2. *Separate onboarding flows*:
- Buyer: Email → Company name → Done. No ID needed.
- Seller: Phone OTP → Farm location + ID upload → Agent verification. 4 steps max.
3. *Role lock*: After login, URL + nav changes. `/buyer/_` vs `/seller/_`. Can’t switch roles without logging out.
*3. Buyer Navigation - Keep it dead simple*
1. *Nav*: Products | Quality | How It Works | Contact. 4 links only.
2. *Products*: Filter by Grade A/B, Origin, Organic, Moisture %, Volume MT. Each card = photo + 3 specs + “Request Quote” button.
3. *RFQ flow*: 3 steps → Volume + specs → Destination + INCOTERMS → Email/WhatsApp. No cart, no checkout.
4. *Trust page*: Agent uploads COA, NAFDAC/FDA certs, farm photos, “Agent-inspected” badge. This is the #1 conversion tool.
5. *No seller info*: Buyer dashboard only shows “Agent quote” + “Order status”. Never sees farmer names.
*4. Seller Navigation - Farmer-friendly*
1. *Nav*: My Stock | Messages | Earnings. 3 tabs only. Hide everything else.
2. *Onboarding*: Phone OTP login → Pin farm on map → Upload ID + certs → Wait for Agent call. Progress bar shown.
3. *Stock update*: 2 fields only → Available MT + Harvest date + Upload photo. Price/specs set by Agent, not seller.
4. *Messages*: Inbox only shows messages from “Agent Team”. No buyer names, no emails, no numbers.
5. *Low-data mode*: Text-first, compressed images, PWA so it works offline on 2G/3G.
*5. Agent Back Office - The Go-Between Layer*
Built into same site at `/agent/*` with admin login only.
*Must-haves:*
1. *Lead inbox*: Buyer RFQ comes in → Agent sees specs → Click “Match Sellers” → picks 2-3 verified sellers internally.
2. *Quote builder*: Agent adds seller cost + margin + freight → generates 1 quote PDF → sends to buyer. Seller never sees buyer.
3. *Document control*: Agent uploads all COAs, export certs. Expired docs = product auto-hidden from buyers.
4. *Payment flow*: Buyer pays Agent. Status updates go to both sides, but payment details only visible to Agent.
5. *Seller verification*: Checklist + notes. Only “Verified” sellers appear in Agent’s match list.
*6. Technical Requirements - Simple + Fast*
1. *Stack*: http://Next.js + Tailwind + Supabase/Firebase. One codebase, role-based rendering.
2. *Auth*: Clerk/Auth0 for role management. Buyer=email, Seller=phone OTP.
3. *Payments*: Paystack + Stripe + bank transfer. All to Agent account. Build escrow logic.
4. *Speed*: <3s load on 3G. Image compression, CDN. Farmers have bad networks.
5. *Notifications*: WhatsApp + SMS for quotes, order updates. Email backup.
6. *Security*: SSL, 2FA for Agent. Encrypt uploaded certs/IDs.
*UX Golden Rule for 1-Site Setup*
“One site, zero leakage”. If code ever shows seller name to buyer or buyer company to seller, it’s a bug. Agent is the only human connection.
Your expertise is required to decide which strategy is best.