F.L.O.W.
The website for a Pakistani institute that teaches remote work skills in live weekend classes, built to take a visitor who has never heard of it to a conversation with a person, with no checkout, sign-up or sales script on the way.
- Sector
- Education, remote work skills
- Scope
- Client build, live in production
- Audience
- Students and working professionals in Pakistan
- Stack
- Next.js, Tailwind CSS, Netlify
Fig. 01 flowpk.com
Screen captured from the running product, not a rendering.
FLOW teaches one remote work skill at a time, Upwork freelancing or digital marketing, in live classes on Saturday and Sunday afternoons. Batches are 25 to 30 people, the instructors still do the work they teach, and the students are people in school, university or full-time jobs who want to be paid from home by clients abroad.
The hard part is trust, not information. Advice on freelancing is free and everywhere, so a course fee is only worth paying to someone the visitor already believes, in a category crowded with income promises, from a phone, having met nobody involved.
So the site is built to be checked rather than believed. Every course shows its full curriculum, fee and next batch. Instructor credentials link to the profile they come from. A real class from a live batch can be watched before anything is paid. And the last step is a WhatsApp conversation with a person, on the channel the audience already uses, rather than a checkout.
Constraints
Trust has to come before the fee
Nobody pays a course fee to a name they found an hour ago. Every claim on the site had to be one a visitor could verify for themselves: the fee in full with its conditions, the batch dates, the complete curriculum, and each instructor's record with a link to where it comes from.
Enrolment is a conversation, not a cart
Batches are capped, and a fee can be discounted, split into instalments against a guardian guarantee, or covered by one of two funded places per batch. That is a set of questions for a person to answer, so the site has no enrolment form and no checkout. Its job is to get the right question to the institute.
The free class has to stay free
The sample class is the strongest thing the institute has to show. Gating it collects the details needed to follow up, but a misconfigured form must never be the reason someone could not watch it.
No page should wait on a server
The content changes when a batch opens, not per visitor. There was no reason for a request to reach a server, and every reason for the heaviest thing on the page, the class video, to cost nothing until someone asks for it.
What we built
Course pages that answer the questions
Outcomes stated as things you will have built rather than topics you will have heard about, a session-by-session curriculum, the fee with any discount and its conditions, the instructor, and the next batch. What a prospective student would otherwise have to ask is already on the page.
A free class behind a three-field gate
Name, email and WhatsApp number, then a real class from a live batch plays straight away. The lead is posted with the course it came from, a hidden field turns away bots, and the unlock is remembered, so a returning visitor is never asked twice.
Course finder
Three questions and no email. Each answer carries a weight toward each course, and the result is a recommendation with its reason, a link to that course, and a WhatsApp message that already says which course the finder suggested.
WhatsApp enrolment
Every contact point opens WhatsApp with a message written for where it was pressed: a specific course, the student discount, the instalment plan, a scholarship, the self-paced recordings. The institute knows what the person wants before it replies.
Instructor records you can check
Each instructor carries the details a buyer actually weighs (education, platform status, Job Success Score, earnings, hours billed, years of experience) with a link to verify the Upwork profile they are taken from.
A catalogue search engines can read
Each course is marked up in schema.org as a Course with its instructor, an Offer priced in PKR and an online CourseInstance, inside an EducationalOrganization with admissions contacts and breadcrumbs.
Architecture
Frontend
Next.js App Router with Tailwind CSS, animated with Motion. Every page is prerendered, and the interactive parts (the class gate, the course finder, the FAQ) are client components inside otherwise static pages.
Content
Courses, fees, batch dates, the course finder's questions and weights, and every prefilled WhatsApp message live in one content module. Opening a new batch or changing a fee is an edit to data, not to layout.
Leads
The class gate posts JSON to a hosted form endpoint set by environment variable, tagged with the course and a subject line naming it, so each lead arrives already sorted. A test mode logs the payload instead of sending it.
Video
Classes sit behind a facade: a poster image until play, then YouTube's privacy-enhanced embed, which starts immediately. Nothing from YouTube loads for a visitor who never presses play, and a self-hosted file works through the same component.
Infra
A static export on Netlify, served from its edge cache with security headers set at the host. There is no server process to run, patch or pay for.
Key decisions
No checkout, on purpose
The obvious build was a cart and a payment gateway, and it was the wrong one for this product. A capped batch, a student discount that does not stack with an early-bird fee, instalments that need a guarantor and two funded places per batch are all things a person has to confirm. A checkout would either have hidden that or pushed it onto a form nobody finishes. Instead every route ends in a WhatsApp conversation, and a seat is held only once it is confirmed.
The gate fails open
If the form endpoint is not configured, the class is simply ungated and the site logs a warning, rather than showing a form that can never succeed. A lost lead costs one follow-up. A broken gate costs the one thing the site exists to show.
Unlocked once is unlocked everywhere
The unlock is kept in the browser and read through a subscription to storage events, so unlocking the class on one course page unlocks it on the others and in every open tab. The prerendered page always starts locked and switches after hydration, so the server's HTML and the browser's first render never disagree.
Every WhatsApp message is written in advance
A bare chat link produces "hi", then a round trip to find out what the person wants. Each button carries a message for exactly where it was pressed, including the course finder's own recommendation, so the first message the institute receives is already the question.
What thisdemonstrates
F.L.O.W.
06 entries
- A conversion path built around how the audience already buys01 / 06
- Lead capture that degrades safely when misconfigured02 / 06
- Browser state shared across tabs without a hydration mismatch03 / 06
- Structured data for a course catalogue: Course, Offer and CourseInstance04 / 06
- A content model where a new batch is a data change, not a code change05 / 06
- A static site with no server to run, patch or pay for06 / 06
MeridianField Services
