Pain Point ที่เจอจริง
วางแผนทริปกลุ่มไปไต้หวัน 6 วัน — ข้อมูลกระจัดกระจาย เข้าถึงยากตอนอยู่ต่างประเทศ
วางแผนทริปกลุ่มคือความวุ่นวาย
- ข้อมูลกระจาย — สถานที่เที่ยว อยู่ใน Google Docs, ตั๋วเครื่องบินอยู่ใน email, ที่พักอยู่ใน Booking app, งบอยู่ใน Notes
- เปิดดูบนมือถือยาก — Google Docs ไม่ได้ออกแบบสำหรับ mobile, ต้อง zoom เข้า-ออก scroll หลายหน้า
- ภาษาไทยไม่พอ — ตอนผ่านด่าน immigration ต้องกรอกข้อมูลเป็นภาษาอังกฤษ (ชื่อโรงแรม ที่อยู่) หาไม่ทัน
- คุมงบไม่ได้ — ไม่มีที่จดรายจ่ายรวม ไม่รู้ว่าใช้ไปเท่าไหร่แล้วเทียบกับแผน
- เอกสารหายาก — ตั๋ว voucher ประกัน กระจายอยู่หลาย app ตอนต้องการเปิดไม่ทัน
Design Thinking Process
จาก pain point สู่ solution ที่ใช้งานจริงในทริป
1. Empathize
สังเกตตัวเองและเพื่อนร่วมทริป: ทุกครั้งที่วางแผนทริป ข้อมูลจะกระจายอยู่ใน LINE group, Google Docs, email, หลาย app — ตอนถึงสนามบินหรือด่าน immigration ต้องรีบเปิดหาข้อมูล กด scroll หาไม่ทัน โดยเฉพาะบนมือถือจอเล็ก เน็ตต่างประเทศก็ช้า
2. Define
Problem Statement: "นักเดินทางต้องการ (1) เข้าถึงแผนเที่ยวทั้งหมดจากที่เดียวบนมือถือ (2) สลับภาษาไทย-อังกฤษได้ทันทีสำหรับ immigration (3) ติดตามค่าใช้จ่ายเทียบกับงบ (4) เข้าถึงเอกสารสำคัญได้เร็ว — ทั้งหมดนี้ไม่ต้องลงแอป แค่เปิดลิงก์"
3. Ideate
Key Insight: "ไม่จำเป็นต้องสร้าง native app — แค่ HTML ธรรมดาก็พอ เปิดได้ทุกเครื่อง ไม่ต้องลงแอป แชร์ URL ให้เพื่อนร่วมทริปได้ทันที" ไอเดีย: สร้าง mobile-first web guidebook เป็น single-page HTML → ใช้ bottom nav สลับ Day 1-6 ได้เร็ว → เพิ่ม Budget Tracker แยกหน้า → เพิ่มหน้าเอกสารรวม → ทำ bilingual toggle (TH/EN)
4. Prototype & Test
เริ่มจาก V1.0 แผนเที่ยว 5 วันแบบง่าย → ทดสอบเปิดบนมือถือ → พบว่า scroll ยาวมาก → เพิ่ม bottom nav + collapsible sections → ทุก version ทดสอบบนมือถือจริง → iterate ต่อเนื่อง 8 versions ในเวลา 2 สัปดาห์
5. Iterate
ทุก version เกิดจาก feedback จริง: "หาสถานที่ไม่เจอ" → เพิ่ม nav, "กรอก immigration ไม่ทัน" → เพิ่ม bilingual toggle, "ไม่รู้ใช้เงินไปเท่าไหร่" → เพิ่ม Budget Tracker, "หาเอกสารไม่เจอ" → เพิ่มหน้า Docs
User Journey — เปิดลิงก์เดียว ได้ทุกอย่าง
จากมุมมองผู้ใช้ ตั้งแต่เตรียมตัวก่อนเดินทาง จนถึงระหว่างทริป
1
ได้รับ URL จากเพื่อนร่วมทริป → เปิดบนมือถือทันที Guidebook
2
เลื่อน Bottom Nav เลือก Day 1-6 → ดูแผนแต่ละวัน สถานที่ เวลา ค่าใช้จ่าย
3
ถึง สนามบิน → กด toggle เปลี่ยนภาษาเป็น EN → เห็นชื่อโรงแรม ที่อยู่ เป็นภาษาอังกฤษทันที
4
ระหว่างทริป → กด Budget → จดค่าใช้จ่ายแต่ละวัน เห็นยอดรวม Budget
5
ต้องการเอกสาร → กด เอกสาร → เปิดตั๋ว ประกัน booking จาก Drive Docs
6
เพื่อนจดรายจ่ายที่เครื่องอื่น → Firebase Sync → ข้อมูล sync ข้ามเครื่องอัตโนมัติ
Solution — 4 หน้า ครบทุกอย่าง
ออกแบบเป็น 4 หน้า HTML แยกตามหน้าที่ เชื่อมกันด้วย navigation
📋 Guidebook — แผนเที่ยว 6 วัน
index.html — single-page itinerary
- 6-day itinerary — PRE-GO → Taipei (Day 1-3) → Kaohsiung (Day 4-6) → POST + Bonus
- Bottom nav + Hamburger menu — มือถือเลื่อนสลับ Day 1-6, Desktop ใช้ drawer menu
- Bilingual toggle (TH/EN) — สลับภาษาได้ทันทีสำหรับ immigration
- Collapsible sections — กดพับ/ขยาย ลด scroll
- Trip dates banner — วันลา สรุปสำหรับแชร์ทีม
💰 Budget Tracker — คุมงบแบบ Realtime
budget.html — shared expense tracker
- CRUD expenses — เพิ่ม/แก้ไข/ลบรายจ่ายแต่ละรายการ
- Overview table — แบ่ง Fixed/Variable costs เห็นภาพรวมงบ
- Category chips — กรองตามหมวด (อาหาร, ที่พัก, ตั๋ว, ช้อปปิ้ง)
- Firebase Realtime Sync — จดรายจ่ายจากเครื่องไหนก็ sync ข้ามเครื่องทันที
- localStorage fallback — ไม่มีเน็ตก็ใช้ได้ offline
📁 Documents Hub — เอกสารรวม
docs.html — quick access to trip documents
- Featured Drive card — กดเปิด Google Drive folder ทั้งหมดได้ทันที
- Category cards — ตั๋วเครื่องบิน, ประกัน, ที่พัก, HSR/Klook แยกหมวด
- Status badges — เห็นสถานะเอกสาร (รอเอกสาร / พร้อม)
- External links — ทุกลิงก์เปิดใน tab ใหม่
🚇 Transit Map — แผนที่เส้นทาง รฟฟ.
transit-map.html — zoomable MRT maps + daily routes
- Taipei + Kaohsiung MRT maps — รูปแผนที่จริง zoom in/out ได้ ลากดูได้
- เส้นทางรายวัน — PRE-GO → Day 1-6 → POST แสดง flow การเดินทางแต่ละวัน
- Route badges — สี MRT สายแดง/น้ำเงิน/เขียว/ส้ม + Bus/Walk/HSR/Ferry/LRT
- EasyCard refund info — วิธีคืนเงิน/ใช้ให้หมดก่อนกลับ
- Luggage logistics — ขั้นตอนฝาก/รับกระเป๋าทั้ง Day 1 (ไทเป) และ Day 6 (เกาสง)
UI Preview
ตัวอย่างหน้าจอหลักทั้ง 4 หน้าบนมือถือ
Guidebook
🇹🇼
คู่มือเที่ยวไต้หวัน
DAY 1
DAY 2
DAY 3
DAY 4
PRE-GO → Day 1 Taipei
คอนโด → DMK → TPE 07:55 → ฝากกระเป๋า → วัดหลงซาน
23:30 - 19:00
Jiufen Old Street
เดินเที่ยวถนนเก่า ชิมอาหาร ดูวิว
14:00 - 17:00
DAY 1
DAY 2
Transit
Docs
Budget
Budget Tracker
💰 Budget Tracker
แผน
฿45,100
ใช้จริง
฿12,450
ทั้งหมด
อาหาร
ที่พัก
ตั๋ว
MRT Day Pass
ตั๋ว MRT รายวัน Taipei
฿540
Din Tai Fung
ข้าวมันไก่ + ซาลาเปา
฿380
DAY 1
DAY 2
Docs
Budget
Documents Hub
📁 เอกสารสำคัญ
📂
Google Drive ทั้งหมด
เปิด folder รวมเอกสาร
✈️
ตั๋วเครื่องบิน
รอเอกสาร
🛡️
ประกันเดินทาง
รอเอกสาร
🏨
Booking ที่พัก
รอเอกสาร
🚄
ตั๋ว HSR / Klook
รอเอกสาร
DAY 1
DAY 2
Docs
Budget
Technical Architecture
โครงสร้างเทคนิค — เรียบง่ายแต่ครบ
System Overview
HTML / CSS / JS
→
GitHub Pages
→
Firebase Realtime DB
→
Google Drive
🏗️ Stack & Design Decisions
- Pure HTML — ไม่ใช้ framework — เปิดไว load เร็ว ไม่มี build step ไม่ต้องติดตั้ง
- GitHub Pages hosting — deploy ฟรี push แล้ว live ทันที
- Firebase Realtime Database — sync ข้อมูล budget ข้ามเครื่อง real-time
- localStorage fallback — ถ้าไม่มีเน็ตก็ใช้ offline ได้
- CSS-only bilingual toggle — ใช้ class .lang-th/.lang-en ซ่อน/แสดง span ไม่ต้อง re-render
- Responsive bottom nav — scroll ได้แนวนอน รองรับ Day 1-6 + Docs + Budget
Iterate — 9 Versions ใน 3 สัปดาห์
ทุก version เกิดจาก feedback จริงระหว่างเตรียมทริป
V1.9
Transit Map + Flight details — หน้าแผนที่ MRT (zoomable) + เส้นทางรายวัน, เพิ่ม PRE-GO/POST ตารางคอนโด↔DMK, ข้อมูลเที่ยวบิน SL398/SL393, ฝากกระเป๋า, EasyCard คืนเงิน, hamburger menu desktop, อัปเดต Drive links
V1.8
Docs page — หน้าเอกสารรวม card-based, Google Drive integration, nav ครบทุกหน้า
V1.7
Firebase Realtime Sync — cross-device data sharing, sync badge UI, localStorage fallback
V1.6
Budget overview table — Fixed/Variable breakdown, category chips, auto-fill จากฟอร์ม
V1.5
Bilingual toggle (TH/EN) — 300+ bilingual spans, localStorage persist — สำหรับ immigration
V1.4
Horizontal scroll nav + สร้าง budget.html แยกหน้า — เพิ่ม Budget Tracker
V1.3
ปรับ Day 3 — merge Sandiaoling เช้า + Wulai บ่ายรวมวันเดียว
V1.2
เพิ่ม trip dates + leave summary — สำหรับแชร์ให้ทีมรู้วันลา
V1.1
ขยายเป็น 6 วัน — เพิ่ม Yangmingshan (Day 2) & Wulai (Day 3) ย้าย Sandiaoling ไป Bonus
V1.0
เริ่มจาก แผนเที่ยว 5 วัน แบบ single-page ธรรมดา — Taipei → Sandiaoling → Kaohsiung
Creative Problem Solving
ปัญหาที่เจอระหว่างทำ และวิธีแก้ที่คิดขึ้นมา
🎯 Design Decisions ที่น่าสนใจ
CSS-only Language Toggle (ไม่ต้อง re-render)
แทนที่จะสร้าง 2 หน้าแยก (TH/EN) ก็ใช้ CSS class toggle — ฝัง <span class="th"> และ <span class="en"> คู่กันทุกจุด แล้วใช้ .lang-th .en { display: none } สลับ — กดเปลี่ยนภาษาได้ทันทีไม่ต้อง reload หน้า
Bottom Nav แบบ Horizontal Scroll
Day 1-6 + Bonus + Docs + Budget = 9 items บนจอมือถือแสดงไม่หมด — ใช้ overflow-x: auto ให้ scroll แนวนอนได้ ซ่อน scrollbar + IntersectionObserver highlight active section อัตโนมัติ
Firebase + localStorage Dual Strategy
Budget Tracker ต้องทำงาน offline ด้วย (เน็ตต่างประเทศอาจช้า) — ใช้ Firebase เป็น primary, localStorage เป็น fallback ถ้า Firebase ไม่ตอบ auto-switch ไปใช้ local พร้อมแสดง sync badge ให้รู้สถานะ
Live Event Indicator — "You Are Here"
ระหว่างทริป (1-6 พ.ค.) ระบบเช็ควันที่+เวลาปัจจุบัน → auto-navigate ไป Day ที่ตรง + highlight กิจกรรมที่ควรทำตอนนี้พร้อม badge "NOW" กิจกรรมที่ผ่านแล้วแสดงสีจาง — เปิดหน้ามาเห็นทันทีว่าตอนนี้ควรอยู่ที่ไหน ไม่ต้อง scroll หาเอง
💡 Key Insights ระหว่างทำ
- Mobile-First ไม่ใช่แค่ responsive: ต้องคิดตั้งแต่ต้นว่าจะใช้บนมือถือ — thumb zone, touch targets, font size ที่อ่านได้กลางแดด
- Single-page ≠ ดีเสมอ: guidebook เหมาะกับ single-page (scroll) แต่ budget tracker ต้องแยกหน้า เพราะมี state ที่ซับซ้อนกว่า
- ภาษาเดียวไม่พอ: ตอนผ่าน immigration ต้องกรอกข้อมูลเป็น EN ทันที — bilingual toggle ช่วยลด friction ได้มาก
- No-framework = เร็วกว่า: Pure HTML load เร็วมากบนเน็ต 3G ต่างประเทศ ไม่มี JS bundle ที่ต้องรอ download
Results
ผลลัพธ์จากการ iterate 9 versions
9
Versions (3 สัปดาห์)
4
Pages (Guide + Budget + Docs + Transit)
6
Days Itinerary
2
Languages (TH / EN)
Learnings
สิ่งที่ได้เรียนรู้จากโปรเจกต์นี้
Iterate เร็ว ดีกว่า perfect ตั้งแต่แรก — เริ่มจาก V1.0 ง่ายๆ แล้ว iterate ตาม feedback จริง ดีกว่าวางแผนใหญ่ตั้งแต่ต้น ทุก version เพิ่ม 1 feature สำคัญ ไม่ทำทุกอย่างพร้อมกัน
Context กำหนด Design — เว็บนี้ใช้ตอนเดินทาง: จอเล็ก กลางแดด เน็ตช้า → ต้องโหลดเร็ว ตัวหนังสือใหญ่ กดง่าย contrast สูง ทุก decision เกิดจาก context ของผู้ใช้
Simple tech = Reliable tech — Pure HTML + CSS + JS ไม่ต้อง build ไม่ต้อง deploy pipeline ไม่ต้อง package manager Push แล้ว live ทันที มี error ก็แก้ได้เร็ว เหมาะกับ side project ที่ต้องการความเร็วและความเรียบง่าย
UX Copy สำคัญกว่าที่คิด — Button ที่เขียนว่า "เงิน" บน nav ดีกว่า "Budget Tracker" เพราะพื้นที่จำกัดบนมือถือ ทุก label ต้อง scan ได้ภายใน 1 วินาที
Design for sharing — URL เดียว แชร์ทาง LINE ให้เพื่อนร่วมทริปเปิดได้ทันที ไม่ต้องลงแอป ไม่ต้อง login — ลด barrier ให้ต่ำที่สุด คือสิ่งที่ทำให้คนใช้งานจริง
Live Preview
ตัวอย่างหน้าจอจริงของ Guidebook
🇹🇼
คู่มือเที่ยวไต้หวัน
Taiwan Travel Guidebook V1.8
Day 1 — Taipei เมืองหลวงแห่งความอร่อย
✈️ สนามบิน Taoyuan → Taipei Main Station
Airport MRT → Taipei Main Station (35 นาที, ฿160)
🏯 Jiufen Old Street + Shifen
เดินเที่ยวถนนเก่า ชิมชาบัวลอย ปล่อยโคมลอย
🌃 Ximending Night Market
ช้อปปิ้ง + street food ย่านวัยรุ่น Taipei
DAY 1
DAY 2
DAY 3
DAY 4
DAY 5
DAY 6
Docs
Budget
