Pattaya Together · Super App · V1 Prototype

Super App V1 — what we already built, and what it proves

Presentation storyboard · 16 slides + 3 appendices · 24 canonical screens · 29 presentation-ready frames (24 base + 5 sub-state variations · 2 improved replacements inside the 24) · for design review, stakeholder briefings, V1→V2 transition planning · updated for CAPTURE-02 + DESIGN-PRESENT-01

24

Canonical screens

29

Presentation-ready frames

5

Sub-state variations

2

Captured-improved replacements

Slide 02 · why this matters

V1 is the first end-to-end look at the Pattaya Together super-app

ก่อนจะเข้า V2, V1 ทำหน้าที่เป็นหลักฐานว่าแนวคิด "super-app 6 โหมด" ทำงานได้จริงในมือผู้ใช้ — ไม่ใช่แค่ mockup คงที่

Business angle

V1 พิสูจน์ว่า Pattaya Together ไม่ใช่เว็บ listing แต่เป็น super-app ที่ครอบคลุมตั้งแต่ Trip / MICE / Rewards / Stay / Services / Operator ใน app เดียว — พร้อมคุยกับ partner, สื่อ, และนักลงทุน

UX angle

มี surface ครบทุกจังหวะสำคัญของ user journey: ค้นพบ → ดูรายละเอียด → จอง → ใช้งานระหว่างทริป → ย้อนดู/จัดการ

Tech angle

React-based single bundle · state-driven dock + hash router · 24 screen components ทำงานร่วมกัน — เป็น fixture จริงสำหรับทดสอบ backend ที่กำลังสร้าง

Talking point

"นี่ไม่ใช่ prototype ที่ออกแบบบนกระดาษ — มันเปิดใน browser แล้วกดได้ทั้ง 24 หน้าจริง"

V2 should

รับ 24 หน้านี้เป็น design anchor และทดสอบว่า architecture ใหม่ (mode selector, role-based UI, integrated service registry) ไม่ทำให้จังหวะเดิมหายไป

captured all V1-HOME

Slide 03 · what V1 proves

Four things are already true in V1

สี่สิ่งที่ V1 ทำให้เราเห็นแล้ว · ทำให้การพูดคุยเรื่อง V2 ตั้งต้นจากฐานจริง

Multi-mode is real: Dock รองรับ 6 โหมด (Home · Discover · MICE · Wallet · My trips · Profile) + center AI button — ไม่ใช่ทฤษฎี
MICE is first-class, not an afterthought: MICE Days 2026 hero + upcoming events list + filter chips · B2B ไม่ใช่ tab ห่าง ๆ
Rewards layer เปิดทางได้: Wallet มี points + balance + transaction — โครงของ loyalty economy พร้อมต่อ
AI เป็น entry point หลัก: ปุ่มกลาง dock = AI Auto-plan wizard · Traveler DNA + budget → plan

Talking point

"เราไม่ต้องขาย concept · เรากำลังขายหลักฐานของ concept ที่กดได้"

captured ×4 trip · mice · rewards · all V1-HOME · V1-MICE · V1-WALLET · V1-AIPLAN

Slide 04 · overall feel

The core loop: discover → detail → book → active trip

Core loop หลักของ app ที่ใช้ได้ใน V1 วันนี้ · user เข้ามาที่ Home → ค้นใน Discover → กดเข้า Detail → จอง → ย้ายเข้า Cockpit ระหว่างทริป

Business angle

Loop นี้คือ funnel หลักของ GMV — ทุกจุดมี CTA ที่ push ไป booking หรือ upgrade tier

UX angle

Rhythm: card-driven feed → rich detail → trust moment (confirmation) → practical use (cockpit วัน 2/3). ใช้ hierarchy + รูปภาพจริง — ไม่ใช่ mock

Tech angle

ทั้ง 4 หน้าใช้ shared components (search · pills · cards) · state รับ transition จริง (hash router + dock state)

Talking point

"ใน 4 หน้านี้ · user ครบทุก moment สำคัญของ tourism super-app"

captured ×4 trip V1-HOME · V1-DISCOVER · V1-DETAIL · V1-COCKPIT

Slide 05 · mode architecture

Six modes · one dock · one AI core

Dock ด้านล่างคือ IA หลักของ app · ทุกโหมดเข้าได้ใน 1 tap · ตรงกลางคือ AI · ไม่ซ่อนอยู่ใน menu

Trip mode (Home · Discover · Detail · Booking · Cockpit · Map · Prep · Journey)
MICE mode (Mice · Media · Embed · Immersive) — B2B-ready surface
Rewards mode (Wallet) — loyalty + payment
Stay mode (HotelFlow · shared Booking) — hospitality cluster
Services / B2B (OperatorIndex · Upload · Intake · Assets · Case · Stake · Queue)
Cross-cutting (Profile · News · AIPlan)

Business angle

6 modes = 6 revenue + data clusters. V1 มีแล้วทุก cluster (แม้บางอันเป็น skeleton) — strategic coverage เต็ม

Tech angle

Dock-active state ทำงาน · mode switching อิง react state + hash routing — สามารถ map ไปสู่ route-based architecture ของ V2 ได้ตรงตัว

V2 should

คง 6 modes ไว้เป็น first-class dock slots · แต่เปลี่ยน architecture backend ให้แต่ละ mode มี service registry แยก (Marketing #5 · Mode Architecture doc)

captured all V1-HOME (dock focus)

Slide 06 · Trip mode deep-dive

Trip is the deepest mode — 8 screens, end-to-end

Trip mode มี coverage ครบตั้งแต่ก่อนเดินทาง → ระหว่างทริป → ย้อนดู

Business angle

Trip เป็น GMV channel หลักของ tourism app · ทุก step มี CTA ที่พา user เข้า paid services (booking · offer · upgrade)

UX angle

Before-trip (Prep · checklist) · During-trip (Cockpit · Map · Journey) · Engage (Discover · Detail · Booking) — 3 เฟสของ tourist บน mobile

Tech angle

Data จะเชื่อม TRIP_STAY_SHOPPING DB group · places/routes/itineraries/hotels · ต้องมี itinerary engine ใน V2

Talking point

"Trip mode พร้อมสุด — เป็น anchor ที่ดีในการเล่าจังหวะทุก mode อื่น"

captured ×6 trip V1-DISCOVER · V1-DETAIL · V1-BOOKING · V1-COCKPIT · V1-PREP · V1-MAP · (+V1-JOURNEY · V1-AIPLAN)

Slide 07 · MICE pitch

MICE is a first-class mode — not a buried tab

MICE Days 2026 hero · upcoming event list · 4 categories (Conference · Exhibition · Incentive · Free) · B2B credibility surface

Business angle

Pattaya MICE market = ฿หลายหมื่นล้าน/ปี · V1 ให้ platform ใส่ event + exhibitors + agenda + check-in ได้ใน single app · สามารถ pitch TCEB / partner ได้ทันที

UX angle

Filter chips ตัดจาก hero → list · pattern เดียวกับ Booking.com หรือ Eventbrite · user B2B จะเข้าใจทันที

Tech angle

MICE DB group มี 11 ตาราง (events/sessions/speakers/exhibitors/venues/checkins...) · V1 แค่แสดง surface · V2 ต้อง wire จริง

Talking point

"นี่คือเหตุผลที่เราคุย MICE Days ได้เต็มปาก — มี visual ของ product แล้ว"

V2 should

เชื่อม MICE-AGENDA · MICE-CHECKIN · MICE-EXHIBITORS services เข้ากับ backend จริง · seed event "MICE Days 2026" ก่อน launch

captured mice V1-MICE · related: V1-MEDIA · V1-EMBED · V1-IMMERSIVE

Slide 08 · Rewards story

Wallet sets the foundation for loyalty + payment + points

Rewards mode คือเครื่องมือสร้าง retention + network effect · V1 เปิด surface พร้อมสำหรับ points / redemption / missions

Business angle

Points economy = lock-in effect · partner (hotel/restaurant) ได้ traffic ผ่าน mission + redemption · ต่อยอดเป็น co-brand program ได้

UX angle

Clean wallet surface · balance + transactions · เหมือน fintech app — สื่อถึงความน่าเชื่อถือเรื่องเงิน

Tech angle

REWARDS DB group: wallets · wallet_transactions · campaigns · missions · vouchers · redemptions — schema พร้อมแล้ว รอ implementation

V2 should

Implement wallets table จริง + เชื่อม RWD-POINTS และ RWD-REDEEM services · และออก 3 missions ตัวอย่างสำหรับ MICE Days 2026

captured rewards V1-WALLET

Slide 09 · Stay cluster

Hotel flow · booking-with-payment · full stay pipeline

Stay mode รองรับทั้ง hotel search + booking confirmation with payment · V1 โชว์ flow จริงจาก "5 curated resorts · Pattaya" → form จอง → payment picker พร้อม encrypted banner

Business angle

Hotel booking = highest-ticket transaction · 10–15% member off · 3-way payment (PromptPay · Card · Together Money) · encryption banner สร้าง trust ตอนใกล้จ่าย

UX angle

TGScreenHotelFlow (SVC-H001 · SEARCH) มี date picker · rooms/guests · filter chips (Beachfront/Spa/MICE/Family) พร้อมใช้งานจริง · handoff ไปหน้ายืนยัน + payment

Tech angle

STAY-HOTELS · STAY-OFFERS services wired · TRIP_STAY_SHOPPING DB group ครอบคลุม hotels + hotel_offers · partner onboarding เป็น next blocker

V2 should

ตัดสินใจว่า Stay = dock slot แยก หรืออยู่ใต้ Trip · จัด onboarding สำหรับ hotel partner · wire payment provider จริง

captured-improved ×2 stay · trip V1-BOOKING (state_b · payment) · V1-HOTEL (full search form · CAPTURE-02)

Slide 10 · B2B pipeline

Operator-facing pipeline already exists — 7 screens

ฝั่ง B2B ของ app · Operator เข้ามาผ่าน OperatorIndex → upload content · intake ลูกค้า · จัดการ assets · ติดตามคดี · ดูแล stakeholders · ทำงานใน queue

Business angle

Partner หลักของ super-app (hotel operator · tour operator · MICE organizer · insurance partner) มี workspace แยก — ไม่ต้องสร้าง 2 app

UX angle

B2B surface ใช้ grid / form / list pattern — แตกต่างจาก consumer surface อย่างชัดเจน · ลดการสับสน role

Tech angle

SUPPORT_SERVICES + IDENTITY_GOVERNANCE DB groups · ต้องมี RBAC จริงใน V2 (tier: partner / staff / admin)

Talking point

"เราไม่ต้องรอ V3 เพื่อคุย B2B · V1 เปิด flow สำหรับ operator ไว้แล้ว"

captured ×7 services/b2b V1-OP · V1-UPLOAD · V1-INTAKE · V1-ASSETS · V1-CASE · V1-STAKE · V1-QUEUE

Slide 11 · AI moment

Together AI is not a chatbot — it's the trip composer

AI Auto-plan wizard · §1 Traveler DNA (Coast+seafood+spa · Family unhurried · Couple romantic · Backpack · Photography) · §2 Budget · §3 Generate · สื่อชัดว่า AI เป็น ผู้วางแผน ไม่ใช่ Q&A bot

Business angle

AI นี้ = Together AI · differentiator ที่ตอบคู่แข่งได้ · vertical (Pattaya tourism) · ไม่ใช่ AI ทั่วไป — สร้าง IP ได้

UX angle

Wizard 3 ขั้น · ไม่เปิดเป็น chat · user ไม่ต้องคิดประโยคยาว · AI ถามสั้น ตอบเร็ว

Tech angle

Backend = RAG engine (Marketing #3 · Layer F) · 8-step pipeline · Claude API · cache + RAGAS + CM mode · V1 UI พร้อมต่อ backend

Talking point

"ลูกค้าไม่ต้องเรียน prompt · กดปุ่ม · ตอบ 5 คำ · ได้ plan"

V2 should

Wire AI wizard → RAG backend (private LLM pipeline) · ใส่ faithfulness guardrail ≥ 0.85 · cache hit ≥ 60%

captured trip V1-AIPLAN

Slide 12 · content surface

Three content surfaces · media player · embed host · immersive

V1 รองรับ content format ที่หลากหลาย — ไม่ใช่แค่ text + รูป

Business angle

Hotel / attraction partner ส่ง video walkthrough · embed third-party content (YouTube · maps · reviews) · immersive 360° tour — พรีเมียม content = พรีเมียม conversion

UX angle

Full-screen takeover · player controls · ไม่แย่ง nav กับ main app · กลับได้ตลอด

Tech angle

CONTENT_MEDIA DB group: content_items · media_assets · localizations · tags — pipeline พร้อมรับ ingestion

captured ×3 trip · mice V1-MEDIA · V1-EMBED · V1-IMMERSIVE

Slide 13 · personalization

Profile + Platform News complete the identity + narrative layer

Profile (3 tabs: Profile · Preferences · Activity) + Platform News (concept-comparison · Alex persona · project-overview video · Join the Platform CTA)

Business angle

Platform News เล่าวิสัยทัศน์ระดับ product · "Passive spender → Active Economic Agent" · persona-based targeting · Join the Platform funnel

UX angle

Preferences tab ให้ user control · Platform News มี video + persona panel + concept diagram — editorial feel

Tech angle

IDENTITY_GOVERNANCE: users · roles · permissions · tenants · user_roles — base ของ RBAC + PDPA · CONTENT_MEDIA: news items + video assets

captured-improved ×2 all V1-PROFILE · V1-NEWS (full TGScreenNews · CAPTURE-02)

Slide 14 · strengths

What V1 is measurably strong at

Visual depth: 24 screen components จริง · ไม่ใช่ placeholder · พรีเซนต์ได้ทันที
Mode coverage: 6 modes ครอบ Trip · MICE · Rewards · Stay · Services · cross-cutting
MICE surface: B2B-ready · event hero + categories + upcoming list
AI moment: Not a chatbot · AI Auto-plan wizard เป็น differentiator
Operator pipeline: 7 screens สำหรับ partner · ไม่ต้องสร้าง app แยก
Visual language: Typography · pink/magenta brand · consistent ทุกหน้า

Talking point

"V1 ตอบคำถามทุกคนว่า — product หน้าตาเป็นยังไง · ใครใช้ · ใช้ทำอะไร"

cross-reference ×4 multi see slides 06–11

Slide 15 · gaps

What V1 still lacks · readiness gaps

ต้องพูดให้ตรง · ไม่ใช่ทุกอย่างพร้อม launch

Backend = เกือบทุกอย่างยัง static: V1 = mock data embedded ใน bundle · ไม่มี DB จริง · ไม่มี auth จริง
Shopping mode ว่างเปล่า: Dock ไม่มี Shopping slot · mode coverage ขาด 1/6
Cross-mode transitions แน่นเกินไป: Navigation พึ่ง hash router ซึ่งไม่ scale เมื่อ route มากขึ้น
Tracking = not-started: ไม่มี analytics / events / dashboards · ไม่รู้ว่า user ทำอะไร
PDPA + role-based gating ยังไม่ real: Operator surface ไม่มี auth gate
Services sub-modes ยังเป็น skeleton: SVC-HELPDESK, SVC-ESIM รอ partner integration
Desktop-wide renders ยังไม่มี: capture pack เป็น mobile 414×896 เท่านั้น · slide hero ที่ต้องการภาพกว้างต้องรอรอบต่อไป

V2 priority

Backend + auth + tracking + mode-6 (Shopping) + partner onboarding (hotel/eSIM/helpdesk) · hotel + news capture ถูก resolve ใน CAPTURE-02 แล้ว

reference all Hotel + News gaps resolved in CAPTURE-02 · remaining gaps are backend / tracking / Shopping mode

Slide 16 · transition plan

From V1 (what exists) to V2 (what ships)

ตัดสินใจชัดเจน: อะไรถือจาก V1 · อะไรเปลี่ยนใน V2

✓ Keep from V1

6-mode dock + center AI button
Brand identity (pink/magenta · typography)
Trip core loop (Discover→Detail→Booking→Cockpit)
MICE hero + category pattern
Wallet structure
Operator B2B pipeline (7 screens)
AI Auto-plan wizard pattern
3 content types (media/embed/immersive)

✕ Change in V2

Add Shopping mode slot in dock
Replace hash router with route-based IA
Wire backend (real DB · auth · tracking)
RBAC: member/gold/platinum/staff/admin tiers
PDPA: hash email/phone · fuzz GPS ±50m
AI: RAG backend + cache + RAGAS + CM mode
Hotel: direct dock slot or cleaner entry
News: dedicated route (separate from drawer)
Wire MICE-AGENDA/CHECKIN/EXHIBITORS services
Add 72 reporting dashboards + KPI engine

Closing point

"V1 คือ proof · V2 คือ platform · ทั้งคู่อยู่บน design DNA เดียวกัน"

cross-reference all all 24 V1 screens referenced

Appendix A · coverage

Capture coverage matrix · 24 V1 screens

สถานะของแต่ละ screen · method ที่ใช้ capture · ใช้สำหรับ cross-check กับ Management Runtime

#	Code	Name	Mode	Status	Method	Used in slide
01	V1-HOME	Home	all	captured	hash sc-1	02, 03, 04, 05, 14, 16
02	V1-DISCOVER	Discover	trip	captured	hash sc-2	04, 06
03	V1-DETAIL	Detail	trip	captured	hash sc-3	04, 06
04	V1-BOOKING	Booking	trip/stay	captured	hash sc-4	06, 09
05	V1-COCKPIT	Cockpit	trip	captured	hash sc-5	04, 06, 14
06	V1-MICE	Mice	mice	captured	dock MICE	03, 07, 14
07	V1-WALLET	Wallet	rewards	captured	dock Wallet	03, 08
08	V1-HOTEL	HotelFlow	stay	captured-improved	phone-scroll + A "Book" (CAPTURE-02)	09
09	V1-PROFILE	Profile	all	captured	dock Profile	13
10	V1-NEWS	News	all	captured-improved	phone-scroll + A "Open" (CAPTURE-02)	13
11	V1-OP	OperatorIndex	services/b2b	captured	hash sc-op	10, 14
12	V1-UPLOAD	Upload	services/b2b	captured	hash sc-7	10
13	V1-INTAKE	Intake	services/b2b	captured	hash sc-8	10
14	V1-ASSETS	Assets	services/b2b	captured	hash sc-9	10
15	V1-CASE	Case	services/b2b	captured	hash sc-10	10
16	V1-STAKE	Stake	services/b2b	captured	hash sc-11	10
17	V1-QUEUE	Queue	services/b2b	captured	hash sc-12	10
18	V1-PREP	Prep	trip	captured	hash sc-prep	06
19	V1-JOURNEY	Journey	trip	captured	hash sc-journey	06
20	V1-MAP	Map	trip	captured	hash sc-map	06
21	V1-MEDIA	MediaPlayer	trip/mice	captured	hash sc-13	12
22	V1-EMBED	EmbedHost	trip/mice	captured	hash sc-14	12
23	V1-IMMERSIVE	Immersive	trip/mice	captured	hash sc-15	12
24	V1-AIPLAN	AIPlan	trip	captured	hash sc-6 overlay	03, 11, 14
04b	V1-BOOKING	Booking · payment moment	trip	captured	sc-4 + scroll (CAPTURE-02)	09
06b	V1-MICE	MICE · Conference filter	mice	captured	dock MICE + chip (CAPTURE-02)	07
06c	V1-MICE	MICE · Exhibition filter	mice	captured	dock MICE + chip (CAPTURE-02)	07
07b	V1-WALLET	Wallet · tier ladder	rewards	captured	dock Wallet + scroll (CAPTURE-02)	08
24b	V1-AIPLAN	AIPlan · §2 Budget	trip	captured	sc-6 + modal-scroll (CAPTURE-02)	11

Appendix B · visual index

All 29 frames across 24 canonical V1 screens · one-page index

Visual reference ของทุก screen · ใช้ในการ review quickly หรือแทรก backup slide

Appendix C · speaker notes (deep)

Deep speaker notes per audience

ใช้คู่กับ 16 slides หลัก · แยก 3 มุมชัดเจน

Executive angle (5 นาที · pitch deck)

สไลด์ 01–03 เท่านั้น · ใช้ภาพ home + mice + wallet + ai_plan
ข้อความหลัก: "24 screen states · 6 modes · MICE-ready · AI-first · operator-ready"
ไม่เน้น tech · เน้น coverage + differentiator
ปิดด้วย slide 16 (transition plan) เพื่อให้รู้สึก นี่ไม่ใช่ final · แต่มี path ชัดไป V2

Product angle (20 นาที · design review)

ไล่สไลด์ 04–13 · mode ต่อ mode
ในแต่ละ mode · โชว์ภาพจริง · พูดถึง UX rhythm (before/during/after)
เน้น slide 07 (MICE) + slide 11 (AI) เป็น differentiator · ใช้เวลา 3–4 นาที แต่ละ slide
ปิดด้วย slide 15 (gaps) อย่างตรงไปตรงมา

Technical angle (30 นาที · eng briefing)

เปิดด้วย slide 05 (mode architecture) → slide 10 (operator B2B)
โชว์ tech angle ใน angle box · เชื่อมกับ DB groups ใน Marketing #7
ใช้ appendix A (coverage matrix) เพื่อ trace ว่า screen ไหน → service ไหน → DB group ไหน
พูดถึง RAG engine + RBAC + PDPA guardrails ใน slide 11 + 13 + 15
ปิดด้วย slide 16 transition plan + "what changes in V2" column