© GoLanga · Design preview

DESIGN HANDOFF · V1.0 Open live preview

GOLANGA · COMPLETE PRODUCT EXPERIENCE

Learning feels better
when it feels human.

A complete clickable UI/UX concept for the GoLanga language-learning platform — built from the approved brand identity and the production MVP scope.

37Individual screens

2UI languages

5Product areas

01 · PUBLIC & ONBOARDING

Entry points, assessment and activation

8 screens

Landing pagelanding.html

Create accountsign-up.html

Sign insign-in.html

Password recoveryforgot-password.html

Choose your learning pathonboarding.html

Placement optionsplacement-choice.html

Placement testplacement-test.html

Placement resultplacement-result.html

02 · LEARNING

Personal learning, lessons and AI generation

11 screens

Student dashboarddashboard.html

Course librarylessons.html

Grammar librarygrammar.html

Grammar lessongrammar-lesson.html

Vocabulary libraryvocabulary.html

Vocabulary lessonvocabulary-lesson.html

Dialogues librarydialogues.html

Dialogue lessondialogue-lesson.html

Create an AI lessonai-lesson.html

AI lesson resultai-lesson-result.html

Word of the daydaily-word.html

03 · PRACTICE & PROGRESS

Speech, IELTS and learning statistics

8 screens

Speaking setupspeak.html

Live conversation UIspeaking-session.html

Speaking feedbackspeaking-feedback.html

IELTS preparationielts.html

IELTS listening testielts-listening.html

IELTS reading testielts-reading.html

IELTS resultsielts-result.html

Learning progressprogress.html

04 · PLANS & ACCOUNT

Payments, subscriptions and profile

5 screens

Plans & pricingpricing.html

MTN / Zain checkoutcheckout.html

Payment statusespayment-status.html

Profile & preferencesaccount.html

Billing & subscriptionbilling.html

05 · ADMIN

Platform management

5 screens

Admin overviewadmin-dashboard.html

Learner managementadmin-students.html

Content managementadmin-content.html

Payment managementadmin-payments.html

AI usage & limitsadmin-ai.html

Everything is organized for development handoff.

Each screen has its own HTML entry point. Shared components, responsive CSS and lightweight demo interactions are included. The attached documentation explains the user flows, assumptions and production integration boundaries.