Prototype Design Readiness & System Blueprint
เอกสารฉบับนี้ทำหน้าที่เป็นเอกสารแม่สำหรับพา Together Super App V2 จากระดับต้นแบบเชิงภาพและ interaction ไปสู่ระดับที่สามารถอ้างอิงงาน ออกแบบระบบ ออกแบบฐานข้อมูล จัดการ content เชื่อม data และเปิดให้ทีมทดสอบใช้งานจริงได้อย่างเป็นระบบ
หัวใจของเอกสารนี้คือการเปลี่ยนจาก “ต้นแบบที่ดูได้” ไปสู่ “ระบบที่บริหารได้”
กล่าวคือไม่ใช่เพียงมีหน้าจอสวยหรือ flow ดี แต่ต้องสามารถตอบได้ด้วยว่า:
- หน้านี้คืออะไร
- กล่องนี้คืออะไร
- ใช้ data อะไร
- ใครเป็น owner
- พร้อมพัฒนาหรือยัง
- เชื่อม backend หรือยัง
- ทดสอบอะไรแล้วบ้าง
- ยังขาดอะไร
- จะส่งต่อทีม dev, QA, content, ops อย่างไร
ดังนั้นเอกสารฉบับนี้ต้องถูกใช้เป็นสะพานเชื่อมระหว่าง:
- prototype
- design management
- system design
- data model
- content operations
- tracking
- QA / UAT readiness
1. ความเห็นต่อ V1 ในฐานะ milestone prototype
V1 เป็น milestone prototype ที่ดีมาก เพราะไปไกลกว่าระดับ wireframe แล้วอย่างชัดเจน และเริ่มมีคุณลักษณะของ behavioral prototype ที่ใช้อธิบายระบบได้จริง ทั้งในแง่:
- visual direction
- brand direction
- object/card style
- multi-screen flow
- mobile-first interaction
- การมีหลายกลุ่มหน้าจอที่สะท้อน use case จริง
จากต้นแบบ V1 เห็นได้ชัดว่ามี screen สำคัญจำนวนมากแล้ว เช่น:
- Home
- Discover
- Detail
- Booking
- Cockpit
- Map
- Journey
- HotelFlow
- Mice
- Wallet
- Profile
- News
- OperatorIndex
- Upload / Intake / Assets / Queue / Stake / Case
กล่าวได้ว่า V1 ไม่ใช่เพียง mockup สวย ๆ แต่เป็น prototype เชิงพฤติกรรมที่ใช้เป็น visual and interaction baseline ได้แล้ว
จุดแข็งของ V1
- มีทิศทาง visual ที่จับต้องได้
- มี object language ที่เริ่มชัด
- มีหลาย flow ที่สื่อสาร use case ได้
- เหมาะใช้เป็น milestone สำหรับการพาไป V2
- เหมาะใช้เป็น “ต้นแบบแลก” เพื่อใช้คุยกับทีมออกแบบ ทีม dev และ stakeholder
ข้อจำกัดของ V1
แม้ V1 จะดีมาก แต่ยังเป็น prototype-centric มากกว่า system-centric
กล่าวคือ:
- เห็นหน้าจอแล้ว
- เห็น interaction แล้ว
- เห็น visual แล้ว
แต่ยังไม่ใช่ระบบอ้างอิงงานที่ใช้ส่งต่อข้ามทีมได้อย่างลื่นไหล
2. ปัญหาหลักของ V1 ถ้าจะเอาไปต่อทันที
2.1 Source of truth ยังไม่เป็นระบบ
ต้นแบบรวม logic และโครงสร้างจำนวนมากไว้ในชุดเดียว ทำให้:
- review ยาก
- diff ยาก
- อ้างอิงข้ามทีมยาก
- ownership ไม่ชัด
- แยก priority ต่อ module ยาก
2.2 ยังไม่มี Design Object Registry ที่ชัด
ยังไม่เห็นชั้นข้อมูลกลางที่ตอบได้ว่า:
- card นี้ชื่ออะไร
- block นี้มีรหัสอะไร
- object นี้ใช้ซ้ำตรงไหนบ้าง
- object นี้พึ่ง data อะไร
- object นี้พร้อมพัฒนาหรือยัง
2.3 ยังไม่มี Design-to-Dev handoff structure ที่ละเอียดพอ
ยังไม่สามารถตอบได้ทันทีว่า:
- หน้านี้ใช้ data อะไร
- state มีกี่แบบ
- loading / empty / error / success ครบหรือไม่
- เชื่อม API ไหน
- acceptance criteria คืออะไร
- dependency ก่อนเริ่ม dev คืออะไร
2.4 ยังไม่ใช่ prototype management board
ยังไม่เห็นระบบที่ช่วยให้มองภาพรวมทันทีว่า:
- module ไหนจบแล้ว
- module ไหนค้าง content
- module ไหนค้าง data mapping
- module ไหนค้าง backend
- module ไหนพร้อม UAT
3. ข้อเสนอหลัก: ต้องทำเป็น Design Management System
คำตอบเชิงโครงสร้างคือ:
ควรทำให้ระบบนี้มีลักษณะคล้าย project management แต่ยกระดับเป็น Design Management + Build Readiness System
เพราะโจทย์ไม่ใช่แค่ “จัดการงาน”
แต่คือ “จัดการความสัมพันธ์ระหว่าง design, content, dev, data, integration และ testing”
ดังนั้นระบบที่เหมาะสมควรต่อเนื่องจาก:
Design Management → Build Readiness → Integration Readiness → Test Readiness
4. หน่วยหลักของ Design Management System
4.1 Screen Registry
เก็บรายการทุกหน้าจอในระบบ
แต่ละ screen ควรมีข้อมูลอย่างน้อย:
- screen_id
- screen_name
- mode
- platform
- purpose
- owner
- status
- related_modules
- related_APIs
- related_content_blocks
- notes
ตัวอย่างรหัส:
- SC-ENTRY-001 = Together Mode Selector
- SC-TRIP-001 = Trip Home
- SC-MICE-001 = MICE Home
- SC-REWARDS-001 = Rewards Home
4.2 Block / Object Registry
แตกแต่ละหน้าจอเป็นกล่องหรือ component ย่อย
แต่ละ block ควรมี:
- block_id
- screen_id
- block_name
- block_type
- display_priority
- content_type
- data_source
- states
- reusable หรือไม่
- owner
- readiness
ตัวอย่าง:
- BLK-SC-ENTRY-001-HERO
- BLK-SC-ENTRY-001-MODEGRID
- BLK-SC-TRIP-001-NEARBY
- BLK-SC-MICE-001-AGENDA
4.3 Journey Registry
เก็บเส้นทางการใช้งานของผู้ใช้
แต่ละ journey ควรมี:
- journey_id
- journey_name
- entry_point
- user_type
- mode
- step_sequence
- exit_condition
- success_metric
ตัวอย่าง:
- JNY-GUEST-ENTRY
- JNY-TRIP-PLAN
- JNY-MICE-CHECKIN
- JNY-REWARD-REDEEM
4.4 Data / Integration Registry
เก็บว่าแต่ละ screen หรือ block ใช้ข้อมูลอะไร
แต่ละ data item ควรมี:
- data_id
- source
- owner
- mock / static / live
- api_dependency
- update_frequency
- related_screens
- related_blocks
4.5 Readiness Board
ใช้ดูสถานะจริงของงานแบบข้ามทีม
สถานะที่ควรมี:
- Concept
- Designed
- Reviewed
- Content-ready
- Dev-ready
- In build
- Integrated
- Test-ready
- UAT
- Done
5. ทำไมต้องใช้ระบบรหัสอ้างอิง
ถ้าจะให้ mapping งานต่าง ๆ ง่าย ต้องเปลี่ยนจากคำอธิบายลอย ๆ ไปสู่ระบบรหัสอ้างอิงทุกจุด
5.1 Screen ID
ใช้กับทุกหน้าจอ
เช่น:
- SC-ENTRY-001
- SC-TRIP-001
- SC-MICE-001
- SC-RWD-001
5.2 Block ID
ใช้กับกล่องหรือ object ทุกตัว
เช่น:
- BLK-SC-ENTRY-001-MODEGRID
- BLK-SC-TRIP-001-NEARBY
- BLK-SC-MICE-001-AGENDA
5.3 Journey ID
ใช้กับ flow ของผู้ใช้
เช่น:
- JNY-GUEST-ENTRY
- JNY-TRIP-PLAN
- JNY-MICE-CHECKIN
5.4 Data ID
ใช้กับ data source หรือ entity สำคัญ
เช่น:
- DAT-ATTRACTION-LIST
- DAT-EVENT-AGENDA
- DAT-REWARD-BALANCE
- DAT-HOTEL-OFFERS
5.5 Test Case ID
ใช้กับกรณีทดสอบ
เช่น:
- TC-SC-ENTRY-001-01
- TC-SC-MICE-001-04
- TC-BLK-TRIP-NEARBY-02
เมื่อมีระบบรหัสแบบนี้ ทุกทีมจะอ้างอิงตรงกัน
6. Together Mode Architecture ที่ยืนยันใช้
โหมดที่ยืนยันใช้สำหรับ Together Super App V2 คือ 6 โหมด ดังนี้:
- Trip
- MICE
- Rewards
- Shopping
- Services
- Stay
ลำดับความสำคัญที่แนะนำคือ:
- Trip
- MICE
- Rewards
- Services
- Stay
- Shopping
การจัดวางในหน้าจอ popup selector แบบ 2 รายการต่อแถว:
- Trip | MICE
- Rewards | Services
- Stay | Shopping
เหตุผลของลำดับนี้:
- Trip เป็น mode ที่กว้างและใช้บ่อยที่สุด
- MICE เป็น strategic differentiator ของแพลตฟอร์ม
- Rewards เป็น engagement engine
- Services เป็น utility layer ที่สำคัญมากในชีวิตจริง
- Stay เป็น hospitality layer
- Shopping เป็น commerce extension
7. หลักคิดของ Together Mode
Together Mode ไม่ควรเป็นแค่ filter ธรรมดา แต่เป็น “ชั้นของเจตนาใช้งาน”
เมื่อผู้ใช้เลือก mode ระบบต้องเปลี่ยนอย่างน้อย:
- hero content
- quick actions
- navigation priority
- menu visibility
- content ranking
- recommendation logic
- search suggestion
- notification context
- CTA หลักของแต่ละ section
ดังนั้น mode คือ “ชั้นคัดกรองประสบการณ์”
เป้าหมายคือทำให้ผู้ใช้รู้สึกว่า:
“ระบบเข้าใจว่ากำลังเข้ามาเพื่อทำอะไร”
8. Mode-by-Mode Content Matrix
8.1 Trip Mode
Trip Mode คือโหมดหลักสำหรับนักท่องเที่ยวที่ต้องการวางแผนเที่ยว ค้นหาสถานที่ ใช้ map และจัด itinerary
Trip Mode ควรเน้น:
- เที่ยวอะไร
- ไปไหน
- วางแผนอย่างไร
- ใช้ map และ itinerary อย่างไร
- nearby places
- local experiences
- route / day plan
- attraction discovery
คำอธิบาย:
- เที่ยวอะไร คือการช่วยค้นหาสถานที่และกิจกรรมที่เหมาะกับผู้ใช้
- ไปไหน คือการชี้เป้าสถานที่จริงที่ควรไป
- วางแผนอย่างไร คือการช่วยเปลี่ยนจากการดู content ไปสู่การจัดทริปจริง
- ใช้ map และ itinerary อย่างไร คือการผูก content กับ spatial behavior
- nearby places คือการค้นหาสถานที่ใกล้ตัว
- local experiences คือกิจกรรมเฉพาะพื้นที่ที่มีความเป็น destination
- route / day plan คือการจัดลำดับสถานที่เป็นแผนใช้งานจริง
- attraction discovery คือการช่วย “ค้นพบ” ไม่ใช่แค่ “ค้นหา”
Trip Mode ควรเปลี่ยนใน UI:
- hero = destinations / route / nearby
- CTA หลัก = plan trip / start itinerary / explore nearby
- menu เด่น = map, places, dining, stay, transport, saved plan
- card priority = attraction, itinerary, local experience, nearby
- recommendation = route-based / persona-based / time-based
8.2 MICE Mode
MICE Mode เป็นโหมดสำหรับผู้ร่วมงานประชุม นิทรรศการ อีเวนต์ และ ecosystem เชิงธุรกิจ
MICE Mode ควรเน้น:
- event home
- agenda
- speaker
- exhibitor
- sponsor
- venue map
- registration
- check-in
- networking
- announcements
คำอธิบาย:
- event home คือหน้าศูนย์กลางของงาน
- agenda คือหัวใจของประสบการณ์ event app
- speaker คือข้อมูลวิทยากรเพื่อช่วยตัดสินใจเข้าฟัง
- exhibitor คือข้อมูลผู้แสดงสินค้า/องค์กรในงาน
- sponsor คือพื้นที่ของผู้สนับสนุนเชิงพาณิชย์
- venue map คือแผนที่ของพื้นที่จัดงาน
- registration คือกระบวนการลงทะเบียนและ onboarding
- check-in คือการยืนยันการเข้าร่วม onsite
- networking คือความสามารถในการเชื่อมต่อกันในงาน
- announcements คือศูนย์ประกาศของงาน
MICE Mode ควรเปลี่ยนใน UI:
- hero = live event / upcoming event / badge / check-in
- CTA หลัก = register, check-in, view agenda, find booth
- menu เด่น = agenda, exhibitors, sponsors, venue, announcements, meetings
- content priority = live event objects
- recommendation = session-based / exhibitor-based / sponsor-based / role-based
8.3 Rewards Mode
Rewards Mode คือ incentive-driven mode ของแพลตฟอร์ม
Rewards Mode ควรเน้น:
- point balance
- redeem now
- active campaigns
- nearby rewards
- missions
- perks
- city incentive
- redemption history
คำอธิบาย:
- point balance คือ asset เชิงจิตวิทยาที่ทำให้ผู้ใช้รู้สึกมีสิ่งสะสมอยู่
- redeem now คือ action หลักในการเปลี่ยนสิทธิ์เป็นคุณค่าจริง
- active campaigns คือแคมเปญที่กำลังทำงาน
- nearby rewards คือ reward ที่เชื่อมกับพื้นที่
- missions คือภารกิจที่ทำให้ระบบมี engagement engine
- perks คือสิทธิพิเศษที่เกินกว่า point ธรรมดา
- city incentive คือ reward ที่ออกโดยเมืองหรือ campaign owner
- redemption history คือประวัติการใช้สิทธิ์
Rewards Mode ควรเปลี่ยนใน UI:
- hero = points / redeem / current missions
- CTA หลัก = redeem now / earn more / join campaign
- menu เด่น = wallet, rewards, missions, voucher, history
- content priority = incentive-rich cards
- recommendation = reward proximity / campaign relevance / earning opportunity
8.4 Services Mode
Services Mode คือ utility และ support mode
Services Mode ควรเน้น:
- helpdesk
- transport
- insurance
- eSIM
- booking support
- emergency info
- city services
- tourist assistance
คำอธิบาย:
- helpdesk คือจุดรวมการช่วยเหลือ
- transport คือข้อมูลและบริการด้านการเดินทาง
- insurance คือความคุ้มครองและความมั่นใจ
- eSIM คือบริการเชื่อมต่อที่มี utility สูงมาก
- booking support คือความช่วยเหลือด้านการจอง
- emergency info คือข้อมูลฉุกเฉิน
- city services คือ utility ของเมือง
- tourist assistance คือการช่วยเหลือผู้ใช้แบบภาพรวม
Services Mode ควรเปลี่ยนใน UI:
- hero = support / essentials / assistance
- CTA หลัก = helpdesk / eSIM / transport / emergency
- menu เด่น = assistance, helpdesk, connectivity, insurance, city services
- content priority = utilities, support, assistance
- recommendation = context-sensitive services
8.5 Stay Mode
Stay Mode คือ hospitality mode สำหรับเรื่องที่พัก
Stay Mode ควรเน้น:
- hotels
- accommodation
- room offers
- stay bundles
- nearby stay
- booking flow
- check-in info
- hospitality services
คำอธิบาย:
- hotels คือรายชื่อโรงแรมหรือ property หลัก
- accommodation คือหมวดที่พักที่กว้างกว่า hotel
- room offers คือข้อเสนอด้านราคาหรือโปรโมชัน
- stay bundles คือ package รวมพักกับ service อื่น
- nearby stay คือที่พักใกล้บริบทปัจจุบัน
- booking flow คือขั้นตอนจอง
- check-in info คือข้อมูลที่ช่วยให้เข้าพักได้ถูกต้อง
- hospitality services คือบริการเสริมของการเข้าพัก
Stay Mode ควรเปลี่ยนใน UI:
- hero = hotels / offers / nearby stay
- CTA หลัก = find stay / room offers / my booking
- menu เด่น = hotels, offers, booking, bundles, nearby stay
- content priority = hotel cards / offer cards / package cards
- recommendation = nearby stay + budget + area + venue distance
8.6 Shopping Mode
Shopping Mode คือ commerce mode ของระบบ
Shopping Mode ควรเน้น:
- marketplace
- local products
- OTOP
- souvenirs
- event merchandise
- add-on services
- checkout / payment
- featured stores
คำอธิบาย:
- marketplace คือพื้นที่รวมสินค้าหรือร้านค้า
- local products คือสินค้าท้องถิ่นที่มีคุณค่าเชิงพื้นที่
- OTOP คือหมวดสินค้าที่สื่อ soft power ได้ชัด
- souvenirs คือของฝากที่เชื่อมตรงกับนักท่องเที่ยว
- event merchandise คือสินค้าที่เกี่ยวข้องกับงานหรือ campaign
- add-on services คือบริการเสริมที่ซื้อเพิ่มได้
- checkout / payment คือจุดตัดสินใจทางพาณิชย์ที่ต้องลื่น
- featured stores คือร้านเด่นที่ต้องการดันเชิง conversion
Shopping Mode ควรเปลี่ยนใน UI:
- hero = featured products / stores / deals
- CTA หลัก = shop now / browse categories / view offers
- menu เด่น = categories, stores, cart, orders, featured deals
- content priority = product cards / merchant cards / promotions
- recommendation = merchant-based / category-based / reward-linked
9. Together Mode First Entry Screen Design Spec
หน้าจอแรกของระบบควรเป็นหน้าจอเลือก Together Mode
องค์ประกอบที่ควรมี:
- โลโก้ Together
- ชื่อเมืองหรือบริบท เช่น Pattaya Together
- headline:
วันนี้ต้องการใช้ Together แบบไหน
- subheadline:
เลือกโหมดที่ตรงกับสิ่งที่ต้องการ แล้วระบบจะจัดเมนู คอนเทนต์ และบริการให้เหมาะกับการใช้งานมากที่สุด
- helper text:
สามารถเปลี่ยนโหมดได้ทุกเมื่อภายหลัง
- mode grid 6 cards
- footer actions
- remember my mode toggle
ลำดับบน popup:
- Trip | MICE
- Rewards | Services
- Stay | Shopping
10. รายละเอียดของ Together Mode Cards
Trip
- tagline: เที่ยว วางแผน และค้นพบสถานที่น่าสนใจได้ง่ายขึ้น
- chips: Attractions / Day Plans / Nearby Places
- CTA: Start Exploring
- icon direction: compass / map-route
- color direction: sky / turquoise
MICE
- tagline: เข้างาน ดูกำหนดการ เชื่อมต่อผู้ร่วมงาน และใช้งานหน้างานได้สะดวก
- chips: Agenda / Check-in / Exhibitors
- CTA: Enter Event Mode
- icon direction: calendar-badge / stage
- color direction: indigo / electric blue
Rewards
- tagline: สะสมแต้ม รับสิทธิพิเศษ และเข้าถึงรางวัลที่ออกแบบมาเพื่อการเดินทาง
- chips: Points / Missions / Redeem Now
- CTA: View Rewards
- icon direction: gift / coin-star
- color direction: gold / coral / pink-gold
Services
- tagline: เข้าถึงบริการจำเป็น ความช่วยเหลือ และการสนับสนุนได้รวดเร็ว
- chips: eSIM / Helpdesk / Travel Support
- CTA: Open Services
- icon direction: concierge / headset-shield
- color direction: teal / emerald
Stay
- tagline: ค้นหาที่พัก ดูข้อเสนอ และจัดการการเข้าพักได้อย่างมั่นใจ
- chips: Hotels / Room Offers / Stay Bundles
- CTA: Find a Stay
- icon direction: hotel / bed-key
- color direction: navy / violet-night
Shopping
- tagline: เลือกดูสินค้า ข้อเสนอพิเศษ ของฝาก และร้านเด่นได้ในที่เดียว
- chips: Local Products / Featured Stores / Special Offers
- CTA: Shop Now
- icon direction: bag / storefront
- color direction: orange / magenta
11. Matrix ระดับภาพรวมของแต่ละ Mode
Mode Overview Matrix · 6 modes × 6 dimensions (User Intent · Hero · Quick Actions · Content Priority · Search Priority · Recommendation Priority)
| Mode |
User Intent หลัก |
Hero หลัก |
Quick Actions หลัก |
Content Priority |
Search Priority |
Recommendation Priority |
| Trip |
วางแผนเที่ยว/หาที่ไป |
destinations / route / nearby |
plan trip, map, nearby, itinerary |
attractions, routes, local experiences |
places, districts, attractions |
nearby + itinerary + themed routes |
| MICE |
เข้าร่วมงาน/ดูงาน/จัดงาน |
live event / agenda / check-in |
register, check-in, agenda, venue |
sessions, speakers, exhibitors, sponsors |
event, agenda, booth, speaker |
session + role + event status |
| Rewards |
รับสิทธิ์/สะสม/แลก |
points / mission / campaign |
redeem, earn, mission, voucher |
points, perks, campaigns, nearby rewards |
reward, voucher, mission |
redeemables + campaigns + location |
| Services |
ขอความช่วยเหลือ/ใช้ utility |
support / essentials / assistance |
helpdesk, eSIM, transport, emergency |
utilities, support, assistance, insurance |
help, support, transport, assistance |
context-sensitive services |
| Stay |
ค้นหาที่พัก/จัดการเข้าพัก |
hotels / offers / bundles |
find stay, offers, nearby hotels |
hotel, offers, packages, check-in info |
hotel, room, area, package |
nearby stay + budget + area |
| Shopping |
ซื้อสินค้า/ดูร้าน/ข้อเสนอ |
featured products / stores / deals |
shop now, offers, stores, cart |
products, merchants, campaigns, offers |
product, merchant, category |
offers + merchants + browsing history |
12. Matrix รายละเอียดของแต่ละ Mode
Trip Mode
- hero: featured destinations, nearby places, ready-made day plans, local experiences
- quick actions: Explore Nearby, Build My Trip, Open Map, Save Plan, Today’s Highlights, Local Experiences
- menu เด่น: Explore, Places, Routes, Map, Itinerary, Dining, Saved
- search chips: Near me, Family, Nightlife, Local food, Hidden gems, Map
- KPI: place view, map open, itinerary save, route completion, nearby CTR
MICE Mode
- hero: current event, upcoming event, registration status, check-in status, agenda highlights
- quick actions: Register Now, Check-in, View Agenda, Find Booth, Venue Map, My Meetings
- menu เด่น: Event Home, Agenda, Speakers, Exhibitors, Sponsors, Venue, Announcements, Networking
- search chips: Today’s Agenda, Speakers, Exhibitors, Booths, Hall Map, Announcements
- KPI: registration conversion, check-in completion, agenda engagement, exhibitor views, networking action rate
Rewards Mode
- hero: point balance, current missions, redeemable rewards, campaign countdown
- quick actions: Redeem Now, Earn More, My Vouchers, Missions, Reward History, Nearby Perks
- menu เด่น: Wallet, Rewards, Missions, Campaigns, Vouchers, History, Perks
- search chips: Redeem now, Expiring soon, Nearby, Free perks, Missions, City rewards
- KPI: redeem rate, mission participation, voucher usage, repeat visit frequency
Services Mode
- hero: travel essentials, help center, connectivity support, emergency support
- quick actions: Helpdesk, eSIM, Transport, Emergency, Insurance, Contact Support
- menu เด่น: Assistance, Helpdesk, Connectivity, Insurance, Transport, City Services, Emergency
- search chips: Need help, eSIM, Transport, Emergency, Insurance, Support center
- KPI: help entry rate, support flow completion, eSIM conversion, transport support usage
Stay Mode
- hero: featured hotels, nearby stays, room deals, stay bundles
- quick actions: Find Hotels, Nearby Stay, Room Offers, My Booking, Check-in Info, Stay Bundles
- menu เด่น: Hotels, Offers, Bundles, Booking, Check-in, Nearby Stay, Hospitality
- search chips: Near venue, Best offers, Family stay, Luxury, Budget, Check-in today
- KPI: stay card CTR, offer detail view, booking intent, bundle engagement
Shopping Mode
- hero: featured products, top merchants, deals of the day, local products
- quick actions: Shop Now, Browse Categories, Featured Stores, Offers, Cart, Orders
- menu เด่น: Categories, Stores, Offers, Cart, Orders, Local Products, Merchandise
- search chips: Best deals, Souvenirs, Local products, OTOP, Merch, Stores
- KPI: product CTR, merchant view, add-to-cart, checkout start, order completion
13. สิ่งที่ Mode ต้องเปลี่ยนในระดับระบบ
Together Mode ต้องเปลี่ยนอย่างน้อย 8 จุด:
- Hero Layer
- Navigation Layer
- Recommendation Layer
- Search Layer
- Notification Layer
- Quick Action Layer
- Card Ranking Layer
- Analytics Layer
รายละเอียด:
13.1 Hero Layer
hero ต้องเปลี่ยนตาม mode
เช่น:
- Trip = destinations / route / nearby
- MICE = current event / agenda / check-in
- Rewards = points / missions / redeem
- Services = help / essentials / assistance
- Stay = hotels / room offers / nearby stay
- Shopping = featured products / stores / deals
13.2 Navigation Layer
navigation หลักและเมนูย่อยต้องเปลี่ยนตาม mode
ไม่ควรใช้เมนูเดียวกันทั้งหมด
13.3 Recommendation Layer
recommendation ต้องเปลี่ยนตาม intent
เช่น:
- Trip = attraction / route / nearby
- MICE = session / exhibitor / venue / role
- Rewards = redeem / mission / campaign
- Services = relevant support / assistance
- Stay = property / bundle / area
- Shopping = merchant / category / offer
13.4 Search Layer
search suggestion, chips, ranking และ defaults ต้องเปลี่ยนตาม mode
13.5 Notification Layer
notification ต้อง contextualize ตาม mode
เช่น:
- MICE = session change
- Rewards = voucher / mission
- Stay = booking / check-in
- Services = support / emergency
13.6 Analytics Layer
analytics ต้อง track mode switching และ behavior แยกตาม mode
14. ตัวอย่างผลลัพธ์เชิง UX ที่ควรเห็นจริง
เมื่อเข้า Trip Mode
ควรเห็น:
- nearby attractions
- trip planner
- featured routes
- map-first actions
- local experience cards
เมื่อเข้า MICE Mode
ควรเห็น:
- current event
- registration/check-in
- agenda
- speaker / exhibitor / sponsor
- venue map
- announcements
เมื่อเข้า Rewards Mode
ควรเห็น:
- point balance
- mission progress
- redeem now
- active campaigns
- nearby benefits
เมื่อเข้า Shopping Mode
ควรเห็น:
- product categories
- featured merchants
- special offers
- recommended items
- cart / checkout entry
เมื่อเข้า Services Mode
ควรเห็น:
- quick help
- transport
- eSIM
- insurance
- support
- emergency information
เมื่อเข้า Stay Mode
ควรเห็น:
- nearby hotels
- room offers
- stay bundles
- reservation flow
- check-in information
15. Prompt สำหรับสั่ง Claude Code ออกแบบ Together Mode First Screen
ออกแบบหน้า popup selector สำหรับ “Together Mode” ของ super app โดยใช้ 6 modes ตามนี้:
- Trip
- MICE
- Rewards
- Services
- Stay
- Shopping
จัด layout แบบ 2 cards ต่อแถว รวม 3 แถว โดยเรียงดังนี้:
- Trip | MICE
- Rewards | Services
- Stay | Shopping
เป้าหมายของหน้าจอ:
- เป็น first screen ที่นักท่องเที่ยวเห็นแล้วเข้าใจทันทีว่าระบบช่วยอะไรได้
- ลดความรกของ content โดยให้ผู้ใช้เลือก intent ก่อน
- เมื่อเลือกแล้ว ระบบจะ filter content, main menu, hero, quick actions, recommendation, search suggestions และ notification context ตาม mode ที่เลือก
Look & Feel:
- premium
- modern
- inviting
- mobile-first
- ใช้งานง่าย
- ไม่แข็งแบบ dashboard องค์กร
- ไม่รกแบบ marketplace หนักเกินไป
องค์ประกอบของหน้า:
- logo area
- headline
- subheadline
- mode grid
- footer actions
- remember my mode toggle
Headline:
“วันนี้ต้องการใช้ Together แบบไหน”
Subheadline:
“เลือกโหมดที่ตรงกับสิ่งที่ต้องการ แล้วระบบจะจัดเมนู คอนเทนต์ และบริการให้เหมาะกับการใช้งานมากที่สุด”
Helper text:
“สามารถเปลี่ยนโหมดได้ทุกเมื่อภายหลัง”
สำหรับแต่ละ mode card ให้มี:
- icon ใหญ่
- title
- short tagline
- 3 chips
- CTA button
- selected state
- hover/tap animation แบบเบา ๆ
รายละเอียดแต่ละ mode:
Trip
- tagline: “เที่ยว วางแผน และค้นพบสถานที่น่าสนใจได้ง่ายขึ้น”
- chips: Attractions / Day Plans / Nearby Places
- CTA: Start Exploring
- icon direction: compass / map-route
- color direction: sky / turquoise
MICE
- tagline: “เข้างาน ดูกำหนดการ เชื่อมต่อผู้ร่วมงาน และใช้งานหน้างานได้สะดวก”
- chips: Agenda / Check-in / Exhibitors
- CTA: Enter Event Mode
- icon direction: calendar-badge / stage
- color direction: indigo / electric blue
Rewards
- tagline: “สะสมแต้ม รับสิทธิพิเศษ และเข้าถึงรางวัลที่ออกแบบมาเพื่อการเดินทาง”
- chips: Points / Missions / Redeem Now
- CTA: View Rewards
- icon direction: gift / coin-star
- color direction: gold / coral / pink-gold
Services
- tagline: “เข้าถึงบริการจำเป็น ความช่วยเหลือ และการสนับสนุนได้รวดเร็ว”
- chips: eSIM / Helpdesk / Travel Support
- CTA: Open Services
- icon direction: concierge / headset-shield
- color direction: teal / emerald
Stay
- tagline: “ค้นหาที่พัก ดูข้อเสนอ และจัดการการเข้าพักได้อย่างมั่นใจ”
- chips: Hotels / Room Offers / Stay Bundles
- CTA: Find a Stay
- icon direction: hotel / bed-key
- color direction: navy / violet-night
Shopping
- tagline: “เลือกดูสินค้า ข้อเสนอพิเศษ ของฝาก และร้านเด่นได้ในที่เดียว”
- chips: Local Products / Featured Stores / Special Offers
- CTA: Shop Now
- icon direction: bag / storefront
- color direction: orange / magenta
Footer actions:
- Continue with default mode
- Explore all content
- Close
Behavior requirements:
- selected state ต้องชัด
- remember my mode toggle
- สามารถเปลี่ยน mode ภายหลังได้
- ต้องมี hook สำหรับ logic ต่อไปนี้:
- hero switching
- quick action switching
- navigation filtering
- recommendation context
- search chip switching
- notification context
- เตรียม data structure หรือ config object รองรับ mode ทั้ง 6
- ทำให้พร้อมต่อยอดกับระบบจริงได้ ไม่ใช่แค่ static popup
ขอ output เป็นงานออกแบบที่ดูเหมือนใช้งานได้จริงใน Together Super App V2
16. คำตอบเชิงโครงสร้างว่า “หลังจากนี้จะช่วยออกแบบระบบใช่ไหม”
ใช่ หลังจากจัด Design Management / Prototype Readiness ให้เป็นระบบแล้ว งานถัดไปควรต่อเป็น 4 ชั้นหลัก:
16.1 DB Structure
ออกแบบโครงข้อมูลกลาง เช่น:
- mode
- screen
- block/component
- content item
- service catalog
- journey
- user / role
- tenant
- event
- merchant / hotel / operator
- reward / campaign / voucher
- tracking event
เป้าหมายคือให้ทุกหน้าจอใน V2 อ้างอิงข้อมูลจากโครงเดียวกัน ไม่ใช่ผูกตายกับหน้า
16.2 System Design
ออกแบบสถาปัตยกรรมระบบ เช่น:
- frontend structure
- CMS / content management
- API layer
- auth / role / permission
- mode filtering logic
- search / recommendation
- analytics pipeline
- integration points
16.3 Add Content
ออกแบบวิธีเติม content ให้เป็นระบบ เช่น:
- content type อะไรบ้าง
- ใครกรอก
- ใคร review
- publish ยังไง
- content ไหนเป็น static / dynamic / imported
- ผูกกับ mode ไหน
- ผูกกับ screen / block ไหน
16.4 Tracking
วาง tracking ตั้งแต่ต้น เช่น:
- mode selected
- card clicked
- search used
- reward redeemed
- check-in completed
- itinerary saved
- hotel viewed
- merchant clicked
- form submitted
เป้าหมายคือให้วัดได้ว่า:
- คนใช้ mode ไหน
- content ไหนทำงาน
- flow ไหนตัน
- อะไรควรเพิ่ม/ตัด
17. 4-Layer Blueprint สำหรับ Together Super App V2
Layer A — Design Management Foundation
ชั้นนี้ทำให้ทุกอย่างอ้างอิงได้
A1. Screen Registry
ฟิลด์หลัก:
- screen_id
- screen_name
- mode
- platform: mobile / desktop / both
- purpose
- owner
- status
- related_flows
- related_modules
- notes
A2. Block Registry
ฟิลด์หลัก:
- block_id
- screen_id
- block_name
- block_type
- display_priority
- content_type
- data_source
- states
- reusable
- owner
- readiness
A3. Journey Registry
ฟิลด์หลัก:
- journey_id
- journey_name
- entry_point
- user_type
- mode
- step_sequence
- exit_condition
- success_metric
A4. Readiness Board
สถานะ:
- Concept
- Designed
- Reviewed
- Content-ready
- Dev-ready
- In build
- Integrated
- Test-ready
- UAT
- Done
Layer B — Data & System Foundation
ชั้นนี้ทำให้สิ่งที่ออกแบบไว้เชื่อมกับระบบจริงได้
B1. Core Domain Model
- Mode
- Screen
- Block
- Content Item
- Service
- Category
- Journey
- User
- Role
- Tenant
- Event
- Venue
- Session
- Speaker
- Exhibitor
- Sponsor
- Hotel
- Merchant
- Product
- Reward
- Voucher
- Campaign
- Support Case
- Tracking Event
B2. DB Structure ระดับแม่
กลุ่ม Platform Structure:
- modes
- screens
- blocks
- journeys
- services
- service_categories
กลุ่ม Content:
- content_items
- content_localizations
- media_assets
- tags
- content_block_mapping
กลุ่ม MICE:
- events
- event_days
- sessions
- speakers
- exhibitors
- sponsors
- venues
- venue_zones
- registrations
- checkins
กลุ่ม Trip / Stay / Shopping:
- places
- routes
- itineraries
- hotels
- hotel_offers
- merchants
- products
- offers
- orders
กลุ่ม Rewards:
- wallets
- wallet_transactions
- campaigns
- missions
- vouchers
- redemptions
กลุ่ม Support / Services:
- support_cases
- service_requests
- esim_packages
- insurance_plans
- transport_nodes
กลุ่ม Identity / Governance:
- users
- roles
- permissions
- user_role_mapping
- tenants
- tenant_users
กลุ่ม Tracking:
- tracking_events
- tracking_sessions
- screen_views
- clicks
- searches
- conversions
Layer C — Content Operating Model
ชั้นนี้ทำให้ระบบไม่ตันเพราะ content
C1. Content Types
- hero_banner
- quick_action
- article
- place_card
- route_card
- event_card
- session_card
- exhibitor_card
- reward_card
- hotel_card
- product_card
- promo_banner
- support_item
C2. Content Status
- Draft
- In Review
- Approved
- Scheduled
- Published
- Archived
C3. Content Mapping
ต้องตอบได้ว่า content ไหนไปอยู่:
- mode ไหน
- screen ไหน
- block ไหน
- priority เท่าไร
- target audience ไหน
C4. Content Source
- manual
- imported
- partner-submitted
- AI-assisted
- API-fed
C5. Content Governance
- creator
- reviewer
- approver
- publisher
Layer D — Tracking & Optimization
ชั้นนี้ทำให้รู้ว่าระบบทำงานจริงไหม
D1. Event Taxonomy
- mode_selected
- screen_viewed
- block_clicked
- search_submitted
- itinerary_saved
- registration_started
- registration_completed
- checkin_completed
- reward_redeemed
- hotel_opened
- product_opened
- support_requested
D2. KPI Mapping
Trip:
- itinerary saves
- map opens
- nearby clicks
- attraction detail views
MICE:
- registrations
- check-ins
- agenda engagement
- exhibitor views
- meeting requests
Rewards:
- mission starts
- voucher redemptions
- repeat visits
- campaign CTR
Services:
- helpdesk starts
- eSIM clicks
- transport support use
- emergency access
Stay:
- hotel views
- offer clicks
- booking intent
- stay bundle opens
Shopping:
- product views
- add to cart
- checkout starts
- order completions
18. สถาปัตยกรรมระบบที่แนะนำ
Frontend Layer
- Super App UI
- Together Mode engine
- screen renderer
- block renderer
- search UI
- wallet UI
- event UI
- CMS-fed content slots
Application Layer
- Auth service
- Mode filtering service
- Content delivery service
- Search service
- Recommendation service
- Reward engine
- Event service
- Booking / commerce service
- Support service
- Analytics collector
Data Layer
- relational DB สำหรับ transactional data
- media storage
- search index
- analytics event store
- config tables
- content tables
19. ลำดับเฟสที่ควรทำ
Phase 1 — Foundation
- Screen Registry
- Block Registry
- Journey Registry
- Mode Definition
- Core DB schema
- Content type model
Phase 2 — Operational Prototype
- Together Mode selector
- mode-based home screens
- content-block mapping
- static/mock data binding
- tracking base events
Phase 3 — Integrated V2
- API integration
- role and permission
- real content workflow
- rewards / event / hotel / product connections
- support services
Phase 4 — Live Readiness
- QA/UAT checklist
- dashboard
- content ops workflow
- analytics review
- pilot launch for real users
20. สิ่งที่ควรทำเป็นเอกสารชุดถัดไป
- Prototype Design Readiness & Playbook
- DB Structure & Data Model Blueprint
- System Design & Integration Architecture
- Content Operations & Publishing Model
- Tracking Framework & KPI Matrix
21. สรุปเชิงกลยุทธ์
V1 ไม่ควรถูกรื้อทิ้ง เพราะ:
- ฐานดีมาก
- ใช้เป็น visual and interaction baseline ได้
- ใช้เป็น milestone prototype ได้
- ใช้เป็นต้นแบบอ้างอิงเพื่อเดินสู่ V2 ได้
แต่ V1 ต้องถูก “ครอบ” ด้วยระบบอ้างอิงงานและ readiness framework ทันที
ข้อเสนอหลักของเอกสารนี้คือ:
- เปลี่ยนจาก prototype-centric ไปเป็น system-centric
- เปลี่ยนจากการคุยเป็นข้อความลอย ๆ ไปเป็นระบบรหัสอ้างอิง
- เปลี่ยนจากหน้าจอสวย ไปสู่แพลตฟอร์มที่บริหาร พัฒนา เชื่อมข้อมูล และทดสอบได้จริง
ดังนั้น เอกสารฉบับนี้ควรถูกใช้เป็นฐานสำหรับ:
- Design Management
- Build Readiness
- Integration Readiness
- Test Readiness
- Go-live Preparation
ท้ายที่สุด หากทำตามเอกสารนี้อย่างครบถ้วน Together Super App V2 จะไม่เป็นเพียง demo ที่ดูดี แต่จะมีโครงที่พร้อมต่อยอดเป็นระบบใช้งานจริงได้ในระดับที่ทีมงานหลายฝ่ายสามารถทำงานร่วมกันบน source of truth ชุดเดียวกันได้
Claude-added · Glossary (optional)
คำศัพท์ที่ปรากฏบ่อยในเอกสารนี้ · สรุปให้ผู้อ่านไม่ใช่ technical stakeholder · ไม่ใช่ ข้อความต้นฉบับของ ChatGPT.
Screen Registry
ทะเบียนกลางของทุกหน้าจอในระบบ · เก็บ screen_id · screen_name · mode · platform · purpose · owner · status · related_modules · related_APIs · related_content_blocks · notes — §4.1, §5.1, §17-A1.
Block Registry
ทะเบียน component/กล่องย่อยในทุกหน้าจอ · เก็บ block_id · screen_id · block_name · block_type · display_priority · content_type · data_source · states · reusable · owner · readiness — §4.2, §5.2, §17-A2.
Journey Registry
ทะเบียน user flow · เก็บ journey_id · journey_name · entry_point · user_type · mode · step_sequence · exit_condition · success_metric — §4.3, §5.3, §17-A3.
Data / Integration Registry
ทะเบียน data source ที่แต่ละ screen/block เรียกใช้ · เก็บ data_id · source · owner · mock/static/live · api_dependency · update_frequency · related_screens · related_blocks — §4.4.
Readiness Board
กระดาน status รายงานความพร้อมข้ามทีม · 10 สถานะ (Concept → Designed → Reviewed → Content-ready → Dev-ready → In build → Integrated → Test-ready → UAT → Done) — §4.5, §17-A4.
Content Mapping
การผูก content เข้ากับ mode/screen/block พร้อม priority + target audience · ตอบได้ว่า content ชิ้นหนึ่งไปอยู่ที่ไหน · §17-C3.
Event Taxonomy
ชุด event ที่ระบบ track · เช่น mode_selected · screen_viewed · block_clicked · search_submitted · itinerary_saved · registration_completed · reward_redeemed · เป็น source of truth ของ tracking — §17-D1.
KPI Mapping
การ map KPI ต่อ mode — Trip (itinerary saves, map opens, …), MICE (registrations, check-ins, …), Rewards (mission starts, voucher redemptions, …), Services (helpdesk starts, eSIM clicks, …), Stay (hotel views, booking intent, …), Shopping (product views, add to cart, …) — §17-D2.
4-Layer Blueprint
ชั้นงานหลัก 4 ชั้นของ Super App V2 · Layer A Design Management · Layer B Data & System · Layer C Content Operating · Layer D Tracking & Optimization — §17.
6-Mode Set (confirmed)
ชุด mode ที่ยืนยันใช้สำหรับ V2 ตาม §6 · Trip · MICE · Rewards · Shopping · Services · Stay · popup layout 2×3: Trip|MICE / Rewards|Services / Stay|Shopping.
8 Layers ที่ Mode ต้องเปลี่ยน
Hero · Navigation · Recommendation · Search · Notification · Quick Action · Card Ranking · Analytics — §13 (เพิ่มจาก 6 layers ของ Doc #5 ด้วย Quick Action + Card Ranking).
4-Phase Rollout
Phase 1 Foundation (Registries + Mode Definition + Core DB + Content type) · Phase 2 Operational Prototype (Mode selector + mode-based home + mock binding + base tracking) · Phase 3 Integrated V2 (API + RBAC + content workflow + commerce connections + support) · Phase 4 Live Readiness (QA/UAT + dashboard + content ops + analytics review + pilot) — §19.