Before today, students visited websites as consumers. After today, they should visit every website as a digital marketer — asking "what is this page trying to make me do?" and "why did I click that?" That perceptual shift is the real outcome of Class 5. The mechanics are secondary. Your job is to reframe websites from a design problem into a business and psychology problem. Design is just how the strategy looks.
Before class — preparation
Open daraz.pk, khaadi.com, and one generic local business website (search "catering service Karachi") on your laptop — you will use all three for live critique
Review student strategy documents from Homework 4 — note which businesses students chose so you can reference them during the website types discussion
Prepare 2–3 screenshots of weak Pakistani landing pages (cluttered, no CTA, no headline) — these are most effective during the 5-second test warm-up
Session Plan — 90 Minutes
0:00
WARM-UP
The 5-second test (10 min)
Show a homepage for exactly 5 seconds. Hide it. Ask: "What does this company do? Who is it for? What should you do next?" Use khaadi.com first (clear), then a confusing local business site. This immediately demonstrates why clarity is the #1 job of any website — before you explain a single concept.
Instructor tip: Do not explain the lesson yet — let the experience teach it. The "aha moment" is when students cannot answer the three questions for the second site and realise why that is a problem for the business.
0:10
LECTURE
Website vs landing page — two different jobs (15 min)
Cover Sections 1 and 2 of Lesson Content. Use the analogy: a website is like a mall — many shops, many exits. A landing page is like a one-item store with one cashier and no windows. Every element either moves someone toward the checkout or distracts them from it.
Draw the navigation diagram on the board — website has multiple paths out, landing page has one
Quick check: ask students to name 3 goals a landing page might have (buy, sign up, book, enquire)
0:25
LECTURE
Anatomy of a high-converting page (20 min)
Walk through Section 3 — the 7 elements. For each element, show a real example from a Pakistani brand. The most effective teaching sequence: show the Zara Bakes wireframe first (so students see the whole structure), then explain each element individually.
Ask for every site you show: "What is the CTA on this page?"
Students are often surprised how easy it is to spot a missing CTA once they know the framework
Instructor tip: "Features tell, benefits sell" is the most memorable line from this section. Repeat it. Ask students to translate a product feature into a customer benefit on the spot.
0:45
ACTIVITY
Live website critique — instructor-led (10 min)
Pull up the three pre-loaded sites and rate each against the 7 elements together as a class. Build a quick scorecard on the board. Students should start calling out missing elements before you do — that means the framework has landed.
0:55
ACTIVITY
Student critique sprint — pairs (20 min)
Pairs audit a real business website using the Activity 2 scorecard. 10 minutes to complete the audit. Then each pair presents their top finding — what is most broken and their specific fix.
Focus presentations on what is missing — weaknesses teach more than strengths
Encourage specificity: "Remove three nav links and replace with one CTA button" — not "improve the design"
1:15
LECTURE
Tools and conversion rate (10 min)
Cover Sections 5 and 6. Keep tools brief — the point is not to train on one tool, but to prove that a professional landing page requires zero coding and zero budget. Show Carrd live for 2 minutes if possible.
Instructor tip: "I don't know how to code" and "this is too technical for me" should be completely removed as objections by end of this segment. Live demonstration does more than any explanation.
1:25
WRAP-UP
Recap, Q&A, homework brief (5 min)
Frame the homework: "By this time next week, you will have a live URL you can share with anyone in the world." Read the brief aloud so there is zero ambiguity about expectations.
Big idea 1: A website and a landing page are different tools — never confuse them
Big idea 2: Every high-converting page has the same 7 elements — start here, not with design
Big idea 3: You can build a professional page in under an hour for free — the only barrier was not knowing how
Pakistan-specific facilitation note
Many local small businesses in Pakistan have no digital presence at all — or a WhatsApp number as their only online footprint. This is a significant freelance opportunity. When discussing trust signals, emphasise that Pakistani online customers specifically need: city name, phone number, delivery area, and payment methods (EasyPaisa, JazzCash, COD). These are not optional extras — they are essential for conversion in this market.
Learning outcomes
By the end of this class you will be able to: (1) explain the difference between a website and a landing page, (2) identify the 7 elements of a high-converting page, (3) critique any business website using a clear framework, and (4) choose the right free tool to build a landing page in under one hour.
1. Website vs Landing Page — Two Different Jobs
Most people use "website" and "landing page" interchangeably. In digital marketing they are two completely different tools with different purposes, different structures, and different measures of success.
🏢
A Website
A full digital home for your business. Multiple pages — About, Services, Blog, Contact. Gives visitors many options and paths to explore. Think of it like a complete office building where every department has its own door.
Goal: Build trust, share information, establish credibility. Measured by: Time on site, pages visited, returning visitors.
🎯
A Landing Page
A single page built for one specific action — a signup, a purchase, a booking, an enquiry. No navigation menu. No links taking people away. One path: take the action or leave.
Goal: Drive one specific conversion. Measured by: Conversion rate — the % of visitors who take the action.
Real example — Pakistan
Khaadi.com is a website. It has product categories, an About Us page, a blog, store locators, and dozens of navigation links. You can spend 20 minutes exploring it.
When Khaadi runs a promotion — "20% off all kurtas this Eid" — the ad should link to a landing page, not the homepage. That page shows only the discounted kurtas, a timer, and one button: "Shop Now." No distractions. One goal.
When to use each
SITUATION
USE A WEBSITE
USE A LANDING PAGE
Someone Googles your business name
✅ They need the full picture
You run a Facebook ad for a specific service
✅ One goal = one page
A client wants to review your portfolio
✅ About, work, testimonials, contact
You offer a free webinar or lead magnet
✅ Only the signup form matters
A freelancer wants to show their services
✅ Multi-section portfolio site
You launch a new product in your first week
✅ "Coming soon + email capture" page
2. What Makes a Website Actually Work
A business website has one job before all others: answer three questions in under 5 seconds. If it fails this test, no amount of design work will save it.
❓
"What is this?"
What does this business do? Must be visible without scrolling. If visitors have to search for the answer, they leave.
👤
"Is this for me?"
Does the language, imagery, and tone match who I am? People scan for relevance signals before they read a single word.
👆
"What do I do next?"
Is there a clear, obvious next step? Every page needs one — not four competing options, not zero.
The 5-second test
Show any website to a stranger for 5 seconds. Cover it. Ask: "What does this company do?" If they cannot answer, the website is failing its most basic job — regardless of how beautifully it is designed. Design that confuses is not good design.
3. The 7 Elements of a High-Converting Landing Page
Every landing page that converts well has some version of these seven elements. Missing even one significantly reduces conversions. This is the framework you will use to both build and audit pages for the rest of this course.
1 — Headline
The most important line on the page
Must communicate the core benefit in one sentence — not the business name. Bad: "Welcome to Zara Bakes." Good: "Custom birthday cakes delivered to your door in Karachi — order 3 days ahead." One tells you something. One tells you nothing.
2 — Sub-headline
Support and expand the headline
One or two sentences that answer the "so what?" of the headline. Add a key detail, address an objection, or name the ideal customer. Example: "We've made 800+ custom cakes for Karachi families since 2020. Real ingredients. On-time delivery, guaranteed."
3 — Hero image or video
Show the product or the result
The visual above the fold must show the product, the outcome, or the emotion the customer wants. A stock photo of a generic happy person is weak. A real photo of an actual cake you made is powerful. Real always beats polished in service businesses.
4 — Benefits
Features tell, benefits sell
Do not list what the product has — list what the customer gains. Not "made with Belgian chocolate" but "tastes like something you ordered in Dubai, made right here in Karachi." The focus is on the customer's life, not on your product's specs.
5 — Social proof
Let others do the convincing
Testimonials, reviews, customer photos, order counts. In Pakistan, a WhatsApp screenshot of a genuine review can be more convincing than a designed testimonial card. Specificity builds trust: "Amna from Defence — ordered for my daughter's birthday, everyone asked where I got it from."
6 — Call to action
The one thing you want them to do
One primary button. Clear, specific, action-oriented. Not "Submit" — but "Order My Cake." Not "Click here" — but "Book a Free Consultation." The button text should complete the sentence "I want to ___." If a visitor reads only the button, they should know exactly what clicking it does.
7 — Trust signals
Remove the fear of being cheated
Especially critical in Pakistan: phone number, physical location or area, recognisable payment methods, delivery policy, "established since [year]." These address the #1 barrier for Pakistani online customers: "Is this real or is this a scam?"
The anatomy in practice — Zara Bakes landing page
Custom Birthday Cakes Delivered in Karachi
Order 3 days ahead. Rs. 2,500 and up. 800+ happy families.
Hero ImageReal photo of best cake — not a stock image
BenefitsCustom designs · Real ingredients · On-time delivery
Social Proof3 testimonials — each with customer name and area
→ Order Your Cake on WhatsApp
Trust SignalsBased in DHA · Delivers across Karachi · Since 2020 · EasyPaisa accepted
4. The Do's and Don'ts of Pakistani Business Websites
The most common mistakes on local business websites in Pakistan are predictable — and every single one can be fixed without a developer or a budget.
✅ Do this
State clearly what you do in the first sentence
Show one primary CTA — WhatsApp, call, or form
Include real customer photos or review screenshots
List your delivery area or service city
Show prices or a starting price range
Make your mobile number visible and clickable
Keep layout simple — white space is not wasted
Test on mobile before publishing
❌ Avoid this
"Welcome to our website" as the headline
Background music that auto-plays on load
Splash intro animations before the page
No contact information anywhere on the page
Eight navigation items competing for attention
Stock photos of clearly foreign-looking people
"For more information please fill the form below"
Building the page once and never updating it
5. Free Tools to Build a Landing Page
You do not need to know how to code. These four tools let anyone build a professional landing page in under one hour, for free.
🌐
Wix
Drag-and-drop builder. Best for full multi-page websites. Hundreds of templates, mobile-optimised by default.
Free plan available
⚡
Carrd
Ultra-simple one-page builder. Best for a single landing page. Loads fast. The recommended starting point for beginners in this course.
Free plan available
🎨
Canva
Design-first, now publishes live pages. Best for someone who already uses Canva and wants to skip learning a new tool.
Free plan available
📧
Mailchimp
Best for email capture pages. Signups go directly to your email list — no manual step required.
Free plan available
Recommendation for this course
Start with Carrd. Fastest path from zero to a live page. Free plan is generous. Once you understand landing pages, graduate to Wix for a full multi-page website. For the homework in this class, Carrd is ideal.
6. Conversion Rate — How You Measure a Page
A landing page's success is not measured by how it looks — it is measured by its conversion rate: the percentage of visitors who complete the desired action.
Websites and landing pages are not design projects. They are conversion machines. Every element either moves a visitor toward the goal or distracts them from it. There is no neutral. The question to ask about every element on any page: "Does this help or hurt conversion?" That question is how digital marketers think.
Activity overview
Three activities today — one observation exercise, one structured critique, and one brief-writing sprint. Each builds on the last: observe → evaluate → plan. Use your Homework 4 business wherever possible to connect the learning back to your own work.
ACTIVITY 1The 5-Second Audit
⏱ 12 minutes · Individual, then share · No preparation required
Objective: Train your eye to evaluate a page's clarity before analysing its details.
1
Your instructor will assign you one site from the list below. Do NOT visit it until they say "go."
2
When "go" is called, open the site and look at it for exactly 5 seconds. Your instructor will time it. Then close the tab or look away.
3
Without looking back, answer the 3 questions below from memory only.
4
Re-open the site and spend 2 minutes reading it fully. Update your answers if anything changed.
5
Share with the class — especially what you missed in the first 5 seconds.
Assigned sites: daraz.pk · khaadi.com · foodpanda.pk · zameen.com · coursera.org — or any local business from a Google search
Debrief question
Which site passed the 5-second test? Which failed? What was the structural difference — and what does that tell you about how that business thinks about its customers?
ACTIVITY 2Rate the Page — Apply the 7-Element Framework
⏱ 18 minutes · Pairs · Uses a real business website
Objective: Apply the 7-element framework to a real business website and produce a scored audit with a specific recommendation.
Pick a business: your Homework 4 business, or one of the following —
A local home-baking business found on Instagram or Google
A freelance designer in Lahore or Karachi (Fiverr profile with a website link)
A private school or tuition centre (search "O-levels tuition Karachi")
A clothing brand's Facebook ad — click the ad, then audit the landing page it links to
Scoring: 1 = Missing or broken · 2 = Present but weak · 3 = Strong and effective
Element
Score (1–3)
What you found
How to improve it
1 — Headline
2 — Sub-headline
3 — Hero visual
4 — Benefits
5 — Social proof
6 — CTA
7 — Trust signals
ACTIVITY 3Write Your Landing Page Brief
⏱ 15 minutes · Individual · This brief feeds directly into Homework Deliverable 1
Objective: Plan your landing page before touching any tool. Professionals always write the brief first. This separates content decisions from design decisions and cuts build time in half.
Why plan before building?
Building without a brief means you make content and design decisions simultaneously — which is why most first pages feel confused and unfocused. The brief takes 15 minutes and saves hours of rebuilding. It is also the document you hand to a client before starting work.
Use your Homework 4 business, or choose one of these: Home baker (Karachi) · O-levels tutor (Lahore) · Wedding photographer · Home beauty service (Islamabad) · Freelance logo designer
How to use these notes
Quick-reference guide for everything in Class 5. Use it during homework, when auditing any website, or when building a page for a client. The fillable fields at the bottom are yours to complete in or after class.
The Core Distinction
WEBSITE
LANDING PAGE
Many pages, many goals
One page, one goal
Build trust and share information
Drive one specific action
Has a navigation menu
No navigation — nowhere to go except the CTA
Measured by: time on site, pages visited
Measured by: conversion rate
The 3 Questions Every Page Must Answer in 5 Seconds
What is this? — What does this business do?
Is this for me? — Does the language and imagery match my situation?
What do I do next? — Is there a clear, obvious action to take?
The 7 Elements of a High-Converting Page
#
ELEMENT
WHAT IT MUST DO
1
Headline
State the core benefit in one sentence — not the business name
2
Sub-headline
Support the headline — add detail or address an objection
3
Hero image or video
Show the product or result — real beats stock every time
4
Benefits
What the customer gains, not what the product has
5
Social proof
Specific testimonials, review counts, real customer photos
6
CTA (Call to Action)
One button, one goal — text completes "I want to ___"
7
Trust signals
Phone, location, payment methods, policy, years in business
Quick single landing pages — recommended for this course
✅ Yes
Wix
Full multi-page websites
✅ Yes (Wix domain)
Canva
Design-first, publish direct
✅ Yes
Mailchimp
Email capture landing pages
✅ Yes
Top 5 Pakistani Website Mistakes
"Welcome to our website" as the headline — says nothing
No visible phone number or WhatsApp link
No mention of city or service area
Multiple CTAs competing for attention on the same page
Stock photos that clearly do not represent local customers
Key Terms
Landing page: A single-purpose page with one goal and no navigation menu
Conversion: When a visitor completes the desired action — click, purchase, signup, enquiry
Conversion rate: Percentage of visitors who convert — (conversions ÷ visitors) × 100
CTA (Call to Action): The button or link that asks the visitor to take the next step
Above the fold: Everything visible on screen before scrolling — the most valuable real estate on any page
Social proof: Evidence from other customers that builds trust — reviews, testimonials, order counts
Trust signals: Elements that prove the business is real and safe to engage with
Hero section: The first visible section — containing the headline, sub-headline, and primary CTA
My Notes
Quiz instructions
10 scenario-based questions covering everything from Class 5. Select your answer to see if you got it right — and why. You are asked to apply the concepts, not just recall them.
Class 5 Homework & Deliverables
Two deliverables due before Class 6. Both are submitted to your instructor. Deliverable 1 is a live landing page you will build and publish. Deliverable 2 is a written critique of a real Pakistani business website.
🌐
Deliverable 1 — Build and Publish a Landing Page
Using the brief from Activity 3, build a real landing page on Carrd (or Wix, Canva, or Mailchimp). Publish it and submit a live URL. Your page must include all 7 elements. Test on mobile before submitting — most visitors will be on a phone.
🔍
Deliverable 2 — Website Critique
Find a local Pakistani business website you have never visited before. Apply the 7-element framework and complete the critique template below. Write specific, actionable observations — not general comments like "the design needs work."
Build Guide — Carrd Step by Step
Why this deliverable matters
By the end of this homework, you will have a live URL that any person in the world can open on their phone. Many people spend years in marketing before they build their first landing page. You are doing it in Week 3.
Go to carrd.co — click "Build it. It's free."
Choose a blank template or a simple "profile" template
Add sections in order: headline text → sub-headline → image → benefits → social proof → button (CTA) → trust signals
Fill each section with content from your Activity 3 brief
Preview on mobile — every section must be readable on a small screen
Publish for free (your URL will be yourname.carrd.co or similar)
Copy the URL and submit it to your instructor
Website Critique Template
Recommended resources before Class 6
⚡ Carrd.co — Getting Started
Official Carrd documentation at carrd.co. The Help section covers every element you will need for this homework. Five minutes reading it before you build saves significant frustration.
🔬 Unbounce Landing Page Analyzer
A free tool that audits any URL and gives a conversion score with recommendations. Try it on the website you critique for Deliverable 2 — then compare its findings with your own 7-element audit. Search "Unbounce landing page analyzer" to find it.
🗺️ Hotjar Heatmap Examples
Search "heatmap landing page examples" on Google Images. You will see visual maps of where real users look, click, and scroll on actual pages. This will permanently change how you think about placing your CTA and structuring your content above the fold.
Preview — Class 6
In Class 6 we move from the structure of digital presence to the personality behind it. You have now built a landing page — but does it sound like you? Does it look and feel consistent with your brand? Class 6 answers: what is a brand, how do you build one on zero budget, and how do you make every page, post, and message sound unmistakably like the same business. Before Class 6: look at the landing page you built this week and write down one word that describes how it sounds — formal, casual, warm, technical, fun? We will use that word in the brand voice exercise.