Summary

The product has strong advantages (Listen → Practice → Test loop, AI conversations, scored feedback, homophone-smart assessment, groups/classrooms). The current homepage lists features but buries the story: persona cards appear before “how it works,” the homophone differentiator is invisible, and CTAs are generic.

Proposed principle: Lead with one outcome → show the 3-step loop with visuals → explain why we’re different → prove progress with a labelled example → narrow personas → map pedagogy to app buttons → single CTA.

Goal	Current	Proposed
First 5 seconds	Long feature headline + dense subtitle	Outcome headline + mechanism in one line + dual CTA
Understand the product	“How to use it” feature cards (no visuals)	Numbered How it works with screenshots
Trust / differentiation	Illustrative success chart (unlabelled)	“Why choose us” + example report labelled as illustrative
“Is this for me?”	8 persona cards mid-page → `/landing-pages-review/*`	4 broad paths after core story; full grid on `/for/*`
Pedagogy	TEFL 3 P’s at bottom (jargon)	Listen · Practice · Test mapped to app modes

Side-by-side layout

Scroll blocks show section order top-to-bottom. Numbers match the section-order table below.

Current — pages/index.vue

1 Hero

Practice Real Conversation and Track Your Progress.

Long subtitle: fluency, accuracy, pronunciation, multiple languages…

2 Hero image

3 “How to use it”

Conversationslibrary + create links

Sharegroups link

Progresstrack link

4 SuccessShowcase

89%

success table

growth chart Jan→Jul

Looks like live data — actually hardcoded

5 CTA

Getting Started → /learn

6 8 persona cards

Business

High school

University

Adult

Immigrants

Corporate

Teachers

Beginners

Links to /landing-pages-review/* before visitor understands core loop

7 TEFL 3 P’s

Presentation · Practice · Production (teacher jargon)

8 Second CTA

Get Started Now → /learn (duplicate)

Issues: Two CTAs to the same place; personas before how-it-works; no homophone/AI callouts; success stats ambiguous; subtitle typo “Fluency,Accuracy”.

Proposed — new homepage structure

1 Hero

Speak English with confidence — practice real conversations and see your scores improve.

Listen → Practice each line → Test yourself. AI scenarios or library.

Try a free practice See how it works

2 How it works
1
Select+ screenshot
2
Practice+ screenshot
3
Test+ screenshot

3 Why learners choose EEC
Homophone-smart
Fair when STT hears there/their
AI conversations
Any topic & situation
Classroom ready
Share & track groups
3 scored metrics
Fluency · Accuracy · Pronunciation

4 Example progress

Example report

89%

fluency / accuracy / pronunciation

growth chart + one human sentence

5 Built for you (4 paths)

Students

Teachers

Professionals

New to English

6 Interactive demos

3 tour cards from index-alternative (optional)

7 Listen · Practice · Test

TEFL mapped to app buttons (not Presentation/Production jargon)

8 Single CTA

Start practicing — free → /learn

Wins: Outcome-first hero; differentiators visible; example data labelled; one primary CTA; personas after understanding; reuses assets from public/landing-images/ and index-alternative.vue.

Section order comparison

Use this table when implementing or reviewing copy changes in pages/index.vue.

#	Current section	Proposed section	Notes
1	Hero title + subtitle (centered)	Hero — outcome headline + dual CTA	Primary: `/learn` · Secondary: anchor or demo tours
2	Hero image (`3 users.webp`)	How it works (3 steps + SVGs)	Assets: `select-conversation.svg`, `practice-feedback.svg`, `test-progress.svg`
3	Feature cards (“How to use it”)	Why learners choose EEC (4 differentiators)	Include homophone callout — unique to this product
4	UiHomeSuccessShowcase	Example progress report (labelled)	Add `index_exampleReportBadge` i18n key; keep component
5	“Getting Started” CTA	Built for you — 4 persona paths	Reduce from 8 cards; link to existing landing pages
6	8 persona cards	Interactive demos (optional)	Port tour buttons from `index-alternative.vue`
7	TEFL 3 P’s gradient band	Listen · Practice · Test band	Rename Presentation → Listen, Production → Test
8	“Get Started Now” CTA	Single footer CTA	Remove duplicate mid-page CTA

Full proposed mock (visual detail)

Closer to what the live page could look like. Images and routes match the codebase.

Speak English with confidence — practice real conversations and see your scores improve

Listen to a dialogue, practice each line with instant feedback, then test yourself. Choose from our library or create any scenario with AI.

Try a free practice See how it works

How it works

1

Select a conversation

Library or AI — topic, situation, your needs.

2

Practice with feedback

Speak line-by-line; see pronunciation help in real time.

3

Test & track progress

Fluency, accuracy, pronunciation — recorded over time.

Why learners choose Easy English Conversation

Homophone-smart scoring

We don’t penalize you when speech recognition hears the right sound with a different spelling (their vs there).

AI custom conversations

Job interview, doctor visit, team meeting — generate a script for your situation in seconds.

Classrooms & groups

Teachers share conversations and monitor student progress with detailed reports.

Listen · Practice · Test

Structured path from hearing a conversation to speaking it under assessment.

Example learner report

89%

Overall success · Fluency 88 · Accuracy 91 · Pronunciation 87

Typical results from regular conversation practice — not live platform stats.

[ Growth chart — reuse UiHomeSuccessShowcase ]
Jan 52% → Jul 89%

Built for you

Students

High school & university

Teachers

Classroom tools & reports

Professionals

Business & corporate teams

New to English

Immigrants & beginners

Based on proven ESL methodology — mapped to what you click

Listen

Was “Presentation” — hear the full conversation in context.

Practice

Structured speaking with guided exercises and real-time feedback.

Test

Was “Production” — apply skills under assessment; scores saved.

Ready to practice?

Start practicing — free

Suggested copy (i18n keys)

Draft strings for composables/useTranslations.ts. English shown; add keys alongside existing heroTitle / index_* entries.

Key (proposed)	English copy	Replaces / notes
`heroTitle`	Speak English with confidence — practice real conversations and see your scores improve.	Shorter outcome focus
`heroSubtitle`	Listen to a dialogue, practice each line with instant feedback, then test yourself. Choose from our library or create any scenario with AI.	Fix “Fluency,Accuracy” spacing; one mechanism sentence
`index_heroCtaPrimary`	Try a free practice	New — replaces generic “Getting Started”
`index_heroCtaSecondary`	See how it works	New — scroll or demo tours
`index_howItWorksTitle`	How it works	Replaces “How to use it” for this section
`index_whyChooseTitle`	Why learners choose Easy English Conversation	New differentiators section
`index_homophoneBenefit`	Fair feedback when speech recognition confuses similar sounds — we understand homophones like their and there.	Link to `/homophone-assessment-flow` optional
`index_exampleReportBadge`	Example learner report	Label on SuccessShowcase
`index_builtForYouTitle`	Built for you	Replaces “Perfect For Every ESL, EFL Student”
`index_teflTitle`	Based on proven ESL methodology — Listen, Practice, Test	User language instead of “3 P’s”
`index_finalCta`	Start practicing — free	Single bottom CTA

Key advantages to surface

These exist in the product today but are easy to miss on first visit. Priority order for homepage messaging.

Priority	Advantage	Evidence in codebase	Currently on homepage?
1	Listen → Practice → Test structured loop	`pages/learn.vue`, `LearnInitialSelection.vue`	Partially (feature cards)
2	Fluency / Accuracy / Pronunciation scoring	`scoreSpeechWithAi.ts`, reports components	Mentioned in subtitle only
3	Homophone-smart assessment	`applyHomophoneSpeechAdjustments.ts`, `homophoneIndex.ts`	Not mentioned
4	AI custom conversations	`pages/create.vue`, `generateConversationAi.ts`	Buried in first feature card
5	Groups & classroom progress	`pages/share.vue`, group reports	Second feature card
6	Multi-language UI	`useTranslations.ts`, `UiLearnLangLearn`	Mentioned in subtitle
7	Audience-specific scenarios	`pages/landing-pages-review/*`	Yes — but too early in scroll order

Homophone example for marketing copy: Script: “I love their house” · Heard: “I love there house” · Other apps: marked wrong · EEC: counts as correct when sounds match. See homophone-assessment-flow.

ASCII wireframe (proposed)

Paste-friendly structure for specs or PR descriptions.

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]  Home  Learn  Create  Share  Blog          [Try practice] │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Speak English with confidence                    ┌───────────┐ │
│  Listen → Practice → Test. Library or AI.       │ hero img  │ │
│                                                   └───────────┘ │
│  [Try a free practice]  [See how it works]                      │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                    HOW IT WORKS                                 │
│   ┌─────────────┐  ┌─────────────┐  ┌─────────────┐            │
│   │ 1 Select    │  │ 2 Practice  │  │ 3 Test      │            │
│   │ [screenshot]│  │ [screenshot]│  │ [screenshot]│            │
│   └─────────────┘  └─────────────┘  └─────────────┘            │
├─────────────────────────────────────────────────────────────────┤
│              WHY LEARNERS CHOOSE EEC                            │
│  Homophone-smart │ AI scenarios │ Groups │ Scored metrics       │
├─────────────────────────────────────────────────────────────────┤
│  [Example learner report]  SuccessShowcase + growth chart       │
├─────────────────────────────────────────────────────────────────┤
│  BUILT FOR YOU — Students │ Teachers │ Professionals │ Beginners│
├─────────────────────────────────────────────────────────────────┤
│  (optional) Interactive demo tours — 3 cards                    │
├─────────────────────────────────────────────────────────────────┤
│  Listen │ Practice │ Test  (TEFL methodology, plain language)   │
├─────────────────────────────────────────────────────────────────┤
│           [ Start practicing — free ]                           │
└─────────────────────────────────────────────────────────────────┘

Implementation checklist

If you adopt this layout, these files are the main touchpoints.

Task	Files	Effort
Reorder sections & add How it works block	`pages/index.vue`	Medium
Add differentiators section (homophone + AI)	`pages/index.vue`, `useTranslations.ts`	Medium
Label SuccessShowcase as example	`components/ui/home/SuccessShowcase.vue`	Quick
Hero dual CTA + updated copy	`pages/index.vue`, `useTranslations.ts`	Quick
Reduce persona grid to 4 paths	`pages/index.vue`	Quick
Port demo tours from alternative index	`pages/landing-pages-review/index-alternative.vue` → `pages/index.vue`	Medium
Rename TEFL section to Listen/Practice/Test	`pages/index.vue`, `useTranslations.ts`	Quick
First-visit default conversation on /learn	`LearnInitialSelection.vue`, `useLearnPageFlow.ts`	Larger

Related references:

Live homepage — pages/index.vue
Draft patterns — pages/landing-pages-review/index-alternative.vue
Broader UI proposal — public/ui-redesign-showcase.html (section #home)
Homophone deep-dive — public/homophone-assessment-flow.html
Landing page inventory — pages/landing-pages-review/README.md

Quick wins first

Update hero copy + add secondary CTA
Insert How it works section with existing SVG assets
Add “Example report” badge to SuccessShowcase
Add homophone benefit blurb (3–4 sentences)
Remove duplicate mid-page CTA; keep one at bottom
Move persona grid below differentiators / example report