ผมออกแบบโครงสร้าง
ก่อนหน้าตา

UX/UI designer ที่เริ่มจากผังข้อมูล แกะว่าผู้ใช้กำลังหาอะไร จัด IA ให้ถูก แล้วค่อยลงดีไซน์

ดูผลงานทั้งหมด

4 case studies · เปิดอ่านเต็มได้ทุกชิ้น · ตั้งแต่ product blueprint ถึง live production

งานทั้งหมด 4 ชิ้น · Product Design · UX Research · Design System · Live Product

ARTWELL VERDA KU Engineering 360° FRUT POS

เครื่องมือที่ผมใช้ทำงานได้

Claude Code
Claude Design
Codex
Ai
Illustrator
Ps
Photoshop
Figma
Stitch
HTML / CSS
JS
Frontend
ผลงาน

ทุกเคส เห็นวิธีคิดตั้งแต่บรรทัดแรก

ทุกชิ้นใช้โครงเดียวกัน คือ บริบท บทบาท ขอบเขต ปัญหา วิธีเข้า ทางออก และวิธีพิสูจน์

01 Live Product experience → service

ARTWELL Experience Ecosystem

ประสบการณ์ดิจิทัลสำหรับนิทรรศการที่เชื่อม discovery, registration, activity calendar, Mind Reflection และเครื่องมือหน้างาน ครอบคลุม UX strategy, IA, service flow, responsive UI system และ visual QA บน production จริง

ดูเคสเต็ม
02 Product Design

VERDA Mobile app blueprint

ตลาดคาร์บอนเครดิตภาคสมัครใจที่ชาวบ้านขายเองไม่ได้ ต้องผ่านนายหน้า ส่วนผู้ซื้อ ESG ก็กลัว greenwashing ออกแบบเป็น two-sided platform ครบตั้งแต่ BMC จนถึง design system

ดู Design System
03 Self-initiated

KU Engineering 360° UX Research & Redesign

ทัวร์เสมือน 360° คณะวิศวฯ มก. ที่ผู้ใช้เข้าไปง่ายแต่ออกมายาก หลงทั้งเชิงพื้นที่และเชิงโครงสร้างข้อมูล ทำ user research แบบ think-aloud กับ 3 persona แล้วออกแบบชุด control ที่ค้างบนจอตลอดใหม่ทั้งหมด

ดูเคสเต็ม
04 Design System

FRUT POS Design Tokens & IA

ระบบ POS สำหรับร้านผลไม้ที่ต้องใช้ภาษาภาพเดียวกันทุกหน้าจอ จัดชุด color, type, spacing, radius และ component states พร้อม role-based IA, sitemap และ CSS variables ที่นำไปใช้ต่อได้

ดูเคสเต็ม
วิธีทำงาน

กระบวนการที่ทำซ้ำได้ และตรวจสอบได้

ยึด Design Thinking เป็นกรอบคิด และ UX Design Process เป็น deliverable จริงในแต่ละขั้น ทุกเคสใช้โครงเดียวกันนี้

Design Thinking Framework

01ทำความเข้าใจEmpathize
02กำหนดปัญหาDefine
03ระดมแนวทางIdeate
04สร้างต้นแบบPrototype
05ทดสอบTest

Double Diamond Framework

◇ Problem space

01ค้นพบDiscover↑ diverge
02นิยามปัญหาDefine↓ converge

◇ Solution space

03พัฒนาDevelop↑ diverge
04ส่งมอบDeliver↓ converge

UX Design Process · Deliverables

Empathize

01 · Research

  • Actual walkthrough
  • UI inventory
  • Competitive scan
  • Context / BMC
Define

02 · IA mapping

  • Sitemap / node-graph
  • Personas
  • Empathy map
  • Journey map
Ideate

03 · User flow

  • Flow per persona
  • Drop-off mapping
  • Priority matrix
  • IA ที่ปรับใหม่
Prototype

04 · Design

  • Wireframe / Before-After
  • UI redesign
  • Design System
  • Handoff
Test

05 · Validate

  • Tree test (IA)
  • Usability test (UI)
  • Success metrics
  • Quick wins
ประสบการณ์

จากการวิจัยผู้ใช้
สู่ระบบที่พร้อมพัฒนาต่อ

ทำงานสายออกแบบและสื่อสารตั้งแต่ปี 2554 ครอบคลุม UX Research, Information Architecture, Prototype และ Design System พร้อมส่งมอบ Spec/Handoff ที่ทีม Dev นำไปทำต่อได้

2564–ปัจจุบัน ตำแหน่งปัจจุบัน

UX/UI Designer

Command N Design Center

Professional Summary

UX/UI Designer ที่มีความเชี่ยวชาญเฉพาะด้าน Information Architecture มีประสบการณ์ออกแบบตั้งแต่การวิจัยผู้ใช้ วางโครงสร้างข้อมูล ไปจนถึงส่งมอบ Design System และ Prototype ที่พร้อมพัฒนาต่อ คุ้นเคยกับการทำงานร่วมกับทีม Dev ผ่านการทำ Spec/Handoff ที่ชัดเจน และนำ AI Tools มาช่วยเร่งกระบวนการออกแบบโดยไม่ลดคุณภาพงาน

หน้าที่รับผิดชอบ

  • วางแผนและดำเนินกระบวนการ UX Research เพื่อทำความเข้าใจผู้ใช้ เป้าหมายทางธุรกิจ และข้อจำกัดของระบบ
  • วิเคราะห์ requirement และจัดโครงสร้าง Information Architecture, Sitemap และ User Flow ให้สอดคล้องกับงานที่ผู้ใช้ต้องทำ
  • ออกแบบ Wireframe และ Prototype เพื่อสื่อสารแนวทาง ทดสอบการใช้งาน และปรับปรุงก่อนพัฒนา
  • สร้างและดูแล Design System, Design Token, Component และ State ให้หน้าจอมีมาตรฐานเดียวกันและรองรับการขยายระบบ
  • ทำงานร่วมกับ Stakeholder และ Developer ผ่าน Spec/Handoff ที่ชัดเจน พร้อมตรวจสอบความเป็นไปได้เชิงเทคนิคและแก้ข้อคลาดเคลื่อนระหว่างออกแบบกับพัฒนา
  • ตรวจสอบคุณภาพ UI ทั้งความสม่ำเสมอ การแสดงผลแบบ Responsive การเข้าถึง และความพร้อมก่อนส่งมอบ พร้อมใช้ AI Tools ช่วยเร่งงานโดยยังคงทบทวนคุณภาพทุกขั้นตอน

Skills

UX Research Information Architecture Wireframing Prototyping Figma FigJam Design System Design Token React TypeScript Supabase Claude Claude Code
2562–2564

Logistics Support

บริษัท สยามโกลบอลเฮ้าส์ จำกัด (มหาชน)

ช่วงที่ได้ออกแบบระบบที่มีคนใช้งานจริงในสายปฏิบัติการ ไม่ใช่แค่งานสื่อสาร

  • ออกแบบ web application สำหรับงานจ้างรถขนส่ง ระบบที่ใช้จริงในกระบวนการทำงานประจำวัน
  • ออกแบบงานกราฟิกและคิด content
  • ดูแล Facebook fan page ตอบข้อความและเผยแพร่ข่าวสาร
2554–2562

เจ้าหน้าที่บริหารงานทั่วไป

คณะสัตวแพทยศาสตร์ มหาวิทยาลัยเกษตรศาสตร์

ดูแลเว็บไซต์และช่องทางสื่อสารของคณะแบบครบวงจร เป็นทั้งคนออกแบบ คนลงข้อมูล และคนที่ตอบคำถามผู้ใช้เอง

  • ออกแบบเว็บไซต์คณะ และดูแลข้อมูลบนเว็บให้เป็นปัจจุบัน
  • ออกแบบงานกราฟิกและวางแผน content ใหม่ ๆ สำหรับเผยแพร่
  • ดูแล Facebook fan page ตอบข้อความและกระจายข่าวสาร ซึ่งเป็นช่องทางที่ได้รับคำถามจากผู้ใช้โดยตรง
  • ติดต่อประสานงานประชาสัมพันธ์ทั้งภายในและภายนอกหน่วยงาน

การศึกษา

2554

การศึกษาบัณฑิต (กศ.บ.)
สาขาเทคโนโลยีและสื่อสารการศึกษา

มหาวิทยาลัยมหาสารคาม · ปริญญาตรี

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

งานวิจัยระหว่างเรียน

  • Computer-Assisted Instruction (CAI) สื่อการเรียนการสอนเรื่อง “มุม” ในวิชาคณิตศาสตร์
  • Game for Learning เกมฝึกทักษะการคิดเลขเร็ว

โครงการและการฝึกอบรม

เข้าใจลูกค้า สร้างสินค้าและบริการที่ตรงใจด้วย Customer Experience

ปูพื้นฐานกลยุทธ์การรักษาฐานลูกค้าด้วย CRM

โครงการสุดยอดธุรกิจนวัตกรรมระดับภูมิภาค “นิลมังกร รุ่นที่ 4” · สำนักงานนวัตกรรมแห่งชาติ (NIA)

Genius Academy DIPROM Genius AGRO 360 · กรมส่งเสริมอุตสาหกรรม (ดีพร้อม)

สร้างฐานลูกค้าและบริหารการตลาดด้วย Email Marketing Automation

ทำ Line Marketing แบบครบวงจรสำหรับธุรกิจยุคใหม่

ยกระดับธุรกิจเพิ่มช่องทางการตลาดให้ปิดการขายได้ด้วย Sale Page

คำถามที่พบบ่อย

ตอบไว้ตรงนี้แล้ว

สถานการณ์ไหนควรใช้ Design Thinking?
ยังไม่รู้ “ใคร” และ “อะไร”

เริ่มจากศูนย์ ยังไม่มี baseline ต้องเข้าใจผู้ใช้จริง ๆ ก่อนออกแบบ เหมาะกับ product ใหม่หรืองาน innovation ที่ยังไม่เคยมีมาก่อน คำถามหลักคือ “ผู้ใช้จริง ๆ ต้องการอะไร”

ตัวอย่างในพอร์ตนี้: VERDA ที่ออกแบบ product ตั้งแต่ต้น สร้าง BMC และ personas ก่อนมีแม้แต่ wireframe

แล้ว Double Diamond ใช้ตอนไหน?
มีของอยู่แล้ว แต่ไม่แน่ใจปัญหา

มีระบบหรือเว็บที่ทำงานอยู่แล้ว ต้องการตรวจว่ากำลังแก้ปัญหาที่ถูกต้องหรือเปล่า ก่อนลงทุน redesign เหมาะกับงาน audit และ redesign คำถามหลักคือ “เรากำลังแก้ปัญหาที่ถูกต้องไหม”

ตัวอย่างในพอร์ตนี้: KU Engineering 360° เป็นงาน audit และ redesign ระบบที่มีอยู่ โดยค้นหา root cause ก่อนเสนอทางแก้

UX Design Process ต่างจากสองอันบนยังไง?
รู้ scope แล้ว ต้องการ deliverable

เข้าใจปัญหาและทิศทางชัดเจนแล้ว ต้องการ roadmap ที่บอกว่าต้องทำอะไร ส่งมอบอะไรบ้าง ทำหน้าที่เป็น “ภาษากลาง” กับทีมและ stakeholder

ใช้ในทุกเคส เป็นโครงหลักของทุกโปรเจกต์ คือ Research → IA → Flow → Design → Validate

ทำไมไม่มีตัวเลขผลลัพธ์อย่าง “เพิ่ม conversion 30%”?

ผมใส่เฉพาะตัวเลขที่มีหลักฐานจากระบบจริงหรือแหล่งข้อมูลที่ตรวจสอบได้ งาน self-initiated ที่ไม่ได้เข้าถึง analytics จะไม่อ้างผลลัพธ์หลัง launch เพราะตัวเลขเหล่านั้นพิสูจน์ไม่ได้

สิ่งที่ให้แทนคือ วิธี validate ที่ชัดเจน บอกว่าจะวัดอะไร ด้วยวิธีไหน และกับใคร ส่วนงาน production จะแยกสถานะ live, protected และ staged scope ให้ตรงกับสิ่งที่เผยแพร่จริง

งานไหนคือชิ้นที่ออกแบบเสร็จจริง ไม่ใช่แค่ audit?

ARTWELL เป็น live product ที่ public experience หลักเผยแพร่บน production แล้ว ครอบคลุม exhibition discovery, registration, activity calendar, Mind Reflection และเครื่องมือหน้างาน

VERDA เป็น product blueprint ที่ไล่ครบตั้งแต่ context, BMC, personas, journey, IA, prototype จนถึง design system เต็มรูปแบบ พร้อม handoff เปิดดูได้จากไฟล์ Design System โดยตรง

FRUT POS แสดง Design Tokens, role-based IA, Sitemap, component states และ CSS variables ที่ใช้เป็นมาตรฐานสำหรับพัฒนาหน้าจอต่อ ส่วน KU Engineering 360° มี user research, IA, user flow และ wireframe redesign อยู่ในรายงานฉบับเต็ม

รับงานแบบไหน และเริ่มยังไง?

รับทั้งงาน freelance และงานประจำ ถนัดงานที่ต้องแกะปัญหาเชิงโครงสร้าง เช่น IA audit, redesign ระบบที่มีอยู่แล้ว หรือออกแบบ product ใหม่ตั้งแต่ต้น ทำงานภาษาไทยและอังกฤษ

ส่งลิงก์เว็บหรือระบบที่อยากให้ดูมาทางอีเมลได้เลย ผมมักเริ่มด้วยการเดินระบบจริงก่อน แล้วส่งกลับเป็นภาพ IA ปัจจุบัน พร้อมจุดที่น่าจะเป็นปัญหา

ติดต่อ

มีระบบที่คนใช้แล้วหลงทางอยู่ไหม

ผมชื่อ Sarawut “Nui” Chantasang เป็น UX/UI ที่คิดเป็นระบบ ถนัด Information Architecture เป็นพิเศษ

อีเมล
s.chantasang@gmail.com
สถานะ
รับทั้ง freelance และประจำ
LINE · LinkedIn · เว็บ
ยังไม่ได้ระบุ
ภาษา
ไทย · อังกฤษ
Information Architecture UX Research User Flow UI Design Design System Figma / FigJam HTML / CSS Accessibility

ส่งลิงก์เว็บมาได้เลย เดี๋ยวผมไปเดินดูให้

Information
Architecture