ARTWELL Digital Experience

Project overview

From Exhibition Website
to a Connected Service

งานเริ่มจากเว็บไซต์ประชาสัมพันธ์นิทรรศการ ก่อนขยายเป็นบริการที่เชื่อมการค้นพบงาน การลงทะเบียน การจองและชำระเงิน QR การเช็กอิน งานหลังบ้าน และการขายหน้างาน ปัจจุบันระบบหลักเปิดใช้งานที่ artwellexhibition.com และกำลังยกระดับ Back Office รุ่นใหม่บนสภาพแวดล้อม Local ที่แยกจาก Production

ARTWELL Edition 01:
anapanasati

นิทรรศการ immersive art & design ที่ River City Bangkok ระหว่าง 10 สิงหาคม–28 กันยายน 2026 ถ่ายทอดแนวคิด “Return to Self” ผ่านเส้นทางประสบการณ์ 8 โซนและกิจกรรมด้าน sound, meditation, aroma และ workshop

My ownership: รับผิดชอบทิศทางผลิตภัณฑ์ โครงสร้าง UX/UI การออกแบบและพัฒนา frontend ตลอดจน interaction, responsive และ visual QA โดยแสดง backend เป็นบริบทของ workflow และ integration boundary
Design objective: ทำให้ข้อมูลและขั้นตอนต่าง ๆ เข้าใจง่าย โดยยังคงบรรยากาศสงบของ ARTWELL
Business context: ระบบต้องรองรับผู้เข้าชม กิจกรรม สินค้า Media ทีมงานหน้างาน และการขาย โดยยังนำกลับมาใช้กับ edition ถัดไปได้
Key constraint: รักษาระบบ PHP/MySQL ที่ใช้งานจริง ขณะพัฒนา Back Office V2 แบบแยก Local ด้วย Laravel, React และข้อมูลสังเคราะห์ โดยไม่กระทบ Production

LIVE

website, registration, booking, check-in และ Mind Reflection บน production ecosystem

M3

Back Office V2 ผ่าน Local milestone สำหรับ Registration, Check-in และ Booking workflows

13/13

Activity + Product concurrency scenarios ผ่านบนฐานข้อมูลทดสอบแบบแยก

28

Mind Reflection result cards ครบทุก mapping พร้อมดาวน์โหลดและแชร์บนมือถือ

Product surface	Current status	What I verified
Exhibition, General & Media registration	Live	Public registration, email, QR pass and staff check-in are documented as in use
Activity booking, capacity & payment review	Live	Booking, capacity, protected slip, receipt, admin review and reporting are implemented
Product booking & lucky-number inventory	Live	Product reservation, lucky-number allocation and admin workflow are implemented
Mind Reflection	Live	10 questions, 7 mind states and all 28 mapped result cards are validated
SIP POS	Implemented · Local	On-site drinks, tote bags, cash/PromptPay and iPad-oriented checkout are implemented and locally verified; no current live frontend claim
Back Office V2	Local acceptance	M3 closed for secure identity, registration/check-in and Activity/Product booking; no Production cutover
V2 Dashboard, reports, exports & analytics	Planning	Phase 5 G7 contract is open; implementation and Production rollout are not yet claimed

Contribution & role framing

What I Owned
Across the Web Experience

เคสนี้แยกความรับผิดชอบเป็นสามมิติ เพื่อให้เห็นตั้งแต่การกำหนดประสบการณ์ ไปจนถึง interface ที่ใช้งานได้จริง โดยยึดสิ่งที่ตรวจสอบได้จาก source และ QA evidence ในโปรเจกต์

01 / Web delivery

เชื่อมเนื้อหาและงานของผู้ใช้เป็นเว็บเดียวกัน

กำหนดโครงสร้างหน้าและเส้นทางระหว่าง Exhibition story, registration, activity/product booking, ticket, Mind Reflection และเครื่องมือหน้างาน เพื่อให้แต่ละ touchpoint ส่งผู้ใช้ไปยังงานถัดไปได้ชัดเจน

Deliverables: Role-based IA, route inventory, booking/check-in flow, content hierarchy และ production-state boundary
Interaction & state: Discovery → booking → pending review → approved ticket → single-use check-in รวม empty, error และ full-session states
Repository evidence: WEBSITE/source/public/index.html · calendar.html · product_booking.php · ticket.php · mind-reflection.html

02 / Frontend design

ออกแบบ interface ให้สงบ แต่ตัดสินใจได้เร็ว

แปลงภาษาภาพของ ARTWELL เป็น responsive UI สองระดับความหนาแน่น: editorial public experience สำหรับผู้ชม และ operational surfaces สำหรับ Admin, Scanner และ Cashier

Deliverables: Visual hierarchy, responsive layouts, reusable components, form structure, status language และ admin comparison patterns
Responsive & accessibility: Desktop/mobile transformations, touch target 44px, visible keyboard focus, semantic status text, dialog labels และ reduced-motion behavior
Repository evidence: WEBSITE/source/public/index.html · calendar.html · ARTWELL-POS/source/responsive.css · portfolio QA captures

03 / Frontend implementation

ลงมือสร้าง interaction และ state ที่ตรวจสอบได้

พัฒนาและปรับ frontend บน HTML/CSS/JavaScript และ PHP-rendered surfaces ของระบบที่ใช้งานจริง พร้อมต่อยอด React/TypeScript/Inertia components สำหรับ Back Office V2 ใน Local-isolated environment

Deliverables: Responsive pages, form/dialog behavior, capacity feedback, payment-review UI, protected error states, scanner interface และ iPad-oriented POS
Technical focus: HTML · CSS · JavaScript · React 19 · TypeScript · Inertia · Tailwind · Vite พร้อม contract, visual และ responsive checks
Repository evidence: WEBSITE-V2/resources/js/components/phase-* · WEBSITE-V2/resources/js/lib/* · ARTWELL-POS/source/index.html · app.js

Delivery boundary Production: public website, registration/booking surfaces, Mind Reflection และ operational interfaces ที่ตรวจสอบได้จาก public routes และ source ในโปรเจกต์ Local / implemented: SIP POS และ Back Office V2 ถึง M3 — แสดงเฉพาะ implementation, interaction และ local acceptance โดยไม่อ้าง current Production frontend, V2 cutover หรือ Phase 5 analytics

Stakeholder needs

Designing
for Different Needs

ผมดูแลทิศทางผลิตภัณฑ์และ frontend delivery หลัก พร้อมทำงานร่วมกับ Creative Stakeholders เพื่อถ่ายทอดแนวคิด ผลงาน และบทบาทของศิลปินแต่ละคนออกมาบนเว็บไซต์อย่างถูกต้อง

01 / BRAND

Brand & Creative Leadership

ต้องการให้เว็บไซต์รู้สึกสงบ ร่วมสมัย และเป็น ARTWELL ตั้งแต่หน้าแรก

Design response: ภาพขาวดำ เลย์เอาต์แบบ editorial และจังหวะการเล่าเรื่องที่ไม่เร่งรีบ
Value: ภาพรวมยังเป็นแบรนด์เดียวกัน ขณะที่ข้อมูลสำคัญหาได้ง่าย

02 / AUDIENCE

Visitors & Participants

ต้องการรู้ว่างานคืออะไร จัดที่ไหน และต้องทำอะไรต่อเมื่อต้องการเข้าร่วม

Design response: ทยอยเปิดข้อมูล แบบฟอร์มทีละขั้น และข้อความสถานะที่อ่านแล้วเข้าใจทันที
Value: ผู้ชมรู้ขั้นตอนต่อไปและไม่ต้องเดาว่าลงทะเบียนสำเร็จหรือยัง

03 / OPERATIONS

Admin & On-Site Staff

ต้องตรวจรายการจำนวนมาก อนุมัติให้ถูกต้อง และรับผู้ชมเมื่อมีคิวหน้างาน

Design response: ตารางที่เปรียบเทียบข้ามแถวได้ สถานะที่เห็นชัด และหน้าสแกนที่มี contrast สูง
Value: ลดเวลาหาข้อมูลและช่วยให้เจ้าหน้าที่ตัดสินใจได้ตรงกัน

04 / GROWTH

Partners & Future Editions

ต้องการรองรับ Media, Collaborators และงานครั้งต่อไปโดยไม่เริ่มระบบใหม่ทั้งหมด

Design response: แยกฟอร์มตามกลุ่มผู้ใช้ และทำส่วนประกอบที่นำกลับมาใช้ได้
Value: ข้อมูลและหน้าจอเดิมสามารถปรับใช้กับ edition ถัดไปได้

Three principles I usedBrand: เปิดหน้าไหนก็ยังรู้สึกว่าเป็น ARTWELLClarity: ทุกปุ่มต้องบอกได้ว่าจะเกิดอะไรต่อOperations: ทุกสถานะต้องมีทางให้ทีมงานจัดการต่อ

Project supporters

Sponsors &
Media Partners

ARTWELL ได้รับการสนับสนุนจากแบรนด์และองค์กรหลายกลุ่ม ตั้งแต่ผู้ร่วมสร้างประสบการณ์ ผู้สนับสนุนหลัก เครือข่ายสนับสนุน ไปจนถึงพันธมิตรสื่อ

The challenge

How can “calm and immersive” coexist with a system that must be “fast and precise”?

01

A Wealth of Content Without Losing the Visitor

เนื้อหามีทั้งแนวคิดนิทรรศการ ศิลปิน ผลิตภัณฑ์ ตารางกิจกรรม และ FAQ ผมจึงเรียงตามคำถามที่ผู้ชมมักอยากรู้ แทนการให้ทุกส่วนเด่นเท่ากัน

02

Multiple Booking States and Payment Paths

ผู้ชมไม่ควรต้องเข้าใจศัพท์หลังบ้าน ผมจึงเขียนสถานะเรื่องที่นั่ง ส่วนลด การชำระเงิน และการตรวจสลิปให้บอกตรง ๆ ว่าตอนนี้เกิดอะไรขึ้นและต้องรออะไร

03

On-Site Experiences Must Perform Under Pressure

หน้า Scanner ถูกตัดสิ่งที่ไม่จำเป็นออก เหลือผลสแกนและปุ่มหลักที่เห็นได้ชัด เพื่อให้เจ้าหน้าที่ใช้ได้แม้มีคิวหรือแสงหน้างานไม่แน่นอน

04

One Brand, Different Interaction Contexts

หน้าสาธารณะใช้พื้นที่และภาพมากกว่า ส่วนหลังบ้านเน้นข้อมูล แต่ทั้งสองฝั่งยังใช้ตัวอักษร สี และรูปแบบสถานะชุดเดียวกัน

My End-to-End Process

ผมรับผิดชอบงานทั้งสี่ช่วงด้วยตัวเอง และกำหนดจุดตรวจทิศทางก่อนขยับไปขั้นถัดไป เพื่อไม่ให้ปัญหาถูกส่งต่อไปจนถึงตอนพัฒนา

01 / FRAME

Align the Problem

รวบรวมเป้าหมายของแบรนด์ ข้อจำกัดทางธุรกิจ งานของทีมหน้างาน และระบบเดิม

02 / STRUCTURE

Map the Service

วางกลุ่มผู้ใช้ โครงสร้างหน้า ขั้นตอนหลัก และข้อมูลที่ส่งต่อระหว่างระบบ

03 / DESIGN

Prototype the Flow

ออกแบบหน้าจอจากสถานการณ์ใช้งานจริง ทั้งหน้าผู้ชม หลังบ้าน และจุดเช็กอิน

04 / VALIDATE

Review on Real Screens

เปิดดูบนหลายขนาดหน้าจอ ตรวจข้อความ สถานะ และจุดที่ข้อมูลอาจล้น แล้วแก้จากสิ่งที่พบ

Users & jobs to be done

Four User Groups
Four Different Goals

ผมไม่ได้ใช้หน้าจอชุดเดียวกับทุกคน เพราะผู้เข้าชม ผู้ร่วมกิจกรรม เจ้าหน้าที่ และสื่อ เข้ามาเพื่อทำคนละเรื่องกัน การแยกเป้าหมายของแต่ละกลุ่มช่วยให้แต่ละหน้ามีข้อมูลเท่าที่จำเป็น

V

Exhibition Visitor

อยากเข้าใจว่างานนี้เหมาะกับตนเองหรือไม่ และวางแผนมาเยือนได้อย่างมั่นใจ

ค้นหาแนวคิด วัน เวลา สถานที่
ลงทะเบียนและรับ QR
รู้ว่าจะต้องเตรียมอะไร

A

Activity Participant

อยากเลือกรอบที่ยังว่าง ชำระเงินถูกยอด และรู้สถานะการยืนยันอย่างชัดเจน

เปรียบเทียบกิจกรรม/เวลา
ใช้ส่วนลดหรือ PromptPay
รับ ticket หลังอนุมัติ

S

Staff & Admin

อยากตรวจรายการ ตัดสินใจเร็ว และเช็กอินได้โดยลดความผิดพลาดหน้างาน

ตรวจสลิปและอนุมัติ
จัดการ discount codes
สแกนและติดตามสถานะ

M

Media Partner

อยากสมัคร preview day ด้วยข้อมูลวิชาชีพ และรับ media pass ที่พร้อมใช้

ส่ง profile/portfolio
เลือกช่วงเวลาและกิจกรรม
รับ QR pass เฉพาะบุคคล

Service map

How the Service Connects

ผมทำแผนภาพนี้เพื่อมองทั้งระบบในหน้าเดียว ตั้งแต่สิ่งที่ผู้ชมเห็น งานอนุมัติของเจ้าหน้าที่ การเช็กอิน ไปจนถึงการขายหน้างานและชั้นระบบที่ต้องรักษาสิทธิ์ ข้อมูล และสถานะให้ตรงกัน

Visitor journey

DiscoverBrand story · Highlights

PlanCalendar · Capacity

BookDetails · Payment

ReceiveEmail · QR ticket

ArriveScan · Check-in

ReflectMind Reflection

Staff operations

AuthenticateSecure staff session

ReviewBooking · Slip

DecideApprove · Reject

NotifyCustomer email

OperateScanner · Live status

ExportCSV · Reconcile

Media pathway

ApplyProfile · Channels

ConfirmPreview invitation

Receive passPersonal media QR

Check inMedia attendance

On-site commerce

SelectDrinks · Tote bags

AdjustDiscount · Quantity

PayCash · PromptPay

ConfirmOrder · Receipt

MonitorDashboard · Stock

Platform layer

ExperienceHTML · PHP · Media

Back Office V2Laravel · React · Inertia

DataMySQL · SQLite · Capacity

CommunicationSMTP · Ticket links

SecurityRBAC · Audit · Tokens

Information architecture

Separating Content
from User Tasks

ผมแยก Public Experience, Booking, Back Office และ POS ตามงานและสิทธิ์ของผู้ใช้ ผู้ใช้จึงเห็นเฉพาะข้อมูลที่จำเป็น ขณะที่ QR สลิป การอนุมัติ และข้อมูลหลังบ้านยังอยู่ภายใต้เส้นทางที่ป้องกันไว้

Role-based sitemap

Public experience
- Home / Exhibition story
- Designers & product
- Location & FAQ
- General registration
Activity & product booking
- Calendar & capacity
- Activity booking & payment
- Product & lucky-number booking
Personal touchpoint
- QR ticket
- Mind Reflection
Staff workspace
- Registration & Media admin
- Activity / Product review
- Discount codes
- Check-in scanner
Media pathway
- Media application
- Media pass
- Media admin
On-site commerce
- SIP POS
- Product & stock
- Payment & sales dashboard

Screen inventory

Surface	Primary job	Current status
Main experience	เข้าใจนิทรรศการและลงทะเบียนเข้าชม	Live
Activity calendar	ค้นหา session ตามวันและประเภท	Live
Activity booking	เลือกรอบ กรอกข้อมูล ใช้โค้ดหรือแนบสลิป	Live
Product booking	เลือกสินค้า เลขมงคล และส่งหลักฐานชำระเงิน	Live
QR ticket	แสดงสิทธิ์เข้างานแบบ secret link	Protected flow
Check-in scanner	ตรวจ ticket และป้องกันใช้ซ้ำ	Live · Login required
Admin workspace	ตรวจ registration และดูแล operations	Live · Login required
Mind Reflection	ตอบคำถามและรับ personal reflection card	Live
Media workflow	สมัคร preview ออก Media Pass และเช็กอิน	Live
SIP POS	ขายเครื่องดื่ม สินค้า ส่วนลด และรับชำระเงิน	Implemented · Local
Back Office V2	ยกระดับสิทธิ์ Audit และ transactional workflows	Local M3 closed

User flow

Booking and Check-in

เส้นทางนี้เชื่อมการเลือกกิจกรรม การกันที่นั่ง การชำระเงิน การตรวจสลิป การออก QR และการเช็กอิน ระบบ Production รองรับ workflow นี้แล้ว และ Back Office V2 ได้จำลองพร้อมทดสอบเส้นทางเดียวกันด้วยข้อมูลสังเคราะห์ใน Local

STEP 01

Choose an Activity

กรองจากปฏิทิน เปิดรายละเอียดวัน และเห็นจำนวนที่เหลือก่อนเริ่มกรอกข้อมูล

Calendar

STEP 02

Select a Session

ตัวเลือกวันที่และเวลาถูกจำกัดตาม catalog จริง พร้อม disabled state เมื่อเต็ม

Capacity API

STEP 03

Pay or Apply a Code

เลือกใช้ส่วนลด 100% หรือ PromptPay พร้อม QR ตามยอดและแนบหลักฐาน

Payment

STEP 04

Await Review

ระบบสร้าง reference และคงสถานะ pending review จนกว่าเจ้าหน้าที่ตัดสินใจ

Admin review

STEP 05

Receive the QR Ticket

เมื่อ approved ผู้ใช้ได้รับอีเมลและ secret ticket link ที่เปิดใช้ได้

Email · Ticket

STEP 06

Check In

เจ้าหน้าที่สแกน ตรวจสิทธิ์ และบันทึกเวลาแบบใช้ได้ครั้งเดียว

Scanner

Selected design work

Key screens
& design decisions

แต่ละหน้าถูกออกแบบและพัฒนา frontend ตามวิธีใช้งานจริง หน้าเล่าเรื่องใช้ภาพและพื้นที่ว่าง หน้าจองพาผู้ใช้ทำทีละขั้น ส่วนหน้าหน้างานเน้นปุ่ม สถานะ และผลลัพธ์ที่มองเห็นได้เร็ว

01 / DISCOVERY

Exhibition storytelling

หน้าแรกเวอร์ชันล่าสุดใช้พื้นผิวสีครีม พื้นที่ว่าง และตัวอักษรขนาดใหญ่เพื่อสร้างบรรยากาศสงบนิ่ง จากนั้นค่อยพาผู้ชมไปดูแนวคิด ศิลปิน ผลิตภัณฑ์ และข้อมูลการเข้าชมตามลำดับ

Progressive disclosureเริ่มจากภาพรวมของงาน แล้วค่อยลงรายละเอียดแนวคิด เส้นทาง ศิลปิน และข้อมูลการเข้าชม

Editorial navigationเมนูใช้หัวข้อสั้นและพาไปยังส่วนที่ผู้ชมต้องการได้ทันที

Practical information firstวัน เวลา สถานที่ และเวลานับถอยหลังอยู่ในหน้าจอแรก

ARTWELL exhibition homepage hero on desktop — **Desktop hero**Brand, event detail and countdown in one viewport

Anapana sculpture editorial product section — **Editorial product story**Object narrative with material and scale

02 / PLANNING

Activity discovery & schedule

เวอร์ชันล่าสุดเริ่มจากโปสเตอร์เพื่อให้ผู้ใช้เลือกกิจกรรมด้วยภาพและ Creator ก่อนเปิดรายละเอียดราคา วันที่ รอบเวลา และจำนวนที่เหลือในลำดับถัดไป

Capacity at decision pointแสดงจำนวนที่เหลือข้างรอบกิจกรรม เพื่อให้ตัดสินใจก่อนเปิดฟอร์ม

Consistent categoriesSound, Meditation, Aroma และ Workshop ใช้ชื่อและสีเดิมตลอดทั้งหน้า

Clear full sessionsรอบที่เต็มกดจองไม่ได้และมีข้อความบอกเหตุผลทันที

On the live website

หน้ากิจกรรม Production ล่าสุดแสดง 260 รอบ 13 กิจกรรม และ 50 วันที่มีกิจกรรม พร้อมโปสเตอร์ รายละเอียด Creator และจำนวนรอบที่เปิดจอง

Latest ARTWELL poster-based activity browser showing current workshops — **Activity browser**Poster, Creator and booking availability in one scan

03 / TRANSACTION

Guided booking & payment

ผมแบ่งฟอร์มตามลำดับที่คนกรอกจริง: เลือกรอบ → กรอกข้อมูลผู้จอง → ใช้ส่วนลดหรือชำระเงิน พร้อมสรุปรายการด้านข้างให้ตรวจอีกครั้งก่อนส่ง

Dependent inputsแสดงเฉพาะวันที่และรอบที่ตรงกับกิจกรรมที่เลือก

Two payment pathsถ้าใช้โค้ดส่วนลด 100% ระบบจะข้ามส่วนแนบสลิป ส่วนการโอนธนาคารจะแสดงยอดและบัญชีที่ต้องชำระ

Ready to submitปุ่มส่งจะเปิดเมื่อข้อมูลครบ และมีข้อความบอกว่าช่องใดยังขาด

Current status

ระบบ Production รองรับ Activity booking, capacity, free code/PromptPay, protected slip และ staff review แล้ว ส่วน V2 ผ่าน Local acceptance ของ booking lifecycle และ concurrency โดยยังไม่ claim ว่า deploy ขึ้น Production

ARTWELL activity booking form and summary — **Booking form**Step-based data entry

Latest ARTWELL discount and bank transfer payment section — **Payment decision**Discount or bank transfer

Key microcopy principle

ระบบไม่ใช้คำว่า “สำเร็จ” ทันทีเมื่อรับสลิป แต่สื่อว่า “ส่งการจองแล้วและรอตรวจสอบ” เพื่อให้ความคาดหวังตรงกับกระบวนการจริงของทีมงาน

04 / OPERATIONS

Admin & payment review

หน้าหลังบ้านเน้นข้อมูลมากกว่าภาพตกแต่ง ผมเปลี่ยนรายการโค้ดจากการ์ดเป็นแถว เพื่อให้เทียบสถานะ จำนวนครั้งที่ใช้ วันหมดอายุ และปุ่มจัดการได้เร็วขึ้น ระบบ Production รองรับ Registration, Activity และ Product operations แล้ว และ V2 ขยายต่อด้วย RBAC, Audit และ field-level visibility ที่ทดสอบแยกตามบทบาท

Fixed comparison columnsข้อมูลชนิดเดียวกันอยู่ตำแหน่งเดิมในทุกแถว จึงเทียบข้ามรายการได้ง่าย

Safer admin actionsโค้ดที่มีประวัติใช้งานแล้วลบไม่ได้ และคำสั่งสำคัญทำได้หลังล็อกอินเท่านั้น

Responsive tableบนมือถือ ตารางจะเปลี่ยนเป็นแถวสรุปที่มี label แทนการย่อทุกคอลัมน์จนอ่านไม่ออก

Activity booking admin with discount code row list — **Admin list**Row layout for faster comparison

Before and after comparison of admin discount code layout — **Before / after**Card grid evolved into a comparison-first row list

05 / ON-SITE

QR ticket & check-in

จุดเช็กอินต้องใช้ได้เร็วเมื่อมีคนรอ ผมจึงใช้ contrast สูง ปุ่มขนาดใหญ่ และแยกผล “ผ่าน” กับ “มีปัญหา” ให้เห็นชัด หน้า Check-in Scanner เปิดใช้งานแล้ว แต่ต้องให้เจ้าหน้าที่ล็อกอินก่อนจึงจะเห็นข้อมูลจริง

Multiple scan methodsรองรับการสแกนจากกล้อง เลือกรูป QR หรือกรอกรหัสด้วยมือ

Single-use ticketถ้าบัตรถูกใช้แล้ว ระบบจะแจ้งเวลาเช็กอินเดิมแทนการสแกนซ้ำ

Private error pageลิงก์ผิดหรือบัตรยังไม่พร้อมจะแสดงข้อความทั่วไปโดยไม่เปิดเผยข้อมูลผู้เข้าชม

ARTWELL check-in scanner staff login — **Staff entry**High-contrast authenticated surface

Invalid ARTWELL ticket error state — **Error state**No personal data disclosed

06 / ENGAGEMENT

Mind Reflection

Mind Reflection มี 10 คำถาม ผลลัพธ์คำนวณจาก 7 สภาวะและแสดงเป็นการ์ด 28 แบบ ผมตั้งใจให้เป็นพื้นที่ทบทวนความรู้สึก ไม่ใช่แบบวินิจฉัย และให้ผู้ใช้บันทึกหรือแชร์การ์ดของตนได้

One question at a timeแสดงทีละคำถามเพื่อให้ผู้ใช้จดจ่อและไม่รู้สึกว่าต้องรีบตอบ

Transparent resultผู้ใช้เลือกดูคะแนนทั้ง 7 สภาวะได้ว่าผลลัพธ์มาจากอะไร

Saveable resultการ์ดผลลัพธ์บันทึกเป็น PNG และแชร์ต่อได้

Latest Mind Reflection mobile introduction in Thai

Ethical framing

ข้อความผลลัพธ์ระบุว่า “นี่ไม่ใช่คำจำกัดความของตัวคุณ แต่เป็นเพียงภาพสะท้อนของใจในวันนี้” เพื่อไม่ทำให้แบบทดสอบถูกเข้าใจเป็นคำวินิจฉัยทางสุขภาพจิต

07 / SYSTEM EVOLUTION

Back Office V2 re-platform

เมื่อ workflow เติบโตจากหน้า Admin ไม่กี่หน้าเป็นระบบที่มีหลายบทบาท หลายสถานะ และข้อมูลสำคัญ ผมวาง V2 ให้เป็นการยกระดับโครงสร้างโดยรักษาพฤติกรรมที่ทีมคุ้นเคย ไม่ใช่การเปลี่ยนหน้าตาโดยไม่มีเหตุผล

Parity before redesignรักษาลำดับข้อมูล คำเรียก และรูปแบบหน้าสาธารณะ/หลังบ้านเดิม พร้อมปรับเฉพาะจุดที่เกี่ยวกับความปลอดภัยและความชัดเจน

Permission-aware UIเมนู ฟิลด์ ปุ่ม และข้อมูลตอบกลับอิงสิทธิ์จาก Backend แบบ deny-by-default แทนการซ่อนเฉพาะฝั่งหน้าเว็บ

Server-authoritative statesเวลา hold, capacity, lucky number, payment review, QR และ check-in ยึดสถานะจาก Server เพื่อป้องกันการจองเกินหรือผลลัพธ์ซ้ำ

Back Office V2 public product reservation interface with product and lucky-number selection — **V2 product booking**Product, variant and lucky-number selection

Back Office V2 public activity schedule interface — **V2 activity booking**289 local synthetic sessions across 13 activities

Back Office V2 · Local acceptanceEvidence through 23 Aug 2026

FoundationRBAC

Secure identity, session controls, Audit และ protected-field boundaries

OperationsM3

Registration, Media, Check-in, Activity และ Product booking workflows closed

Integrity13/13

Guarded MySQL concurrency scenarios passed with 102 assertions

Boundary

V2 ใช้ Laravel 13, React 19, TypeScript, Inertia, Tailwind, Vite และ MySQL บน Local ที่แยกจาก Legacy/Production พร้อมข้อมูลสังเคราะห์เท่านั้น การผ่าน milestone ไม่เท่ากับการอนุมัติ deploy หรือ cutover

08 / ON-SITE COMMERCE

SIP POS for the exhibition

ผมต่อยอดประสบการณ์จากการเข้าชมไปสู่ต้นแบบจุดขายหน้างาน โดยพัฒนา POS ร้านเดียวที่ใช้งานง่ายบน iPad รองรับทั้งเครื่องดื่มธีม ARTWELL สินค้า Tote Bag ส่วนลด และ workflow การชำระเงินสำหรับทีม Cashier

Fast cashier flowเลือกสินค้า ปรับจำนวนหรือส่วนลด รับเงินสด/PromptPay และยืนยันรายการโดยลดขั้นตอนที่ไม่จำเป็น

Event-specific catalogเครื่องดื่ม 7 รายการมีภาพและเสียงแยก ส่วน Tote Bag มี 12 SKU พร้อม stock ที่ติดตามได้

Safe runtime boundaryแยก Static frontend จาก Node.js API/SQLite เพื่อให้ interface พัฒนาและตรวจสอบได้โดยไม่เขียนทับเว็บไซต์หลักหรือฐานข้อมูลขาย

Latest SIP POS point-of-sale interface with ARTWELL drinks and cart — **Latest cashier surface**Touch-friendly catalog, stock and cart on one screen

SIP POS · Local implementationSingle-store on-site commerce

Spiritual Bar7

Theme-based drink items with dedicated product imagery and sound cues

Merchandise12 SKU

Four Tote Bag designs across white, red and black variants

Local verification21/21

Implementation and smoke checks passed in the local test environment

Payment design

หน้าชำระเงินแสดงเฉพาะ QR PromptPay และเงินสดตาม workflow หน้างาน ตัดบัตรและส่วนที่ไม่เกี่ยวกับร้านเดียวออก พร้อมลดความสูงของตะกร้าและ modal ให้เหมาะกับ iPad

09 / COLLABORATION

Creative stakeholder collaboration

ผมทำงานร่วมกับ Creative Director และศิลปินอีก 4 คน เพื่อทำความเข้าใจแนวคิด ผลงาน และบทบาทของแต่ละคน ก่อนนำมาจัดลำดับเป็นเนื้อหาบนเว็บไซต์

Creative directionนำทิศทางของ Na มาเชื่อมกับโครงสร้างเนื้อหาและจังหวะการเล่าเรื่องบนเว็บไซต์

Clear attributionแสดงชื่อและบทบาทของ Book, Sarran, Jai และ Toon อย่างชัดเจน

Solo digital ownershipผมรับผิดชอบการวางโครงสร้าง ออกแบบ และพัฒนาส่วนนี้ทั้งหมดด้วยตัวเอง

ARTWELL collaborators section with five creative contributors — **Partners**Each collaborator and role shown clearly

Design system

One Brand Language
Two Levels of Density

ภาพรวมใช้ขาว ดำ และสีครีมเป็นหลัก สีทองใช้กับจุดที่ต้องการเน้น สีเขียวใช้กับสถานะที่ผ่าน และสีแดงใช้เมื่อเกิดข้อผิดพลาด ส่วนกิจกรรมแต่ละหมวดมีสีประจำของตนเอง

01

Editorial for emotion

หน้าสาธารณะใช้พื้นที่ว่าง ภาพขนาดใหญ่ และจังหวะการเลื่อนที่ค่อยเป็นค่อยไป

02

Structured for action

หน้าจองและหลังบ้านใช้ลำดับขั้น สรุปรายการ label และสถานะที่มองเห็นชัด

03

Calm, never vague

น้ำเสียงยังสงบแบบ ARTWELL แต่ข้อความปุ่มและสถานะต้องบอกตรง ๆ ว่าเกิดอะไรขึ้น

Core visual tokens

INK
#11110F

PAPER
#F3F2ED

FOCUS
#D4A918

SUCCESS
#2E6B4B

ARTWELL

กลับมาอยู่กับตัวเอง

Reusable components

01

Activity chipCategory + semantic color + text label

02

Capacity badgeAvailable · Limited · Full · Unavailable

03

Step sectionNumber, title, inputs and validation hint

04

Status badgePending · Approved · Rejected · Checked-in

05

Booking rowFixed fields, slip link and admin actions

06

Feedback panelSuccess, error and the next action

State design

Designing
the In-Between States

ผู้ใช้ไม่ได้เจอเฉพาะกรณีที่ทุกอย่างสำเร็จ ตารางนี้รวบรวมสถานะที่ต้องออกแบบเพิ่ม เช่น รอบเต็ม รอตรวจ บัตรใช้แล้ว และไม่มีข้อมูล เพื่อให้ผู้ใช้รู้ว่าควรทำอะไรต่อ

Surface	State	User-facing behavior	Design purpose
Calendar	Loading	แสดงว่ากำลังตรวจสอบจำนวนที่ว่าง	ไม่ตีความข้อมูลเก่าเป็น availability ปัจจุบัน
Session	Full	ปิดปุ่มจองและระบุยอดจองเต็ม	ไม่ให้ผู้ใช้กรอกฟอร์มจนจบแล้วเพิ่งรู้ว่ารอบเต็ม
Discount	Valid	ยอดเป็นศูนย์และซ่อนส่วนแนบสลิป	ลดขั้นตอนที่ไม่จำเป็น
Payment	Pending review	แสดงเลขอ้างอิงและแจ้งว่ากำลังรอเจ้าหน้าที่ตรวจ	ไม่ทำให้ผู้ใช้เข้าใจผิดว่าการจองได้รับอนุมัติแล้ว
Activity hold	Expiring	แสดงเวลาที่เหลือและคืนที่นั่งเมื่อหมดอายุ	ป้องกันการถือ capacity ค้างและไม่ให้ client ต่อเวลาเอง
Lucky number	Conflict	รีเฟรช availability และบอกให้เลือกหมายเลขใหม่	ไม่ยืนยันเลขเดียวกันให้ผู้จองหลายคน
Ticket	Approved	เปิด QR ticket และส่งอีเมล	ออกสิทธิ์เมื่อเงื่อนไขครบเท่านั้น
Ticket	Invalid	ไม่แสดงข้อมูลส่วนตัวและแนะนำให้ติดต่อทีม	ปกป้องข้อมูลและบอกช่องทางขอความช่วยเหลือ
Check-in	Already used	แจ้งว่าเช็กอินแล้วพร้อมเวลาที่เกี่ยวข้อง	ป้องกันการใช้บัตรซ้ำและลดข้อโต้แย้ง
POS payment	Confirmed	สรุปรายการ วิธีชำระ และผลสำเร็จให้พนักงานเห็นทันที	ลดความคลุมเครือในช่วงคิวขายหน้างาน
Admin	Empty	แสดงข้อความว่าไม่พบรายการแทนตารางเปล่า	ช่วยแยกกรณีไม่มีข้อมูลออกจากกรณีที่ระบบมีปัญหา

Responsive & visual QA

Validated on Real Screens
Beyond the Mockup

ผมเปิดตรวจหน้าจอทั้ง desktop และ mobile ในหลายสถานะ โดยดูเป็นพิเศษว่าข้อความล้นหรือไม่ ลำดับข้อมูลอ่านง่ายหรือเปล่า และตารางหลังบ้านยังใช้งานได้บนจอเล็กหรือไม่

Focused before and after comparison of discount code administration

Focused comparison

ใช้ข้อมูลชุดเดียวกันเปรียบเทียบก่อนและหลัง เพื่อดูว่าตำแหน่งคอลัมน์และการกวาดตาดีขึ้นจริงหรือไม่

Mobile transformation

บนมือถือ แต่ละแถวเปลี่ยนเป็นข้อมูลสรุปที่มี label ปุ่มจัดการยังมองเห็น และหน้าไม่เลื่อนออกด้านข้าง

Saved card quality

ตรวจว่าการ์ดบนหน้าจอและไฟล์ PNG ที่บันทึกออกมามีสัดส่วน สี และตัวอักษรตรงกัน

Responsive desktop / mobile

No clipped or overlapping text

44px minimum touch targets

Keyboard focus visibility

Status not communicated by color alone

Empty, error and disabled states

Thai / English text fit

Consistent table columns

1440 / 768 / 390V2 visual parity checked across desktop, tablet and mobile breakpoints

3,003Assertions recorded in the closed M3 full PHP regression evidence

13 / 13Guarded Activity + Product MySQL concurrency scenarios passed

21 / 21SIP POS implementation and smoke checks passed in the local test environment

Measurement contract

What I Will
Measure Next

ระบบใช้งานจริงแล้ว แต่ยังไม่มีหลักฐาน Analytics ที่เพียงพอสำหรับสรุปผลลัพธ์เชิงธุรกิจ ผมจึงแยก “สิ่งที่ส่งมอบและผ่านการทดสอบ” ออกจาก “ผลลัพธ์ที่ต้องวัด” และกำลังนิยาม Dashboard, Reports, Exports และ aggregate-only Analytics ใน Phase 5 ของ V2

01

Visitor Value

ผู้ชมควรเข้าใจว่างานคืออะไร ลงทะเบียนได้ และเลือกวันที่จากปฏิทินโดยไม่ต้องถามทีมงานทุกขั้น

02

Operational Value

ทีมงานควรค้นหารายการและเช็กอินได้เร็ว โดยไม่เปิดข้อมูลหลังบ้านให้ผู้ใช้ทั่วไปเห็น

03

Business & Brand Value

เว็บไซต์ควรเป็น ARTWELL ในทุกหน้า และนำโครงสร้างเดิมกลับมาใช้กับงานครั้งต่อไปได้

Objective	Metric to track	Why it matters	Stakeholder
Discovery quality	Hero-to-calendar / registration click-through	บอกว่า storytelling พาผู้ชมไปสู่ practical action ได้หรือไม่	Brand · Growth
Booking usability	Booking completion and field-error rate	ดูว่าผู้ใช้ติดขัดหรือกรอกข้อมูลผิดตรงขั้นตอนไหน	Audience · Product
Session planning	Full-session attempts prevented	ยืนยันว่า capacity feedback ลด dead-end ได้จริง	Audience · Operations
Payment operations	Median review time and rejection reasons	ช่วยปรับหลักฐานที่ต้องใช้และ workflow ของเจ้าหน้าที่	Finance · Operations
On-site efficiency	Median check-in time and duplicate-scan incidents	วัดความเร็วและความปลอดภัยของ ticket flow	On-site team
Post-visit engagement	Mind Reflection completion and card shares	แสดงว่างานดิจิทัลต่อยอดประสบการณ์หลังนิทรรศการได้หรือไม่	Brand · Community

Current boundary

Phase 5 G7 อยู่ในช่วงวาง contract เรื่องสูตร metric, สิทธิ์รายงาน, CSV/XLSX schema และความเป็นส่วนตัวของ Analytics เท่านั้น จึงยังไม่อ้างว่ามี Dashboard/Export V2 หรือผล Conversion ที่พิสูจน์แล้ว

Recommendation

What This Work
Demonstrates

งานนี้แสดงการพา product intent ไปสู่ frontend delivery ตั้งแต่โครงสร้างข้อมูลและ interaction ไปจนถึง responsive UI, state handling และ visual QA บนหน้าผู้ชม เครื่องมือทีมงาน และระบบขายหน้างาน

What I Delivered

โครงสร้างและ responsive frontend ของเว็บไซต์นิทรรศการที่เชื่อม Storytelling, General/Media registration, Activity และ Product booking
Interface และ state design สำหรับ payment/slip review, protected QR ticket, role-based Admin และ single-use check-in
Mind Reflection frontend แบบ 10 คำถาม 7 สภาวะ และการ์ดผลลัพธ์ 28 แบบที่บันทึก/แชร์ได้
SIP POS interface สำหรับเครื่องดื่มและสินค้า รองรับเงินสด PromptPay ส่วนลด และการใช้งานบน iPad
React/TypeScript frontend ของ Back Office V2 แบบ Local-isolated ถึง M3 สำหรับ Identity, Registration/Check-in และ Activity/Product workflows

Recommended Next Phase

ปิด Phase 5 G7 contract และ implement Dashboard, Reports, CSV/XLSX Exports กับ aggregate-only Analytics
ทำ synthetic reconciliation ให้ metric บน Dashboard, Report และ Export ตรงกับ source records
ทดสอบ end-to-end กับบทบาทจริงและอุปกรณ์หน้างาน โดยเฉพาะ Scanner, iPad POS และ modal ที่มีข้อมูลหนาแน่น
เตรียมแผน migration, retention, infrastructure, backup และ rollback ก่อนเสนอ Production cutover ของ V2
เก็บ baseline จากระบบจริงแล้วจึงสรุป Conversion, review time, check-in speed และ operational impact