CASE 07 · LIVE PRODUCT · CHARITY COMMERCE

Satihimal

From Thailand to Nepal — Small Hands, Big Hope

ออกแบบประสบการณ์ made-to-order ที่ทำให้ผู้สนับสนุนเข้าใจแคมเปญ เลือกสินค้า ชำระเงิน และติดตามสถานะได้ โดยเชื่อมต่อกับงานตรวจสอบและจัดส่งของทีมหลังบ้าน

เปิดเว็บไซต์จริง ↗ ดู Service Flow
ภาพแคมเปญเสื้อ Edition 01 ท่ามกลางทิวเขา พร้อมข้อความ From Thailand to Nepal — Small Hands, Big Hope
Edition 01Bright sky · Honest journey · Made to order
ROLE
UX/UI · Product Design
SCOPE
IA · Service Flow · UI System · QA
PLATFORM
Responsive Web · Staff Operations
STATUS
Production · satihimal.com

THE CHALLENGE

การซื้อหนึ่งครั้ง
มีความไว้วางใจหลายชั้น

ผู้ใช้ต้องเข้าใจเจตนาของแคมเปญก่อนเลือกเสื้อ ยอมรับเงื่อนไข made-to-order ส่งหลักฐานการชำระเงิน และกลับมาติดตามได้โดยไม่ต้องสร้างบัญชี ขณะเดียวกันทีมงานต้องตรวจสลิปและขยับสถานะผลิตอย่างปลอดภัย

ขอบเขตหลักฐาน: เคสนี้อธิบายโครงสร้างและสิ่งที่เผยแพร่จริง ไม่อ้างยอดบริจาค conversion หรือผล usability testing ที่ไม่มีข้อมูลยืนยัน

END-TO-END SERVICE

จากความตั้งใจช่วย
สู่การติดตามที่ไม่ต้องเดา

เส้นทาง public และ operations ถูกออกแบบเป็นบริการเดียวกัน แต่เปิดเผยข้อมูลเท่าที่แต่ละบทบาทจำเป็นต้องเห็น

01

เข้าใจแคมเปญ

อ่าน mission, สินค้า และเงื่อนไขก่อนตัดสินใจ

PUBLIC · /
02

เลือกสินค้า

เลือกสี ไซซ์ จำนวน และตรวจยอดรวม

PUBLIC · /preorder
03

สร้างรายการ

กรอกข้อมูลและได้ temporary hold สำหรับชำระเงิน

SERVER · RESERVE
04

ส่งสลิป

ตรวจข้อมูลโอนและอัปโหลดไฟล์เข้าสู่พื้นที่ส่วนตัว

TOKEN · PAYMENT
05

ติดตามสถานะ

ดูการตรวจชำระเงินและการจัดส่งแยกกัน

TOKEN · TRACKING
06

ทีมงานดำเนินการ

ตรวจสลิป อนุมัติ และขยับงานผลิตตามลำดับ

STAFF · DASHBOARD

INFORMATION ARCHITECTURE

แยกเส้นทางตามงาน
และระดับการเข้าถึง

หน้า public ช่วยตัดสินใจและติดตาม ส่วน dashboard ทำหน้าที่เป็น operational queue โดยข้อมูลลูกค้าและสลิปไม่ออกสู่ public surface

PUBLIC EXPERIENCE

เข้าใจ · สั่ง · ชำระ · ติดตาม

  • /เรื่องราว Edition 01, สินค้า, ความโปร่งใส และ FAQ
  • /preorderเลือก variant และส่งข้อมูลพรีออเดอร์
  • /preorder/payment/[token]คำแนะนำชำระเงิน เวลา hold และการอัปโหลดสลิป
  • /track/[token]สถานะส่วนตัวโดยไม่เปิดเผยข้อมูลลูกค้าใน URL
  • /privacy · /termsความเป็นส่วนตัวและเงื่อนไข made-to-order

STAFF OPERATIONS

ค้นหา · ตรวจสอบ · ดำเนินการ

  • /dashboardภาพรวมแคมเปญและสัญญาณงานที่ต้องจัดการ
  • /dashboard/ordersคิวรายการพร้อมค้นหาและกรองสถานะ
  • /dashboard/orders/[id]รายละเอียด สลิป ประวัติ และ action ที่ได้รับอนุญาต
  • PRIVATE SLIPเจ้าหน้าที่เข้าถึงผ่านลิงก์อายุสั้นและมี audit trail
  • PRODUCTION EXPORTสรุปตาม SKU โดยไม่รวมข้อมูลลูกค้าหรือสลิป

FLOW & STATES

การชำระเงินกับการจัดส่ง
เป็นคนละคำตอบ

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

Reservation & Payment

AVAILABLE→TEMPORARY_HOLD→UNDER_REVIEW→APPROVEDหรือREJECTED

ทีมงานตรวจสลิปแบบ manual; รายการที่หมดเวลาหรือถูกปฏิเสธต้องอธิบายขั้นต่อไปด้วยข้อความ ไม่ใช้สีอย่างเดียว

Fulfilment

NOT_STARTED→IN_PRODUCTION→PACKING→SHIPPED→DELIVERED

สถานะเดินหน้าเป็นลำดับเดียว ลดความคลาดเคลื่อนระหว่างหน้า track, dashboard และข้อมูลสำหรับผลิต

DESIGN DECISIONS

สามการตัดสินใจที่ทำให้
ความหวังกลายเป็นบริการ

ภาพลักษณ์ที่อบอุ่นต้องทำงานคู่กับข้อมูล ขั้นตอน และสถานะที่ตรวจสอบได้

01 · TRUST NEAR ACTION

วางข้อมูลความโปร่งใสไว้ใกล้จุดตัดสินใจ

ผู้ใช้เห็น mission, made-to-order, privacy และ terms ก่อนส่งข้อมูล ไม่ต้องค้นหาเงื่อนไขจาก fine print หลังเริ่มจ่ายเงิน

HOME · PREORDER · LEGAL
02 · TEMPORARY HOLD

ให้เวลาและสถานะที่อธิบายได้ระหว่างชำระเงิน

หลังสร้างรายการ ระบบให้ payment context และ countdown ชัดเจน พร้อมรองรับ empty, invalid file, expired, review และ duplicate submission

PREORDER · PAYMENT · TRACKING
03 · OPERATIONS AS PRODUCT

ออกแบบงานหลังบ้านเป็นส่วนหนึ่งของประสบการณ์

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

DASHBOARD · AUDIT · FULFILMENT

PUBLIC UI SYSTEM

Bright sky ที่ยังอ่านง่าย
ในช่วงตัดสินใจสำคัญ

ใช้ฟ้าเป็น action color เหลืองสำหรับจุดสนใจ mint สำหรับความสำเร็จ และกรมท่าสำหรับข้อมูลที่ต้องการน้ำหนัก โดยทุกสถานะมีข้อความหรือไอคอนประกอบ

เสื้อ Satihimal Edition 01 สีขาวบนพื้นฟ้าอ่อน
เสื้อ Satihimal Edition 01 สีดำบนพื้นฟ้าอ่อน
1 · เลือกสินค้า2 · ชำระเงิน3 · ทีมงานตรวจสอบ
สีWhite / Black
ไซซ์เลือกจากตารางขนาด
จำนวน−   1   +
การจัดส่งแสดงจาก catalog

ตรวจรายการก่อนสร้าง temporary hold

ยอดรวมจากระบบ
สร้างรายการพรีออเดอร์

ตัวอย่างเชิงโครงสร้าง ไม่ใช่ฟอร์มรับออเดอร์ และไม่มีข้อมูลบัญชีหรือข้อมูลลูกค้าอยู่ใน Portfolio นี้

COMPONENTS & STATES

ออกแบบให้ใช้ได้
ทั้ง happy path และวันที่ไม่พร้อม

องค์ประกอบสำคัญระบุหน้าที่ สถานะ และข้อกำหนดด้าน accessibility เพื่อให้การพัฒนาต่อไม่เหลือแค่ภาพสวย

COMPONENTPURPOSEKEY STATESACCESSIBILITY / PRIVACY
Checkout Progressบอกตำแหน่งในเส้นทาง 3 ขั้นCurrent · Completed · Upcomingaria-current="step" และ label ไม่พึ่งสี
Preorder Formเลือก variant และเก็บข้อมูลที่จำเป็นIdle · Loading · Field error · Server error · Successtouch target ≥ 44px, error summary รับ focus
Payment Uploaderส่งสลิปเข้าสู่พื้นที่จัดเก็บส่วนตัวEmpty · Invalid · Uploading · Expired · Under reviewตรวจชนิด/ขนาดไฟล์ฝั่ง server; ไม่เผย object key
Tracking Timelineแยก payment และ fulfilment ให้เข้าใจง่ายAvailable · Review · Approved · Rejected · Deliveredtoken ส่วนตัว, ไอคอน + ข้อความ + state string
Staff Order Queueค้นหา กรอง ตรวจ และขยับงานLoading · Empty · Review · Permission deniedตรวจสิทธิ์ทุก action ฝั่ง server และมี audit trail

WEB & FRONTEND SCOPE

งานออกแบบเชื่อมต่อ
ถึงระบบที่ใช้งานจริง

แยกขอบเขตที่แสดงในเคสนี้ตามบทบาทสมัครงาน โดยระบุ deliverable, technology และ evidence/state จาก source ล่าสุด ไม่ใช้ตำแหน่งเหล่านี้แทนชื่อตำแหน่งงานจริง

01 · WEB DELIVERY

Web Developer

เชื่อมหน้า public, token-based tracking และ staff operations เข้ากับ route และข้อมูลที่มีสิทธิ์ต่างกัน

DELIVERABLES

  • Preorder, payment, tracking และ legal routes
  • Protected dashboard, order review และ production export
  • Server validation และ authorization boundary
Vinext / Next-compatibleViteDrizzle ORMMariaDB

EVIDENCE / STATE

Production routes ตอบ 200, dashboard redirect ผู้ไม่ผ่าน auth และ export API ตอบ 401 เมื่อไม่เข้าสู่ระบบ

02 · DESIGN TO INTERFACE

Frontend Design

แปลง campaign journey และ service state เป็น Thai-first responsive interface ที่สื่อความหมายได้โดยไม่พึ่งสีอย่างเดียว

DELIVERABLES

  • Public campaign, product และ preorder surfaces
  • Design tokens, responsive hierarchy และ component states
  • 44px touch target, copy hierarchy และ visual QA
React 19Tailwind CSS 4Responsive UIAccessibility

EVIDENCE / STATE

หน้าจอครอบคลุม empty, invalid, expired, review, approved และ rejected พร้อมข้อความกำกับทุกสถานะ

03 · UI ENGINEERING

Frontend Developer

พัฒนา interaction และ state ให้ตรงกับ business rule พร้อมเชื่อม API โดยให้ server เป็นแหล่งความจริงของการจองและชำระเงิน

DELIVERABLES

  • Form validation, upload feedback และ tracking timeline
  • Payment กับ fulfilment state machine แยกกัน
  • API integration, error handling และ permission feedback
ReactTypeScriptRoute APIsServer validation

EVIDENCE / STATE

POST ข้อมูลว่างตอบ 400 ตาม validation; เอกสาร go-live บันทึก tests 240/240 พร้อม typecheck, lint และ build

ROLE & EVIDENCE

จากโครงสร้างบริการ
ถึงงานที่เผยแพร่จริง

ขอบเขต Portfolio นี้เน้น UX/UI และ Product Design โดยอ้างสถานะ production จากเอกสารส่งมอบล่าสุด และไม่เปิดเผยข้อมูลคำสั่งซื้อหรือหลักฐานการชำระเงินจริง

บทบาทและสิ่งที่ส่งมอบ

  • สังเคราะห์ persona, journey และ jobs-to-be-done
  • วาง route-based IA และ end-to-end service flow
  • กำหนด component, state และ responsive behavior
  • ออกแบบ public experience และ operational handoff
  • Visual QA, accessibility และข้อความกำกับข้อเท็จจริง

หลักฐานสถานะที่ตรวจสอบได้

  • เว็บไซต์ public และเส้นทาง preorder/track/legal เผยแพร่บน production
  • Dashboard หลังบ้านป้องกันด้วยการเข้าสู่ระบบและสิทธิ์ของเจ้าหน้าที่
  • การตรวจสลิปและ fulfilment ใช้สถานะร่วมกันพร้อมประวัติการเปลี่ยนแปลง
  • Production dashboard และ export สรุปตาม SKU โดยไม่ส่งข้อมูลลูกค้าออกไป
  • การตรวจอัตโนมัติก่อน go-live ผ่าน 240/240 tests พร้อม typecheck, lint และ production build

LIVE PRODUCT

ดูว่าเส้นทางทั้งหมดทำงานร่วมกันอย่างไร

เปิดเว็บไซต์จริงเพื่อดู public experience หรือกลับไปเลือกเคสอื่นใน Portfolio

เปิด satihimal.com ↗กลับไป Portfolio